markstream-install

name	markstream-install
description	Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, or markstream-svelte into an existing repository. Use when Codex needs to choose the right package, install the smallest peer-dependency set, fix CSS/reset order, decide between `content` and `nodes`, or add a minimal working renderer example.

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

1. 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, or markstream-svelte.
   • Use markstream-svelte only for Svelte 5 apps.
2. Install the smallest peer set that matches the requested features.
   • Add peers only for features the user actually needs: Monaco, Mermaid, D2, KaTeX, or lightweight highlighting via stream-markdown.
   • Do not install every optional peer by default.
   • For Vue 3 Monaco preloading, use preloadCodeBlockRuntime from markstream-vue so the renderer runtime knows Monaco is warm. Existing getUseMonaco() calls are still compatible.
3. Fix CSS order.
   • Put reset styles before Markstream styles.
   • In Tailwind or UnoCSS projects, place markstream-*/index.css inside @layer components.
   • Import katex/dist/katex.min.css when math is enabled.
4. Add the smallest working render example.
   • Use content for static or low-frequency rendering.
   • For streaming AI chat, use typewriter or :max-live-nodes="0" — smooth streaming (smooth-streaming="auto") paces visible output automatically. Pair with :fade="false".
   • Use nodes plus final when the app needs custom AST control, worker preparsing, or structural updates beyond pacing.
   • 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.
5. Keep customization scoped.
   • If the task requires overrides, prefer customId / custom-id plus scoped setCustomComponents(...).
6. 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".
• Prefer content unless the app is clearly SSE, chat, token-streaming, or worker-preparsed.
• 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.
• 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.
• 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/troubleshooting.md
• docs/guide/component-overrides.md