Skip to content
Skillv1.0.0

markstream-svelte

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

by sickn33(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from sickn33/agentic-awesome-skills (skills/markstream-svelte/SKILL.md). Install upstream with npx skills add sickn33/agentic-awesome-skills --skill markstream-svelte. Copyright stays with the author (MIT).

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.

  1. Confirm Svelte 5 and acceptance of a beta package.
  2. Install only requested peers; import package CSS after resets and KaTeX CSS only for math.
  3. Start with <MarkdownRender {content} /> and smooth streaming auto.
  4. For live chat disable fade and opt into the cursor; on completion set final, disable pacing/cursor, and enable fade only if desired.
  5. Use nodes only for worker-owned parsing or shared AST state.
  6. Use $props() and callbacks. Configure KaTeX or Mermaid workers only when requested.
  7. Prefer renderer-local customComponents; use scoped registration only when sharing is intentional.
  8. 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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/sickn33-agentic-awesome-skills-markstream-svelte/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

sickn33-agentic-awesome-skills-markstream-svelte.ocm.jsonjson
{
  "ocm": "1",
  "id": "sickn33-agentic-awesome-skills-markstream-svelte",
  "kind": "skill",
  "name": "markstream-svelte",
  "description": "Integrate the beta markstream-svelte renderer into Svelte 5 or SvelteKit with runes, explicit CSS, smooth streaming, workers, and SSR-safe boundaries.",
  "publisher": "sickn33",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "svelte",
      "sveltekit",
      "markdown",
      "streaming",
      "ssr",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Integrate the beta markstream-svelte renderer into Svelte 5 or SvelteKit with runes, explicit CSS, smooth streaming, workers, and SSR-safe boundaries."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/sickn33/agentic-awesome-skills",
      "path": "skills/markstream-svelte/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/markstream-svelte/SKILL.md",
      "key": "sickn33/agentic-awesome-skills/skills/markstream-svelte/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Markstream Svelte\n\n## Overview\n\nIntegrate Markstream using Svelte 5 runes and SvelteKit-safe browser boundaries.\n\n## When to Use\n\nUse for Svelte 5 or SvelteKit package setup, streaming state, workers, or scoped custom components. Svelte 4 is unsupported.\n\n## Workflow\n\nBefore changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.\n\n1. Confirm Svelte 5 and acceptance of a beta package.\n2. Install only requested peers; import package CSS after resets and KaTeX CSS only for math.\n3. Start ",
  "cost": {
    "context_tokens": 468
  }
}

Fetch it by URL: GET /api/v1/registry/sickn33-agentic-awesome-skills-markstream-svelte/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.