opencode-skills-collection 4.0.7 → 4.0.8

package/bundled-skills/markstream-custom-components/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: markstream-custom-components
+description: "Override Markstream node renderers and add trusted custom tags across Vue, React, Svelte, and Angular using scoped or renderer-local mappings."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-custom-components
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [markdown, components, vue, react, svelte, angular]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Custom Components
+
+## Overview
+
+Customize specific Markstream nodes or trusted custom tags without replacing the parser or leaking global renderer state. Read [references/patterns.md](references/patterns.md) first.
+
+## When to Use
+
+Use to replace built-ins such as `image`, `link`, `code_block`, `mermaid`, or `inline_code`; render trusted tags such as `thinking`; or scope overrides to one renderer or app. Use parser transforms only when token or AST reshaping is required.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Classify the change as a built-in override, trusted tag, or parser transform.
+2. Prefer scoped mappings. Vue, Vue 2, Svelte, and Angular can use `setCustomComponents(customId, mapping)`; Svelte and Angular can also pass renderer-local maps.
+3. In React, prefer `streamingComponents` for parser-backed nodes and `htmlComponents` for sanitized attributes plus children.
+4. Start with leaf nodes before containers that must preserve children.
+5. For trusted tag bodies containing Markdown, use a nested renderer with the same allowlist. Do not add a second smooth-streaming loop.
+6. Preserve node/loading props, identity keys, scope IDs, theme state, and preview-height estimates for async diagrams.
+7. Remove temporary scoped registrations on cleanup and validate repeated and nested tags.
+
+## Example
+
+```tsx
+import MarkdownRender, {
+  type NodeComponentProps,
+  setCustomComponents,
+} from 'markstream-react'
+import 'markstream-react/index.css'
+
+function ThinkingNode({ node }: NodeComponentProps<any>) {
+  return <details><summary>Thinking</summary>{node.content}</details>
+}
+
+setCustomComponents('assistant-panel', { thinking: ThinkingNode })
+
+export function Answer({ markdown }: { markdown: string }) {
+  return (
+    <MarkdownRender
+      content={markdown}
+      customId="assistant-panel"
+      customHtmlTags={['thinking']}
+      htmlPolicy="safe"
+    />
+  )
+}
+```
+
+## Limitations
+
+- Component overrides cannot reproduce arbitrary remark/rehype transforms.
+- Container overrides require careful child rendering and accessibility review.
+- Framework registration APIs are not interchangeable.
+
+## Security & Safety Notes
+
+Treat custom HTML-like tags as trusted input only. Keep safe HTML enabled and do not pass unsanitized attributes into host components.

package/bundled-skills/markstream-custom-components/references/patterns.md

@@ -0,0 +1,14 @@
+# Override Patterns
+
+| Key | Typical use |
+|---|---|
+| `image` | Lightboxes, captions, lazy loading |
+| `link` | Routing, analytics, tooltips |
+| `code_block` | Fenced code blocks |
+| `mermaid`, `d2`, `infographic` | One diagram renderer |
+| `inline_code` | Inline typography |
+| `heading`, `paragraph`, `list_item` | Containers preserving children |
+
+For Vue, Vue 2, Svelte, or Angular shared registration, allowlist the tag, register it under a scoped `customId`, and pass that scope to the renderer. Prefer renderer-local maps when sharing is unnecessary.
+
+For React, use `streamingComponents` for parser-backed tags and `htmlComponents` for sanitized HTML-style props. When a tag body contains Markdown, use a nested renderer with the same allowlist and no independent pacing.

package/bundled-skills/markstream-install/SKILL.md

@@ -2,7 +2,7 @@
 name: markstream-install
 description: "Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, Next.js, and Vue 2 applications."
 category: frontend
-risk: safe
+risk: critical
 source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-install
 source_repo: Simon-He95/markstream-vue
 source_type: official
@@ -48,6 +48,8 @@ Do not select `markstream-vue` merely because the source repository has Vue in i
 
 ### 2. Install the smallest dependency set
 
+Before installing or changing source files, preview the exact dependency and code changes and obtain explicit user approval. Do not switch package managers or replace an existing renderer implicitly.
+
 Install exactly one framework package and preserve the repository's package manager. Add optional peers only when the requested UI uses their feature.
 
 Examples:

package/bundled-skills/markstream-migration/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: markstream-migration
+description: "Audit and migrate an existing Markdown renderer to Markstream while preserving custom renderers, security policy, streaming behavior, and explicit parity gaps."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-migration
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [markdown, migration, streaming, security, frontend]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Migration
+
+## Overview
+
+Replace an existing Markdown renderer without silently dropping transforms, custom components, URL policy, raw-HTML behavior, or streaming semantics. Read [references/adoption-checklist.md](references/adoption-checklist.md) first.
+
+## When to Use
+
+Use when replacing `react-markdown`, `markdown-it`, `marked`, or another renderer; migrating node renderers; or choosing between Markstream `content`, smooth streaming, and `nodes`.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Inventory renderer imports, call sites, plugins, HTML policy, URL transforms, allowlists, custom renderers, CSS, and tests.
+2. Classify the migration as direct, renderer-custom, plugin-heavy, or security-heavy.
+3. Install the framework package and explicit CSS. Preserve visible behavior before optional features.
+4. Map built-ins to scoped overrides; in React prefer renderer-local component maps.
+5. Use trusted custom tags only for trusted content and reserve parse transforms for irreducible token/AST requirements.
+6. Keep `content` with smooth streaming for ordinary token streams. Use `nodes` only for worker parsing, shared AST ownership, or structural transforms.
+7. Preserve safe HTML and strict Mermaid defaults; scope and document any trusted legacy exception.
+8. Run relevant builds and behavior tests. Report mappings, intentional differences, and unresolved review.
+
+## Example
+
+```tsx
+// Before:
+// import ReactMarkdown from 'react-markdown'
+// return <ReactMarkdown>{markdown}</ReactMarkdown>
+
+import MarkdownRender from 'markstream-react'
+import 'markstream-react/index.css'
+
+export function AssistantAnswer({
+  markdown,
+  isDone,
+}: {
+  markdown: string
+  isDone: boolean
+}) {
+  return (
+    <MarkdownRender
+      content={markdown}
+      final={isDone}
+      fade={isDone}
+      typewriter={!isDone}
+      smoothStreaming={isDone ? false : 'auto'}
+      htmlPolicy="safe"
+    />
+  )
+}
+```
+
+## Limitations
+
+- Markstream cannot reproduce every remark, rehype, or markdown-it plugin automatically.
+- Visual parity does not prove security or URL-policy parity.
+- Large migrations may require staged conversion.
+
+## Security & Safety Notes
+
+Do not weaken sanitization for screenshot parity. Review dependencies, raw HTML, URL transforms, and trust boundaries explicitly.

package/bundled-skills/markstream-migration/references/adoption-checklist.md

@@ -0,0 +1,10 @@
+# Adoption Checklist
+
+Search for `react-markdown`, `remarkPlugins`, `rehypePlugins`, `markdown-it`, `marked`, `rehypeRaw`, `skipHtml`, allow/deny lists, `urlTransform`, custom renderers, CSS, and tests.
+
+- `direct`: plain renderer swap
+- `renderer-custom`: custom components can become overrides
+- `plugin-heavy`: transform chains need manual mapping
+- `security-heavy`: HTML and URL policy need explicit review
+
+Swap the package first, preserve CSS order, prefer scoped mappings, and adopt `nodes` only when another layer owns parsing or structural updates.

package/bundled-skills/markstream-nuxt/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: markstream-nuxt
+description: "Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and browser-only optional peers."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-nuxt
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [nuxt, vue, ssr, markdown, streaming]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Nuxt
+
+## Overview
+
+Integrate `markstream-vue` into Nuxt while keeping hydration, browser-only peers, workers, and streaming behavior on the correct side of SSR boundaries.
+
+## When to Use
+
+Use for Nuxt 3 or 4 pages, components, or plugins. Use `markstream-vue` for non-Nuxt Vue applications and `markstream-install` when the framework is not yet known.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Confirm Nuxt 3 or 4 and install only requested peers.
+2. Put browser-only peers behind `<ClientOnly>`, `.client` plugins, dynamic imports, or guarded initialization.
+3. Import `markstream-vue/index.css` explicitly from a client-safe shell or plugin.
+4. Start with `content`: `mode="chat"` for AI streams, `docs` for rich documents, and `minimal` for lightweight non-chat surfaces.
+5. Keep smooth streaming in `auto` mode for SSR; do not force `true` on first-screen server content.
+6. When a chat row completes, keep its mode stable, set `final`, disable pacing/cursor, and enable fade only if desired.
+7. Keep HTML safe and Mermaid strict. Put optional code, diagram, and worker runtimes behind client boundaries.
+8. Validate build/typecheck, hydration, and one incremental client update.
+
+## Example
+
+```vue
+<script setup lang="ts">
+import MarkdownRender from 'markstream-vue'
+import 'markstream-vue/index.css'
+
+defineProps<{ markdown: string; done: boolean }>()
+</script>
+
+<template>
+  <MarkdownRender
+    mode="chat"
+    :content="markdown"
+    :final="done"
+    :fade="done"
+    :typewriter="!done"
+    :smooth-streaming="done ? false : 'auto'"
+    html-policy="safe"
+  />
+</template>
+```
+
+## Limitations
+
+- Browser-only peers cannot run during SSR.
+- Hydration depends on correct host plugin/component boundaries.
+- This skill does not configure deployment adapters.
+
+## Security & Safety Notes
+
+Do not expose trusted HTML or loose Mermaid settings to untrusted model output. Review dependency and runtime-boundary changes.

package/bundled-skills/markstream-react/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: markstream-react
+description: "Integrate the beta markstream-react renderer into React 18+ or Next.js with correct client/server entrypoints, CSS, streaming state, and component overrides."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-react
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [react, nextjs, markdown, streaming, ssr]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream React
+
+## Overview
+
+Wire the beta React renderer into React 18+ or Next.js without crossing client/server boundaries or reaching for AST control unnecessarily.
+
+## When to Use
+
+Use for React/Next setup, root/`next`/`server` entrypoints, streaming, component overrides, or migration support. Pair with `markstream-migration` for renderer replacement.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Confirm React 18+ and acceptance of a beta package.
+2. Install only requested peers and import `markstream-react/index.css`.
+3. Use the root entry for client rendering, `/next` for Next-specific components, and `/server` for server rendering without client hooks.
+4. Start with `content` and `smoothStreaming="auto"`; use `nodes` plus `final` only when another layer owns parsing.
+5. For live chat disable fade and opt into the cursor. On completion set `final`, disable pacing/cursor, and enable fade only if desired.
+6. Keep browser-only peers inside `'use client'`, dynamic `ssr: false`, or another minimal boundary.
+7. Prefer `streamingComponents` for parser-backed tags and `htmlComponents` for sanitized props. Use scoped registry overrides for built-in nodes.
+8. Keep `htmlPolicy="safe"` and Mermaid strict; validate client, server, and incremental paths.
+
+## Example
+
+```tsx
+import MarkdownRender from 'markstream-react'
+import 'markstream-react/index.css'
+
+export function StreamingAnswer({
+  content,
+  isDone,
+}: {
+  content: string
+  isDone: boolean
+}) {
+  return (
+    <MarkdownRender
+      content={content}
+      final={isDone}
+      fade={isDone}
+      typewriter={!isDone}
+      smoothStreaming={isDone ? false : 'auto'}
+      htmlPolicy="safe"
+    />
+  )
+}
+```
+
+## Limitations
+
+- The package is beta and requires React 18+.
+- Browser-only peers require client boundaries under SSR.
+- Complex parser parity requires separate migration review.
+
+## Security & Safety Notes
+
+Review dependencies and never opt untrusted model output into trusted HTML or loose diagram rendering.

