awesome-copilot/skills/markstream-install/SKILL.md

name, description, license, compatibility, metadata

name	description	license	compatibility	metadata
markstream-install	Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package selection, minimal peer dependencies, CSS order, SSR boundaries, streaming mode, and renderer setup.	MIT	JavaScript or TypeScript frontend project using Vue 3, Nuxt 3/4, Vue 2.6/2.7, React 18+, Next.js, Angular 20+, or Svelte 5.	source documentation https://github.com/Simon-He95/markstream-vue https://markstream.simonhe.me/

Markstream Install

Integrate the appropriate Markstream package into an existing application without installing unnecessary optional dependencies or weakening its security defaults.

Read references/scenarios.md before choosing packages or peers.

When to Use

Use this skill when the user asks to:

• add streaming Markdown rendering to an AI chat or document interface;
• install Markstream in Vue, Nuxt, React, Next.js, Svelte, Angular, or Vue 2;
• repair a broken Markstream installation, missing styles, or SSR failure;
• replace another Markdown renderer with Markstream;
• choose between static, smooth-streaming, and externally parsed AST input.

Workflow

1. Inspect the host application

Before changing dependencies, inspect:

• the framework and version in package.json;
• the package manager lockfile;
• whether the application uses SSR;
• reset, Tailwind, UnoCSS, or design-system styles;
• required optional features: code highlighting, enhanced File/Diff surfaces, Monaco, Mermaid, D2, infographic blocks, or KaTeX.

Do not assume the Vue package is correct merely because the source repository is named markstream-vue. Select the framework-specific package from the scenario table.

2. Install the smallest dependency set

Install exactly one framework package. Add optional peers only when the requested UI uses their feature.

Examples:

npm install markstream-vue
npm install markstream-react
npm install markstream-svelte
npm install markstream-angular
npm install markstream-vue2

Preserve the repository's existing package manager. Do not install every optional peer preemptively.

3. Wire styles in the correct order

Import application resets before Markstream styles. Import package CSS explicitly; do not rely on component imports to inject it.

For Tailwind or UnoCSS, use the relevant package subpath in a component layer:

@import 'markstream-vue/index.css' layer(components);

Use the matching package name for React, Svelte, Angular, or Vue 2. If math rendering is enabled, also import:

@import 'katex/dist/katex.min.css';

Vue CLI 4 and other Webpack 4-based Vue 2 applications cannot resolve package export maps. In those projects, import the published file directly:

import 'markstream-vue2/dist/index.css'

4. Add the smallest working renderer

Prefer content for static documents and most streaming chat interfaces. Markstream's built-in smooth streaming can pace irregular token delivery without requiring the host to maintain an AST.

For Vue 3 chat surfaces, start with:

<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="false"
  smooth-streaming="auto"
  :fade="false"
  typewriter
/>

For completed chat history, keep the same renderer mode and switch pacing off:

<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="true"
  :smooth-streaming="false"
  :fade="true"
  :typewriter="false"
/>

In React, Svelte, and Angular, use the equivalent camelCase or framework binding syntax. Keep smoothStreaming="auto", fade=false, and typewriter=true while streaming; use smoothStreaming=false and typewriter=false for completed history.

Use nodes plus final only when a worker, shared AST store, custom transform, or another application layer already owns parsing.

5. Handle framework-specific boundaries

• In Nuxt, keep browser-only optional peers behind client boundaries.
• In Next.js, use the root markstream-react entry inside a 'use client' component for live SSE or WebSocket streams. Use markstream-react/next for SSR-first HTML with hydration, or markstream-react/server for server-only rendering.
• Use markstream-svelte only with Svelte 5.
• Confirm the Angular application meets the current markstream-angular version requirement.
• In Vue 3, use mode="chat" for AI chat, mode="docs" for rich documents, and mode="minimal" for lightweight non-chat surfaces.
• For long Vue 3 conversations or an existing message virtualizer, consult the Markstream performance guide before adding a second virtualizer.

6. Preserve safe defaults

HTML policy defaults to safe, and Mermaid uses strict mode. Do not broaden either setting unless the user explicitly identifies a trusted legacy surface that requires it. Scope any exception to that surface.

7. Validate

Run the smallest relevant build, typecheck, or test command. Confirm:

1. the selected package matches the framework;
2. only requested optional peers were added;
3. styles load after resets;
4. SSR pages do not evaluate browser-only peers on the server;
5. static content and at least one incremental update render correctly.

Report the selected package, added peers, CSS location, streaming input choice, and validation command.

Official References

• Installation
• AI chat and streaming
• Performance
• Troubleshooting
• Component overrides