🧪 Markstream Vue2 Vite
Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compati
About Markstream Vue2 Vite
Built for testing & qa workflows, Markstream Vue2 Vite helps AI coding agents integrate markstream-vue2 into a vue 2 plus vite app. use when codex needs vite-friendly worker imports, `?worker` or `?worker&inline` setup for mermaid or katex, modern css ordering, or vue 2 compati.
The 326-word prompt provides structured testing & qa guidance — covering detailed methodology and consistent output formats. Paste it into your CLAUDE.md or .cursorrules to activate.
Key Capabilities
- `markstream-vue2/workers/... ?worker` or `?worker&inline` patterns are allowed here.
- For AI chat or streaming UIs, keep `content` and use built-in smooth streaming first.
- `smooth-streaming="auto"` is the default and activates when `typewriter=true` or `max-live-nodes <= 0`.
- `typewriter` only controls the blinking cursor and defaults to `false`.
- `fade` controls node enter and streamed-text fade animations and defaults to `true`.
What This Skill Covers
- Workflow
- Default Decisions
- Useful Doc Targets
How It Works
- Confirm the repo is Vue 2 with Vite-based tooling.
- Install `markstream-vue2` plus only the requested optional peers.
- Import `markstream-vue2/index.css` after resets.
- Use Vite worker imports when the repo needs bundled workers.
- Keep Composition API decisions explicit for Vue 2.6 repos.
Use Cases
- Writing unit, integration, and end-to-end tests
- Setting up test coverage and CI pipelines
- Refactoring legacy code with confidence using tests
- Creating test plans and QA checklists
Example Prompts
System Prompt (326 words)
Markstream Vue 2 Vite
Use this skill when the host app is Vue 2 and the bundler is Vite.
Workflow
- Confirm the repo is Vue 2 with Vite-based tooling.
- Install
markstream-vue2plus only the requested optional peers. - Import
markstream-vue2/index.cssafter resets. - Use Vite worker imports when the repo needs bundled workers.
markstream-vue2/workers/... ?worker or ?worker&inline patterns are allowed here.
- Keep Composition API decisions explicit for Vue 2.6 repos.
content and use built-in smooth streaming first.
- smooth-streaming="auto" is the default and activates when typewriter=true or max-live-nodes <= 0.
- typewriter only controls the blinking cursor and defaults to false.
- fade controls node enter and streamed-text fade animations and defaults to true.
- Streaming vs recovering history: in chat UIs the same MarkdownRender starts streaming and later switches to history when final=true.
- Streaming: smooth-streaming="auto", :fade="false", typewriter=true. Smooth pacing handles gradual appearance; fade would flicker.
- Recovering history: :smooth-streaming="false", :fade="true", typewriter=false. Content is already complete — pacing would slow it down, but fade gives a polished entry animation.
- Dynamic switch: :smooth-streaming="isStreaming ? 'auto' : false", :fade="!isStreaming".
- Move to nodes + final only for worker-preparsed content, shared AST stores, or custom AST control.
- Remember that html-policy now defaults to safe, and Mermaid strict mode is on by default through mermaid-props.
- Validate with the smallest useful Vite dev or build command.
Default Decisions
- Prefer bundled workers over CDN workers in Vite-based Vue 2 repos.
- Keep UnoCSS or Tailwind resets before Markstream CSS.
- Use the generic
markstream-vue2skill only when the bundler-specific choice does not matter. - Keep
html-policy="safe"and Mermaid strict mode unless the task is preserving trusted legacy rendering. - If a trusted surface needs older behavior, use
html-policy="trusted"and:mermaid-props="{ isStrict: false }"only on that surface and explain why.
Useful Doc Targets
docs/guide/vue2-quick-start.mddocs/guide/vue2-installation.mddocs/guide/tailwind.mddocs/guide/troubleshooting.md
Frequently Asked Questions
What is Markstream Vue2 Vite?
Markstream Vue2 Vite is a free testing & qa skill for AI coding agents. Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compati. It provides a specialized system prompt that configures your agent with testing & qa expertise.
How do I use Markstream Vue2 Vite with Claude Code?
Copy the system prompt below and paste it into your CLAUDE.md file or Claude Code's custom instructions to activate Markstream Vue2 Vite.
Which AI coding agents work with Markstream Vue2 Vite?
Markstream Vue2 Vite is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Markstream Vue2 Vite free to use?
Yes, Markstream Vue2 Vite is completely free and open source. The full source is available on GitHub at https://github.com/Simon-He95/markstream-vue/blob/main/.agents/skills/markstream-vue2-vite/SKILL.md. You only need a subscription to the AI agent you use it with.
