Agent skill · software engineering · aiskillstore
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 `mode="chat"`, `mode="docs"`, or `mode="minimal"`, choose between `content` and `nodes`, coordinate long AI timelines with `MarkstreamVirtualTimeline`, `useMarkstreamVirtualAdapter`, or `vue-virtual-scroller`, enable optional peers like Mermaid, KaTeX, D2, Monaco, or stream-markdown, or wire scoped custom components in a non-Nuxt Vue repository.
Why this skill is useful
Provides specific integration patterns and configurations for using markstream-vue in Vue 3 applications that the AI wouldn't reliably generate on its own.
What it needs
Requires markstream-vue installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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, <pre> code rendering by default, fade=false, and max-live-nodes=0; smooth-streaming="auto" paces visible output. Use mode="docs" for rich document surfaces. It is the default, enables larger batches, tooltips, fade, and Monaco-backed code blocks when the peer is installed. Use mode="minimal" when the surface is lightweight but not chat. If a docs page does not need Monaco-backed code blocks, set :render-code-blocks-as-pre="true". typewriter only controls the blinking cursor and defaults to false. Set :smooth-streaming="false" to preserve raw chunk cadence; set :smooth-streaming="true" to force smooth pacing even on first-screen content (may cause hydration mismatch in SSR). When overriding mode defaults on a high-frequency stream, pair smooth streaming with :fade="false" to avoid delta fade (280 ms) stacking with high-commit pacing. Streaming vs recovering history: in chat UIs the same MarkdownRender starts streaming and later switches to history when final=true. Streaming: mode="chat", smooth-streaming="auto", :fade="false", typewriter=true. Recovering/completed chat history: keep mode="chat" on the same chat row to avoid switching code renderer or layout strategy when final=true; use :smooth-streaming="false", typewriter=false, and only set :fade="true" when the host explicitly wants a history-entry animation. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/markstream-vue