Markstream svelte

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills/skills/markstream-svelte

Integrate the beta markstream-svelte renderer into Svelte 5 or SvelteKit with runes, explicit CSS, smooth streaming, workers, and SSR-safe boundaries.From its SKILL.md

Install

npx -y skills add sickn33/agentic-awesome-skills --skill markstream-svelte

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.4 KB, 429 tokens by cl100k_base, as published. Nobody here has run it

Markstream Svelte

Overview

Integrate Markstream using Svelte 5 runes and SvelteKit-safe browser boundaries.

When to Use

Use for Svelte 5 or SvelteKit package setup, streaming state, workers, or scoped custom components. Svelte 4 is unsupported.

Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

Confirm Svelte 5 and acceptance of a beta package.
Install only requested peers; import package CSS after resets and KaTeX CSS only for math.
Start with <MarkdownRender {content} /> and smooth streaming auto.
For live chat disable fade and opt into the cursor; on completion set final, disable pacing/cursor, and enable fade only if desired.
Use nodes only for worker-owned parsing or shared AST state.
Use $props() and callbacks. Configure KaTeX or Mermaid workers only when requested.
Prefer renderer-local customComponents; use scoped registration only when sharing is intentional.
Keep browser-only workers behind SvelteKit client boundaries; validate with svelte-check, build, or e2e.

Example

<script lang="ts">
  import MarkdownRender from 'markstream-svelte'
  import 'markstream-svelte/index.css'

  let { content, isDone }: { content: string; isDone: boolean } = $props()
</script>

<MarkdownRender
  {content}
  final={isDone}
  fade={isDone}
  typewriter={!isDone}
  smoothStreaming={isDone ? false : 'auto'}
  htmlPolicy="safe"
/>

Limitations

Svelte 4 is unsupported and the package is beta.
Workers and heavy peers require client-side bundler support.
This skill does not migrate unrelated Svelte architecture.

Security & Safety Notes

Keep safe HTML and strict Mermaid defaults. Review dependencies and never run browser-only peers during SSR.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.