Markstream Vue

Integrate markstream-vue into a Vue 3 app. Use when Codex needs to add the Vue 3 renderer, import CSS in the right order, choose renderer and DOM modes, choose built-in, plain, or custom code-block paths, choose between `content` and `nodes`, coordinate long AI timelines with `MarkstreamVirtualTimeline`, `useMarkstreamVirtualAdapter`, or `vue-virtual-scroller`, enable optional peers such as stream-diffs, Mermaid, KaTeX, D2, or Infographic, or wire scoped custom components in a non-Nuxt Vue repository.

3,046 stars 188 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Simon-He95/markstream-vue --skill markstream-vue

Manual install

git clone --depth 1 https://github.com/Simon-He95/markstream-vue.git /tmp/markstream-vue
mkdir -p ~/.claude/skills
cp -r /tmp/markstream-vue/.agents/skills/markstream-vue ~/.claude/skills/markstream-vue

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Markstream Vue 3

Use this skill when the host app is plain Vue 3, typically Vite-based, and not Nuxt.

## Workflow

1. Confirm the repo is Vue 3 and not Nuxt.
2. Install `markstream-vue` plus only the optional peers required by the requested features.
3. Import `markstream-vue/index.css` after resets.
   - In Tailwind or UnoCSS projects, use `@import 'markstream-vue/index.css' layer(components);`.
   - The root JS import does not inject styles; use `markstream-vue/index.css` or `markstream-vue/index.px.css` explicitly.
4. Start with `content` and choose the renderer mode by surface.
   - Use `mode="chat"` for AI chat or SSE output. It uses lightweight batches, `fade=false`, and `max-live-nodes=0`; `smooth-streaming="auto"` paces visible output.
   - Use `mode="docs"` for rich document surfaces. It is the default and enables larger batches, tooltips, and fade.
   - Use `mode="minimal"` when the surface is lightweight but not chat.
   - Regular fenced code uses the built-in `CodeBlockNode`, enhanced by `stream-diffs` when that optional peer is installed and otherwise falling back to `<pre><code>`. Set `render-code-blocks-as-pre=true` to force the plain path, or replace `code_block` through scoped `setCustomComponents(...)` when the app owns the renderer.
   - Use `dom-mode="minimal"` only when the surface can also disable wrapper-dependent features such as fade, batching, deferral, virtualization, typewriter, and custom components; otherwise it falls back to full DOM.

Read the full skill on GitHub

Details

Skill name: markstream-vue
Repository: Simon-He95/markstream-vue
Path: .agents/skills/markstream-vue/SKILL.md
License: MIT
Repo updated: 31 October 2026
Listed in: heilcheng/awesome-agent-skills, VoltAgent/awesome-agent-skills

FAQ

What does the Markstream Vue skill do?

How do I install the Markstream Vue skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Simon-He95/markstream-vue --skill markstream-vue. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Markstream Vue popular?

It lives in Simon-He95/markstream-vue, which has 3,046 GitHub stars and 188 forks, and is included in 2 curated skill lists.

Related skills

Markstream Angular

Simon-He95/markstream-vue

Integrate the alpha markstream-angular package into an Angular 20+ app. Use when Codex needs standalone component imports, signal-based examples, CSS wiring, custom HTML tags or customComponents setup, or optional peer integration in an Angular repository.

Frontend & DesignIn 2 lists188

Markstream Custom Components

Simon-He95/markstream-vue

Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Solid, Svelte, and Angular. Use when Codex needs scoped `setCustomComponents`, renderer-local React `streamingComponents` or `htmlComponents`, Angular/Svelte `customComponents`, Vue app-scoped components, node override keys such as `image`, `code_block`, `mermaid`, or `link`, or nested renderers for tags such as `thinking`.

Frontend & DesignIn 2 lists188

Markstream Install

Simon-He95/markstream-vue

Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, markstream-svelte, or markstream-solid into an existing repository. Use when Codex needs to choose the right package, install the smallest framework-specific peer-dependency set, fix CSS/reset order, choose Vue 3 renderer mode and built-in, plain, or custom code-block paths, decide between `content`, `nodes`, and Vue 3 virtual-scroll coordination, or add a minimal working renderer example.

Frontend & DesignIn 2 lists188

Markstream Vue2

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2.6 or 2.7 app. Use when Codex needs Vue 2-compatible setup, `@vue/composition-api` decisions, CSS wiring, optional peer setup, or scoped Markstream overrides in a Vue 2 repository that is not specifically Vue CLI / Webpack 4 constrained.

Frontend & DesignIn 2 lists188

Markstream Svelte

Simon-He95/markstream-vue

Integrate the beta markstream-svelte package in Svelte 5 or SvelteKit apps. Use when Codex needs Svelte 5 runes, CSS and optional peers, smooth streaming, worker setup, renderer-local or scoped custom components, or SSR-safe boundaries. Svelte 4 is unsupported.

Frontend & DesignIn 2 lists188

Markstream Vue2 CLI

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2 Vue CLI or Webpack 4 app. Use when Codex needs Webpack 4-friendly setup, CDN worker fallbacks for Mermaid or KaTeX, `dist/index.css` imports, Vue 2 composition-api shims, or code block choices limited to `stream-diffs` or plain `<pre>`.

Frontend & DesignIn 2 lists188

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.