Markstream Svelte

SkillDev tools

Lets your agent add a streaming markdown renderer to Svelte 5 or SvelteKit apps.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Markstream Svelte skill

About this capability

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 content and use built-in smooth streaming first.
      • smoothStreaming="auto" is the default and activates when typewriter={true} or maxLiveNodes <= 0.
      • typewriter only controls the blinking cursor and defaults to false.
      • fade controls node enter and streamed-text fade animations and defaults to true.
    • 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 + final for 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 customComponents prop for one surface; use scoped setCustomComponents, customId, and customHtmlTags when 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.md
  • docs/frameworks/svelte.md

Signals

GitHub stars
3k
Forks
182
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
markstream-svelte
Source
github.com/simon-he95/markstream-vue