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: