opencode-skills-collection 4.0.7 → 4.0.9

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.

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

@@ -0,0 +1,69 @@
+---
+name: markstream-vue2-vite
+description: "Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults."
+category: frontend
+risk: critical
+source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-vue2-vite
+source_repo: Simon-He95/markstream-vue
+source_type: official
+date_added: "2026-07-21"
+author: Simon-He95
+tags: [vue2, vite, markdown, workers, streaming]
+tools: [claude, cursor, gemini, codex]
+license: MIT
+license_source: https://github.com/Simon-He95/markstream-vue/blob/main/license
+---
+
+# Markstream Vue 2 Vite
+
+## Overview
+
+Use Vite-native worker bundling while preserving Vue 2 compatibility and rendering safety.
+
+## When to Use
+
+Use when the host is Vue 2 with Vite and needs bundled Mermaid or KaTeX workers. Use the generic Vue 2 skill when worker/bundler behavior is irrelevant.
+
+## 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 with Vite and install only requested peers.
+2. Import `markstream-vue2/index.css` after reset, Tailwind, or UnoCSS layers.
+3. Use package worker entrypoints with Vite `?worker` or `?worker&inline` imports only when needed.
+4. Add `@vue/composition-api` only for Vue 2.6 code requiring it.
+5. Keep `content` with smooth streaming for chat; set `final` and disable pacing/cursor for history.
+6. Use `nodes` only for externally owned parsing. Keep HTML safe and Mermaid strict.
+7. Validate the Vite build and worker loading path.
+
+## 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"
+  />
+</template>
+```
+
+## Limitations
+
+- Vite worker syntax is not portable to Vue CLI/Webpack 4.
+- Inline workers can increase bundle size.
+- Optional peers may impose additional browser requirements.
+
+## Security & Safety Notes
+
+Review worker source, CSP, dependency changes, and bundle impact. Do not relax safe rendering defaults.