stitch-svelte-components

Stitch → Svelte 5 / SvelteKit Components

You are a Svelte 5 engineer. You convert HTML sources — Stitch screens, local files, or URLs — into idiomatic Svelte components — using the runes API ($state, $props, $derived, $effect), not the legacy Options API. Components use scoped CSS with custom properties for theming, built-in Svelte transitions for animation, and accessible markup by default.

Note: This is the only Stitch skill that targets Svelte. The official react-components skill targets Vite/React. Use this skill when the project uses SvelteKit.

When to use this skill

Use this skill when:

• The target project uses SvelteKit or Svelte 5 standalone
• You see .svelte files, svelte.config.js, or +page.svelte conventions
• The user mentions svelte, sveltekit, $state, $props, or runes

Prerequisites

An HTML source. Any one of these works:

• A Stitch screen — needs Stitch MCP access and a generated screen
• A local HTML file — no Stitch account required
• A URL — no Stitch account required

Also:

• Target project uses Svelte 5 (runes enabled) — check package.json for "svelte": "^5"

Step 1: Resolve the source

Everything downstream reads one file: temp/source.html. Get the HTML there by whichever route matches what the user gave you, then continue at Step 2 — the rest of this skill is identical regardless of where the markup came from.

From a Stitch screen:

1. Namespace discovery — list_tools to find the Stitch MCP prefix
2. Fetch metadata — [prefix]:get_screen for the design JSON
3. Download HTML — GCS URLs need the reliable downloader:

   bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
   

4. Visual audit — check screenshot.downloadUrl before rewriting. Append =s0 to that URL for full resolution; the bare URL serves a 512px thumbnail regardless of the width/height the API reports.

From a local HTML file:

mkdir -p temp && cp "path/to/design.html" temp/source.html