3k Simon-He95
markstream-install Skill
在现有仓库中安装并接入 markstream-vue、markstream-react、markstream-vue2、markstream-angular 或 markstream-svelte。当 Codex 需要选择合适的包、安装最小的框架专属 peer 依赖、修复 CSS/reset 顺序、选择 Vue 3 渲染器模式及内置/简单/自定义代码块路径、在 `content`、`nodes` 与 Vue 3 虚拟滚动协调之间做取舍,或添加一个最小可用的渲染器示例时使用。
安装方式:把技能目录放入 ~/.claude/skills/(Claude Code)或在 claude.ai 设置中启用;也可复制右侧安装命令一键添加。
技能指令原文(SKILL.md)
Markstream Install
Use this skill when the task is "add markstream to an app" or "fix a broken markstream install".
Read references/scenarios.md before making dependency choices.
Workflow
- Detect the target framework and CSS stack.
- Check
package.json, app entry files, Tailwind or UnoCSS config, and whether the repo is SSR or streaming-focused. - Choose the package that matches the host app:
markstream-vue,markstream-vue2,markstream-react,markstream-angular, ormarkstream-svelte. - Use
markstream-svelteonly for Svelte 5 apps.
- Install the smallest peer set that matches the requested features.
- Add peers only for features the user actually needs. Check the chosen package's
peerDependencies; peer availability differs by renderer. - Vue 3 fenced code uses the built-in renderer automatically. Add
stream-diffsfor the enhanced File/Diff surface, omit it for automaticfallback, or setrender-code-blocks-as-preto force the plain path. - Add
@antv/infographicplussetInfographicLoader(...)only when infographic fences are needed. - Do not install every optional peer by default.
- For Vue 3 enhanced code-block preloading, use
preloadCodeBlockRuntimefrommarkstream-vue. If the application intentionally owns a runtime controller, import that advanced API directly fromstream-diffs.
- Fix CSS order.
- Put reset styles before Markstream styles.
- In Tailwind or UnoCSS projects, use
@import 'markstream-*/index.css' layer(components);.
- Do not rely on renderer imports to inject CSS; import the package CSS subpath explicitly.
- Import
katex/dist/katex.min.css when math is enabled.
- Add the smallest working render example.
- Use
content for static or low-frequency rendering.
- In Vue 3 apps with long AI conversations, thread restore, or an existing message virtualizer such as
vue-virtual-scroller, do not stop at a trivial renderer. Use MarkstreamVirtualTimeline or useMarkstreamVirtualAdapter() and follow docs/guide/performance.md.
- For Vue 3, choose renderer
mode by surface before tuning lower-level props.
mode="chat": AI chat or SSE output; lightweight batches, fade=false, max-live-nodes=0, and smooth-streaming="auto".
mode="docs": rich document surfaces; default mode, larger batches, tooltips, and fade.
mode="minimal": lightweight non-chat surfaces.
- In Vue 3 (including Nuxt),
smooth-streaming controls output pacing and fade controls opacity; they can be enabled together. mode="chat" keeps fade=false as a lightweight default. Add fade when gradual text reveal is desired; keep it off when animation cost matters more.
- Regular fenced code uses the built-in renderer, enhanced by
stream-diffs when installed. Use render-code-blocks-as-pre for a forced plain path or setCustomComponents(customId, { code_block: ... }) for a scoped application-owned renderer.
- For streaming AI chat in other Markstream packages, start with
content and built-in smooth streaming.
- Auto mode is the default:
smoothStreaming="auto" / smooth-streaming="auto".
- Auto pacing activates when
typewriter=true or maxLiveNodes <= 0 / 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.
- For high-frequency smooth streams, consider
fade=false / :fade="false" / [fade]="false" to avoid fade stacking.
- Streaming vs recovering history: in chat UIs the same renderer starts streaming and later switches to history when
final becomes true.
- Vue 3 streaming:
mode="chat", final, optional fade for gradual reveal, and optional typewriter for a cursor.
- Vue 3 recovering/completed chat history: keep
mode="chat" on the same chat row; use :smooth-streaming="false", typewriter=false, and choose fade independently; it may remain enabled during both streaming and history display.
- Use
mode="minimal" for lightweight non-chat recovered content, and use mode="docs" only for rich document surfaces.
- Other packages streaming:
smoothStreaming="auto" / smooth-streaming="auto", fade=false, typewriter=true.
- Other packages recovering history:
smoothStreaming=false / smooth-streaming=false, fade=true, typewriter=false.
- Optional policy for other packages:
smoothStreaming={isStreaming ? 'auto' : false}, fade={!isStreaming}; this is not a required coupling.
- Use
nodes + final only for worker preparsing, shared AST stores, or custom AST control.
- In Vue 3, use
typewriter="simple" for a lightweight cursor on high-frequency streams; use precise mode only when the cursor must follow complex inline layout.
- For a non-virtual Vue 3 chat scroller, import
useStickToBottom from markstream-vue/utils; call scheduleScrollToBottom() after the content update instead of starting a smooth scrollIntoView() animation for every token. Use MarkstreamVirtualTimeline with stick-to-bottom="auto" for long mixed timelines.
- For manual pacing with
nodes, use useSmoothMarkdownStream: enqueue() chunks, finish() when done, render from visible, wait for caughtUp before final parsing.
- Preserve the default hardening: HTML policies now default to
safe, and Mermaid runs in strict mode by default.
- Keep customization scoped.
- If the task requires overrides, prefer
customId / custom-id plus scoped setCustomComponents(...).
- Validate.
- Run the smallest relevant build, typecheck, test, or docs build command.
- Report which peers were installed, where CSS lives, and whether the repo should later adopt
nodes.
Default Decisions
- Prefer the minimal peer set over "install everything".
- For Vue 3, omit
mode only when the surface should use rich docs defaults.
- Prefer
content for most streaming chat now that built-in smooth streaming is available across Vue 3, Vue 2, React, Svelte, and Angular.
- Move to
nodes only when another layer owns parsing or AST transforms.
- For Vue 3 apps that already virtualize messages, keep the outer virtualizer responsible for mounted rows; use Markstream virtual-scroll coordination so item height comes from
metrics.totalHeight, not the renderer DOM height.
- When using
content for streaming, smooth streaming (smooth-streaming="auto") is on by default for typewriter or max-live-nodes <= 0. Set :smooth-streaming="false" to preserve raw chunk cadence.
- Streaming vs recovering history: keep the renderer mode stable. In Vue 3, fade is independent of pacing and can stay enabled throughout a stream. The conservative fade-off streaming examples for other packages are not an API restriction; those adapters have not adopted the Vue 3 bounded fade implementation. See
docs/guide/ai-chat-streaming.md for Vue 3 examples.
- Treat CSS order as a first-class part of installation, not a later cleanup.
- When the request includes SSR, explicitly gate browser-only peers behind client-only boundaries.
- Do not widen HTML or Mermaid security defaults unless the user explicitly needs trusted legacy compatibility.
- Enhanced code blocks in every Markstream package use
stream-diffs; there is no stream-monaco or Shiki direct integration in current versions.
- Direct
CodeBlockNode and top-level renderer configuration use the same codeBlockOptions / CodeBlockOptions contract. Keep component chrome in codeBlockProps; do not nest runtime options there.
- In Vue 3, large code blocks can be highlighted off the main thread by injecting an upstream
@pierre/diffs WorkerPoolManager through setStreamDiffsWorkerPool(...). The host builds the pool with its own bundler and adds @pierre/diffs as a direct dependency. This is a Vue 3-only enhancement; the other framework packages do not expose it.
- If compatibility requires it, scope the opt-out to the trusted surface with
htmlPolicy / html-policy="trusted" and mermaidProps.isStrict = false instead of changing app-wide defaults blindly.
Useful Doc Targets
docs/guide/installation.md
docs/guide/usage.md
docs/guide/performance.md
docs/guide/troubleshooting.md
docs/guide/component-overrides.md