What problem does it solve?
Setting up a streaming Markdown renderer for AI chat output in Svelte 5 or SvelteKit involves tricky decisions around CSS ordering, optional peer dependencies, web workers for KaTeX and Mermaid, custom component scoping, and SSR safety. This Skill guides an AI agent through a correct integration of the beta markstream-svelte package.
Core Features & Use Cases
- Streaming configuration: Sets up smooth streaming, typewriter cursor, and fade animations, including dynamic switching between live streaming and recovered history states.
- Worker and peer setup: Configures KaTeX and Mermaid web workers and installs only the optional peers the app actually needs.
- Custom components: Chooses between renderer-local
customComponents props and scoped setCustomComponents registration with customId and customHtmlTags.
- Use Case: A developer building a SvelteKit AI chat app asks the agent to render LLM token streams with math and diagrams; the Skill installs markstream-svelte, wires the workers, and configures streaming props with SSR-safe client boundaries.
Quick Start
Use the markstream-svelte skill to integrate the beta markstream-svelte package into this Svelte 5 app with CSS, workers, and streaming configured.