package/bundled-skills/markstream-svelte/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: markstream-svelte
+description: "Integrate the beta markstream-svelte renderer into Svelte 5 or SvelteKit with runes, explicit CSS, smooth streaming, workers, and SSR-safe boundaries."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-svelte
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [svelte, sveltekit, markdown, streaming, ssr]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Svelte
+
+## Overview
+
+Integrate Markstream using Svelte 5 runes and SvelteKit-safe browser boundaries.
+
+## When to Use
+
+Use for Svelte 5 or SvelteKit package setup, streaming state, workers, or scoped custom components. Svelte 4 is unsupported.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Confirm Svelte 5 and acceptance of a beta package.
+2. Install only requested peers; import package CSS after resets and KaTeX CSS only for math.
+3. Start with `<MarkdownRender {content} />` and smooth streaming `auto`.
+4. For live chat disable fade and opt into the cursor; on completion set `final`, disable pacing/cursor, and enable fade only if desired.
+5. Use `nodes` only for worker-owned parsing or shared AST state.
+6. Use `$props()` and callbacks. Configure KaTeX or Mermaid workers only when requested.
+7. Prefer renderer-local `customComponents`; use scoped registration only when sharing is intentional.
+8. Keep browser-only workers behind SvelteKit client boundaries; validate with `svelte-check`, build, or e2e.
+
+## Example
+
+```svelte
+<script lang="ts">
+  import MarkdownRender from 'markstream-svelte'
+  import 'markstream-svelte/index.css'
+
+  let { content, isDone }: { content: string; isDone: boolean } = $props()
+</script>
+
+<MarkdownRender
+  {content}
+  final={isDone}
+  fade={isDone}
+  typewriter={!isDone}
+  smoothStreaming={isDone ? false : 'auto'}
+  htmlPolicy="safe"
+/>
+```
+
+## Limitations
+
+- Svelte 4 is unsupported and the package is beta.
+- Workers and heavy peers require client-side bundler support.
+- This skill does not migrate unrelated Svelte architecture.
+
+## Security & Safety Notes
+
+Keep safe HTML and strict Mermaid defaults. Review dependencies and never run browser-only peers during SSR.

package/bundled-skills/markstream-vue/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: markstream-vue
+description: "Integrate markstream-vue into plain Vue 3 with renderer modes, code and DOM choices, streaming state, virtualization, optional peers, and scoped components."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-vue
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [vue, markdown, streaming, virtualization, ai-chat]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Vue 3
+
+## Overview
+
+Configure the Vue 3 renderer beyond generic installation: surface modes, streaming lifecycle, code rendering, long-message virtualization, and scoped overrides.
+
+## When to Use
+
+Use for a plain Vue 3 application after the package has been selected. Use `markstream-nuxt` when SSR-specific Nuxt boundaries matter.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Confirm Vue 3 and not Nuxt. Install only requested peers and import `markstream-vue/index.css` after resets.
+2. Start with `content`. Use `mode="chat"` for AI streams, `docs` for rich documents, and `minimal` for lightweight non-chat surfaces.
+3. Choose fenced-code rendering explicitly: `pre` without a peer, `shiki` with `stream-markdown`, or compatibility-named `monaco` backed by `stream-diffs`.
+4. For live chat use smooth streaming `auto`, no fade, and an optional cursor. On completion keep the same mode, set `final`, and disable pacing/cursor.
+5. Use `nodes` only for worker parsing or structural AST ownership.
+6. For long transcripts, keep an existing outer message virtualizer in charge. Use Markstream logical height rather than mounted DOM height.
+7. Use scoped component registration and preserve safe HTML and Mermaid strict mode.
+8. Validate the smallest build/typecheck plus one incremental stream and one long-message case.
+
+## Example
+
+```vue
+<script setup lang="ts">
+import MarkdownRender from 'markstream-vue'
+import 'markstream-vue/index.css'
+
+defineProps<{ content: string; isDone: boolean }>()
+</script>
+
+<template>
+  <MarkdownRender
+    mode="chat"
+    :content="content"
+    :final="isDone"
+    :fade="isDone"
+    :typewriter="!isDone"
+    :smooth-streaming="isDone ? false : 'auto'"
+    html-policy="safe"
+  />
+</template>
+```
+
+## Limitations
+
+- Optional peers add bundle and browser-runtime cost.
+- DOM-minimal mode disables wrapper-dependent features.
+- Virtualization integration requires stable content and measurement keys.
+
+## Security & Safety Notes
+
+Review dependency changes. Never enable trusted HTML or loose Mermaid rendering for untrusted model output.

