Agent skill · software engineering · aiskillstore
markstream-install
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, choose Vue 3 renderer mode, decide between `content`, `nodes`, and Vue 3 virtual-scroll coordination, or add a minimal working renderer example.
Why this skill is useful
Adds specific installation and configuration commands for integrating Markstream with various frameworks that the AI wouldn't reliably generate on its own.
What it needs
Requires markstream-angular, markstream-react, markstream-svelte, markstream-vue, markstream-vue2 installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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, 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. 4. 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, <pre> code rendering by default, fade=false, max-live-nodes=0, and smooth-streaming="auto". mode="docs": rich document surfaces; default mode, larger batches, tooltips, fade, and Monaco-backed code blocks when the peer is installed. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/markstream-install