From 741c9b1fbed9ea816563af7442f274947dc64d6c Mon Sep 17 00:00:00 2001
From: Simon He <674949287@qq.com>
Date: Sun, 19 Jul 2026 20:40:13 +0800
Subject: [PATCH 1/3] Add Markstream installation skill
---
docs/README.skills.md | 1 +
skills/markstream-install/SKILL.md | 136 ++++++++++++++++++
.../references/scenarios.md | 39 +++++
3 files changed, 176 insertions(+)
create mode 100644 skills/markstream-install/SKILL.md
create mode 100644 skills/markstream-install/references/scenarios.md
diff --git a/docs/README.skills.md b/docs/README.skills.md
index fb94c86e3..bead6917a 100644
--- a/docs/README.skills.md
+++ b/docs/README.skills.md
@@ -237,6 +237,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
| [lsp-setup](../skills/lsp-setup/SKILL.md)
`gh skills install github/awesome-copilot lsp-setup` | Enable code intelligence (go-to-definition, find-references, hover, type info) for any programming language by installing and configuring an LSP server for Copilot CLI. Detects the OS, installs the right server, and generates the JSON configuration (user-level or repo-level). Use when you need deeper code understanding and no LSP server is configured, or when the user asks to set up, install, or configure an LSP server. | `references/lsp-servers.md` |
| [make-repo-contribution](../skills/make-repo-contribution/SKILL.md)
`gh skills install github/awesome-copilot make-repo-contribution` | All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly. | `assets/issue-template.md`
`assets/pr-template.md` |
| [markdown-to-html](../skills/markdown-to-html/SKILL.md)
`gh skills install github/awesome-copilot markdown-to-html` | Convert Markdown files to HTML similar to `marked.js`, `pandoc`, `gomarkdown/markdown`, or similar tools; or writing custom script to convert markdown to html and/or working on web template systems like `jekyll/jekyll`, `gohugoio/hugo`, or similar web templating systems that utilize markdown documents, converting them to html. Use when asked to "convert markdown to html", "transform md to html", "render markdown", "generate html from markdown", or when working with .md files and/or web a templating system that converts markdown to HTML output. Supports CLI and Node.js workflows with GFM, CommonMark, and standard Markdown flavors. | `references/basic-markdown-to-html.md`
`references/basic-markdown.md`
`references/code-blocks-to-html.md`
`references/code-blocks.md`
`references/collapsed-sections-to-html.md`
`references/collapsed-sections.md`
`references/gomarkdown.md`
`references/hugo.md`
`references/jekyll.md`
`references/marked.md`
`references/pandoc.md`
`references/tables-to-html.md`
`references/tables.md`
`references/writing-mathematical-expressions-to-html.md`
`references/writing-mathematical-expressions.md` |
+| [markstream-install](../skills/markstream-install/SKILL.md)
`gh skills install github/awesome-copilot 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. | `references/scenarios.md` |
| [mcp-cli](../skills/mcp-cli/SKILL.md)
`gh skills install github/awesome-copilot mcp-cli` | Interface for MCP (Model Context Protocol) servers via CLI. Use when you need to interact with external tools, APIs, or data sources through MCP servers, list available MCP servers/tools, or call MCP tools from command line. | None |
| [mcp-copilot-studio-server-generator](../skills/mcp-copilot-studio-server-generator/SKILL.md)
`gh skills install github/awesome-copilot mcp-copilot-studio-server-generator` | Generate a complete MCP server implementation optimized for Copilot Studio integration with proper schema constraints and streamable HTTP support | None |
| [mcp-create-adaptive-cards](../skills/mcp-create-adaptive-cards/SKILL.md)
`gh skills install github/awesome-copilot mcp-create-adaptive-cards` | Skill converted from mcp-create-adaptive-cards.prompt.md | None |
diff --git a/skills/markstream-install/SKILL.md b/skills/markstream-install/SKILL.md
new file mode 100644
index 000000000..2a3aa090d
--- /dev/null
+++ b/skills/markstream-install/SKILL.md
@@ -0,0 +1,136 @@
+---
+name: markstream-install
+description: '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.'
+license: MIT
+compatibility: '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.'
+metadata:
+ source: https://github.com/Simon-He95/markstream-vue
+ documentation: https://markstream.simonhe.me/
+---
+
+# Markstream Install
+
+Integrate the appropriate [Markstream](https://github.com/Simon-He95/markstream-vue) package into an existing application without installing unnecessary optional dependencies or weakening its security defaults.
+
+Read [references/scenarios.md](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, Monaco, Mermaid, D2, 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:
+
+```bash
+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:
+
+```css
+@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:
+
+```css
+@import 'katex/dist/katex.min.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:
+
+```vue
+
+```
+
+For completed chat history, keep the same renderer mode and switch pacing off:
+
+```vue
+
+```
+
+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 and Next.js, keep browser-only optional peers behind client boundaries.
+- 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](https://markstream.simonhe.me/guide/installation)
+- [AI chat and streaming](https://markstream.simonhe.me/guide/ai-chat-streaming)
+- [Performance](https://markstream.simonhe.me/guide/performance)
+- [Troubleshooting](https://markstream.simonhe.me/guide/troubleshooting)
+- [Component overrides](https://markstream.simonhe.me/guide/component-overrides)
+
diff --git a/skills/markstream-install/references/scenarios.md b/skills/markstream-install/references/scenarios.md
new file mode 100644
index 000000000..ae5d4009d
--- /dev/null
+++ b/skills/markstream-install/references/scenarios.md
@@ -0,0 +1,39 @@
+# Install Scenarios
+
+## Package selection
+
+| Host app | Package |
+|----------|---------|
+| Vue 3 / Nuxt 3 or 4 | `markstream-vue` |
+| Vue 2.6 / 2.7 | `markstream-vue2` |
+| React 18+ / Next.js | `markstream-react` |
+| Angular 20+ | `markstream-angular` |
+| Svelte 5 | `markstream-svelte` |
+
+## Peer selection
+
+| Feature | Peer |
+|---------|------|
+| Lightweight highlighted code blocks | `stream-markdown` |
+| Monaco-powered code blocks | `stream-monaco` |
+| Mermaid diagrams | `mermaid` |
+| D2 diagrams | `@terrastruct/d2` |
+| KaTeX math | `katex` |
+
+## CSS checklist
+
+- Load reset styles first.
+- Load the framework-specific Markstream CSS after the reset.
+- In Tailwind or UnoCSS projects, use `@import '...' layer(components)`.
+- Import KaTeX CSS when math is enabled.
+- When rendering standalone node components directly, wrap them with the relevant package root class such as `.markstream-vue`, `.markstream-react`, or `.markstream-svelte`.
+
+## Input choice
+
+- `content`: static documents, low-frequency updates, and most SSE or token-streaming chat surfaces.
+- `content` with built-in smooth streaming: irregular AI streams whose visible output should be paced independently from raw chunk cadence.
+ - `smoothStreaming="auto"` or `smooth-streaming="auto"` is the default.
+ - Auto pacing activates when `typewriter=true` or `maxLiveNodes <= 0` / `max-live-nodes <= 0`.
+ - `typewriter` controls the cursor and defaults to `false`.
+ - `fade` controls node-entry and streamed-text fade effects.
+- `nodes` plus `final`: worker-preparsed content, shared AST stores, custom AST transforms, or cases where another layer already owns parsing.
From 9c1d571f36e003a18359b1a80f1f0970b4a59f7d Mon Sep 17 00:00:00 2001
From: Simon He <674949287@qq.com>
Date: Sun, 19 Jul 2026 20:46:01 +0800
Subject: [PATCH 2/3] Address Markstream skill review feedback
---
skills/markstream-install/SKILL.md | 12 ++++++++++--
.../markstream-install/references/scenarios.md | 17 +++++++++--------
2 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/skills/markstream-install/SKILL.md b/skills/markstream-install/SKILL.md
index 2a3aa090d..dfe53e776 100644
--- a/skills/markstream-install/SKILL.md
+++ b/skills/markstream-install/SKILL.md
@@ -70,6 +70,12 @@ Use the matching package name for React, Svelte, Angular, or Vue 2. If math rend
@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:
+
+```ts
+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.
@@ -80,6 +86,7 @@ For Vue 3 chat surfaces, start with:
Date: Sun, 19 Jul 2026 21:01:38 +0800
Subject: [PATCH 3/3] Document remaining Markstream optional peers
---
skills/markstream-install/SKILL.md | 2 +-
skills/markstream-install/references/scenarios.md | 2 ++
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/skills/markstream-install/SKILL.md b/skills/markstream-install/SKILL.md
index dfe53e776..ffc5d84ea 100644
--- a/skills/markstream-install/SKILL.md
+++ b/skills/markstream-install/SKILL.md
@@ -34,7 +34,7 @@ Before changing dependencies, inspect:
- the package manager lockfile;
- whether the application uses SSR;
- reset, Tailwind, UnoCSS, or design-system styles;
-- required optional features: code highlighting, Monaco, Mermaid, D2, or KaTeX.
+- 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.
diff --git a/skills/markstream-install/references/scenarios.md b/skills/markstream-install/references/scenarios.md
index eed95dfd5..aa228594e 100644
--- a/skills/markstream-install/references/scenarios.md
+++ b/skills/markstream-install/references/scenarios.md
@@ -16,9 +16,11 @@
| Feature | Peer | Supported packages | Activation |
|---------|------|--------------------|------------|
| Lightweight highlighted code blocks | `stream-markdown` | `markstream-vue`, `markstream-vue2`, `markstream-react` | Configure the package's `MarkdownCodeBlockNode` as the `code_block` override |
+| Enhanced code blocks and File/Diff surfaces | `stream-diffs` | `markstream-vue` | Install for copy, preview, expand, syntax-highlighting, and File/Diff features |
| Monaco-powered code blocks | `stream-monaco` | All framework packages | Install only when Monaco interactions are required |
| Mermaid diagrams | `mermaid` | All framework packages | Install when Mermaid fences are rendered |
| D2 diagrams | `@terrastruct/d2` | All framework packages | Install when D2 fences are rendered |
+| Infographic blocks | `@antv/infographic` | All framework packages | Install when infographic fences are rendered |
| KaTeX math | `katex` | All framework packages | Install and load KaTeX CSS when math is rendered |
## CSS checklist