package/bundled-skills/markstream-vue2/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: markstream-vue2
+description: "Integrate markstream-vue2 into Vue 2.6 or 2.7 with correct Composition API decisions, CSS, streaming state, optional peers, and scoped overrides."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-vue2
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [vue2, markdown, streaming, compatibility, frontend]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Vue 2
+
+## Overview
+
+Handle Vue 2.6/2.7 compatibility decisions that the generic installer cannot resolve safely.
+
+## When to Use
+
+Use for Vue 2 integration when no bundler-specific edge case dominates. Use `markstream-vue2-cli` for Vue CLI/Webpack 4 and `markstream-vue2-vite` for Vite worker imports.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Confirm Vue 2.6 or 2.7 and install `markstream-vue2`.
+2. Add `@vue/composition-api` only for Vue 2.6 code that uses Composition API patterns; Vue 2.7 has built-in support.
+3. Import `markstream-vue2/index.css` after resets.
+4. Start with `<MarkdownRender :content="markdown" />` and smooth streaming `auto`.
+5. For live chat disable fade and opt into the cursor; on completion set `final`, disable pacing/cursor, and enable fade only if desired.
+6. Use `nodes` only when another layer owns parsing. Use scoped mappings for overrides.
+7. Keep HTML safe and Mermaid strict; validate with the smallest build or dev command.
+
+## Example
+
+```vue
+<script>
+import MarkdownRender from 'markstream-vue2'
+import 'markstream-vue2/index.css'
+
+export default {
+  components: { MarkdownRender },
+  props: { content: String, done: Boolean },
+}
+</script>
+
+<template>
+  <MarkdownRender
+    :content="content"
+    :final="done"
+    :fade="done"
+    :typewriter="!done"
+  />
+</template>
+```
+
+## Limitations
+
+- Vue 2.6 and 2.7 have different Composition API requirements.
+- Legacy bundlers require the dedicated specializations.
+- Optional modern peers may not support every Vue 2 toolchain.
+
+## Security & Safety Notes
+
+Review dependency and compatibility changes. Do not relax rendering safety for untrusted content.

package/bundled-skills/markstream-vue2-cli/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: markstream-vue2-cli
+description: "Integrate markstream-vue2 into Vue CLI or Webpack 4 with export-map-safe CSS, CDN worker fallbacks, and conservative code-block defaults."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-vue2-cli
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [vue2, vue-cli, webpack4, markdown, workers]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Vue 2 CLI
+
+## Overview
+
+Handle Vue CLI and Webpack 4 constraints that differ materially from modern Vue 2/Vite setup.
+
+## When to Use
+
+Use when Vue 2 runs on Vue CLI or Webpack 4 and package export maps or Vite worker imports are unavailable.
+
+## Workflow
+
+Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
+
+1. Confirm Vue 2 plus Vue CLI/Webpack 4.
+2. Install `markstream-vue2` and only requested peers.
+3. Import `markstream-vue2/dist/index.css`, because legacy tooling may not understand the CSS export map.
+4. Avoid `?worker` imports. Use Markstream CDN worker helpers for KaTeX or Mermaid only when needed.
+5. Prefer `stream-markdown` code blocks over fragile Monaco worker wiring.
+6. Keep `content` with smooth streaming for chat; set `final` and disable pacing/cursor for completed history.
+7. Keep HTML safe and Mermaid strict; validate the actual legacy build.
+
+## Example
+
+```vue
+<script>
+import MarkdownRender from 'markstream-vue2'
+// Legacy Webpack may not resolve the package CSS export map.
+import 'markstream-vue2/dist/index.css'
+
+export default {
+  components: { MarkdownRender },
+  data: () => ({ content: '# Answer', done: false }),
+}
+</script>
+
+<template>
+  <MarkdownRender
+    :content="content"
+    :final="done"
+    :fade="false"
+  />
+</template>
+```
+
+## Limitations
+
+- CDN workers require network access and compatible content-security policy.
+- Monaco-style worker setups are intentionally not covered.
+- Vue 2.6 may also require `@vue/composition-api`.
+
+## Security & Safety Notes
+
+Do not introduce CDN workers without reviewing CSP, network policy, and dependency trust. Preserve safe rendering defaults.