Markstream Svelte
SkillDev toolsLets your agent add streaming Markdown rendering to Svelte 5 or SvelteKit apps using the markstream-svelte package.
Then ask your AI: use the Markstream Svelte skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.
No other account needed.
Add it as a step in a pipeline you build on Ahel, or connect Ahel to Claude, ChatGPT, Cursor, Claude Code or Codex and ask your AI to use it.
About this skill
Integrate the beta markstream-svelte package in Svelte 5 or SvelteKit apps. Use when Codex needs Svelte 5 runes, CSS and optional peers, smooth streaming, worker setup, renderer-local or scoped custom components, or SSR-safe boundaries. Svelte 4 is unsupported.
What this skill tells your AI
The instructions your AI receives, as published by simon-he95/markstream-vue in .agents/skills/markstream-svelte/SKILL.md and read by Ahel’s review.
- 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
<MarkdownRender {content} />.- 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}.
- Streaming:
- Use
nodes+finalfor worker-preparsed content, shared AST stores, or custom AST control.
- For streaming AI chat, keep
- 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
Signals
- GitHub stars
- 3k
- Forks
- 188
- Last commit
- Oct 2026
Advanced
- Item type
- skill
- Key
markstream-svelte-simon-he95- Source
- github.com/simon-he95/markstream-vue
github.com/simon-he95/markstream-vue
Related picks
Skill · liyang8246
The pick for Sveltedevtools-svelte
Skill · vercel-labs
The pick for Sveltesw-vue-part
Skill · onweekendd
The pick for Vuevue-page-composition
Skill · esposter
The pick for Vuee2e-testing
Skill · thedaviddias
The pick for End-to-end testinge2e-environment-preflight
Skill · sno-ai
The pick for End-to-end testing