3k Simon-He95
markstream-svelte Skill
在 Svelte 5 或 SvelteKit 应用中集成 beta 版 markstream-svelte 包。当 Codex 需要 Svelte 5 runes、CSS 和可选依赖、流畅的流式渲染、worker 配置、渲染器本地或作用域自定义组件,或 SSR 安全边界时使用。不支持 Svelte 4。
安装方式:把技能目录放入 ~/.claude/skills/(Claude Code)或在 claude.ai 设置中启用;也可复制右侧安装命令一键添加。
技能指令原文(SKILL.md)
Markstream Svelte
- Confirm Svelte 5; ask Svelte 4 users to upgrade.
- Add package and only requested peers.
- Import CSS after resets; KaTeX CSS for math.
- Treat the package as beta and confirm the app accepts that API maturity.
- Default to
. - For streaming AI chat, keep
contentand use built-in smooth streaming first. smoothStreaming="auto"is the default and activates whentypewriter={true}ormaxLiveNodes <= 0.typewriteronly controls the blinking cursor and defaults tofalse.fadecontrols node enter and streamed-text fade animations and defaults totrue.- Streaming vs recovering history: in chat UIs the same renderer starts streaming and later switches to history when
final={true}. - Streaming:
smoothStreaming="auto",fade={false},typewriter={true}. This is a conservative visual/performance choice, not an API incompatibility. This adapter has not adopted Vue 3's bounded append fades, so verify its animation behavior before enabling both. - Recovering history:
smoothStreaming={false},fade={true},typewriter={false}. Content is already complete — pacing would slow it down, but fade gives a polished entry animation. - Dynamic switch:
smoothStreaming={isStreaming ? 'auto' : false},fade={!isStreaming}. - Use
nodes+finalfor worker-preparsed content, shared AST stores, or custom AST control. - Use
$props()and callbacks. - Workers:
setKaTeXWorker,setMermaidWorker,workers/*?worker. - Custom UI: prefer the renderer-local
customComponentsprop for one surface; use scopedsetCustomComponents,customId, andcustomHtmlTagswhen shared registration is intentional. - Keep browser-only workers and heavy peers behind SvelteKit client boundaries.
- Verify with
svelte-check, build, or e2e.
Useful Doc Targets
docs/guide/svelte.mddocs/frameworks/svelte.md