Complete AI TrainingYourJobSkills for your job

Skills / frontend

markstream-vue2-vite

Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults.

IT & Software Developmentmarkdownstreamingvitevue2workers

Markstream Vue 2 Vite

Overview

Use Vite-native worker bundling while preserving Vue 2 compatibility and rendering safety.

When to Use

Use when the host is Vue 2 with Vite and needs bundled Mermaid or KaTeX workers. Use the generic Vue 2 skill when worker/bundler behavior is irrelevant.

Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

  1. Confirm Vue 2 with Vite and install only requested peers.
  2. Import markstream-vue2/index.css after reset, Tailwind, or UnoCSS layers.
  3. Use package worker entrypoints with Vite ?worker or ?worker&inline imports only when needed.
  4. Add @vue/composition-api only for Vue 2.6 code requiring it.
  5. Keep content with smooth streaming for chat; set final and disable pacing/cursor for history.
  6. Use nodes only for externally owned parsing. Keep HTML safe and Mermaid strict.
  7. Validate the Vite build and worker loading path.

Example

<script>
import MarkdownRender from 'markstream-vue2'
import 'markstream-vue2/index.css'

export default {
  components: { MarkdownRender },
  props: { content: String, done: Boolean },
}
</script>

<template>
  <MarkdownRender
    :content="content"
    :final="done"
    :fade="done"
  />
</template>

Limitations

  • Vite worker syntax is no

Subscribers only

The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.

Details

SourceSimon-He95/markstream-vue
LicenseMIT
Risk labelcritical ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md
Added2026-07-21

Related skills

anti-ui-slop

Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.

astro

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

chat-widget

Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.

chrome-extension-developer

Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.

design-it

Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.

design-taste-frontend

Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.