🎨 Markstream Svelte
Integrate markstream-svelte in Svelte 5 apps. Svelte 4 unsupported.
About Markstream Svelte
Built for frontend development workflows, Markstream Svelte helps AI coding agents integrate markstream-svelte in svelte 5 apps. svelte 4 unsupported.
The 189-word prompt provides structured frontend development guidance — covering detailed methodology and consistent output formats. Paste it into your CLAUDE.md or .cursorrules to activate.
Key Capabilities
- Confirm Svelte 5; ask Svelte 4 users to upgrade.
- Add package and only requested peers.
- Import CSS after resets; KaTeX CSS for math.
- Default to `
`. - For streaming AI chat, keep `content` and use built-in smooth streaming first.
Use Cases
- Building responsive UI components and layouts
- Implementing accessible, WCAG-compliant interfaces
- Debugging CSS, animations, and cross-browser issues
- Integrating design systems and component libraries
Example Prompts
System Prompt (189 words)
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.
- Default to
<MarkdownRender {content} />.
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}. Smooth pacing handles gradual appearance; fade would flicker.
- 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: scoped
setCustomComponents,customId,customHtmlTags. - Verify with
svelte-check, build, or e2e.
Frequently Asked Questions
What is Markstream Svelte?
Markstream Svelte is a free frontend development skill for AI coding agents. Integrate markstream-svelte in Svelte 5 apps. Svelte 4 unsupported.. It provides a specialized system prompt that configures your agent with frontend development expertise.
How do I use Markstream Svelte with Claude Code?
Copy the system prompt below and paste it into your CLAUDE.md file or Claude Code's custom instructions to activate Markstream Svelte.
Which AI coding agents work with Markstream Svelte?
Markstream Svelte is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Markstream Svelte free to use?
Yes, Markstream Svelte is completely free and open source. The full source is available on GitHub at https://github.com/Simon-He95/markstream-vue/blob/main/.agents/skills/markstream-svelte/SKILL.md. You only need a subscription to the AI agent you use it with.
