svelte-awesome

Svelte 5 — Full Skill Navigation Entry

This skill is theorchestration entryof the Svelte 5 skill, providing a framework overview, learning path guidance, and sub-skill collaboration guide.

About Svelte 5

Svelte 5 is a new-generation UI framework, with core features:

No virtual DOM — the compiler directly generates precise DOM operation code, with zero runtime overhead
Runes reactivity — $state/$derived/$effect and other explicit runes replace implicit reactivity
Native TypeScript — no additional configuration required
SvelteKit — the official application framework, supporting SSR, static sites, and API routes

Skill Architecture Diagram

svelte-awesome（入口 · 本技能）
├── Svelte 核心 5.x ──────────
│   ├── svelte-runes           ← Runes 响应式系统
│   ├── svelte-template-syntax ← 模板语法
│   ├── svelte-styling         ← 样式与 CSS
│   ├── svelte-special-elements← 特殊元素
│   ├── svelte-runtime         ← 运行时 API（Stores / Context / mount）
│   ├── svelte-lifecycle       ← 生命周期 / $effect / 副作用
│   ├── svelte-misc            ← TypeScript / 自定义元素 / 迁移 / FAQ
│   ├── svelte-reference       ← API 参考
│   └── svelte-legacy-apis     ← Svelte 4 兼容
├── SvelteKit 配套 ───────────
│   ├── sveltekit-overview     ← SvelteKit 全貌 / 路由 / 加载
│   ├── sveltekit-data         ← 数据加载 / form / actions
│   ├── sveltekit-config       ← 配置 / adapter / 钩子
│   └── sveltekit-advanced     ← 高级（hooks / service worker / hooks 进阶）
└── 工具链 ───────────────────
    ├── svelte-cli             ← sv / create-svelte / npx sv
    └── svelte-ai              ← Svelte AI 助手 / MCP / 编辑器集成

Sub-skill Quick Reference Table

Skill	When to load	Core content
svelte-runes	When using `$state`/`$derived`/`$effect`/`$props` ,	Reactivity system, state passing, side effects
svelte-template-syntax	When writing component templates	if/each/await/snippet/event binding
svelte-styling	When handling CSS styles	Scoped styles, :global, CSS variables
svelte-special-elements	When using `svelte:boundary`/`window`/`element` ,	Special elements, compiler options
svelte-runtime	When dealing with cross-component state, lifecycle, and testing	Stores、Context、mount/render、Vitest
svelte-misc	When dealing with TypeScript, migration, and browser compatibility	TS annotations, custom elements, Svelte 4→5 migration, FAQ
svelte-reference	When looking up specific API signatures	store/action/transition/easing, error codes
svelte-lifecycle	When handling component mounting/unmounting/side effects	`$effect` / `$effect.pre` / `onMount` / `onDestroy` / `$inspect`
svelte-legacy-apis	When maintaining Svelte 4 code	`$:`、`export let`、Slots、EventDispatcher

SvelteKit companion skills

When the goal isapplication/routing/SSR/data loading, start with the SvelteKit skill:

Skill	When to load	Core content
sveltekit-overview	Creating projects, project types, web standards, Routing	Project structure,`+page.svelte` / `+page.server.js` / `+layout`, route groups, error boundaries, SSR/SSG/SPA/MPA
sveltekit-data	Data loading, forms, page options	`+page.js` / `+page.server.js` 's `load`、form actions、`use:enhance`、prerender/ssr/csr
sveltekit-advanced	State management, Remote functions, Hooks, Errors, Service workers, $app/*	SSR-safe stores,`query`/`command`、`handle`/`sequence`、`+error.svelte`、`$app/forms`/`navigation`/`state`、`$lib`
sveltekit-config	Build, Adapters, Auth, Performance, Images, Migration	`adapter-auto`/`node`/`static`/`cloudflare`/`netlify`/`vercel`、`@sveltejs/enhanced-img`, SvelteKit v1/Sapper migration

Path 4: From Svelte components to SvelteKit applications

svelte-awesome
   ↓
sveltekit-overview（项目骨架）
   ↓
sveltekit-data（数据流）
   ↓
sveltekit-config（adapter / env）
   ↓
sveltekit-advanced（按需）

Tool integration

Skill	When to load	Core content
svelte-cli	sv commands (project creation, adding integrations, migration scripts, type checking)	`sv create` / `sv add`(drizzle/tailwind/prettier/eslint/playwright/storybook/vitest/mdsvex/paraglide/better-auth/mcp, etc.),`sv check`、`sv migrate svelte-5`/`sveltekit-2`/...
svelte-ai	MCP server, AI integration	Svelte MCP server (svelte-autofixer / list-sections / get-documentation), Claude Code / Cursor / Copilot / Codex / OpenCode / VS Code configuration,`svelte-task` prompts,`sv` the svelte-ai subcommand of the CLI,`svelte-code-writer` Child agents

Advanced topics

Skills	When to load	Core content
svelte-lifecycle	Lifecycle / Stores / Context / Testing	`onMount` / `onDestroy` / `tick` Hooks,`writable` / `readable` / `derived` stores、`createContext` / `setContext` / `getContext`、Vitest / Storybook / Playwright

and svelte-runtime(Stores / Context / mount) complementary:lifecycle aggregates lifecycle + Stores + Context + Testing,runtime focuses on the details of the runtime API (mount / render).

Learning paths

Path 1: Svelte beginner

svelte-awesome → svelte-runes → svelte-template-syntax → svelte-styling → svelte-runtime

Path 2: Migrating from Vue/React

svelte-awesome → svelte-runes → svelte-template-syntax → svelte-misc（迁移章节）

Path 3: Migrating from Svelte 4

svelte-awesome → svelte-misc（Svelte 4 Migration）→ svelte-legacy-apis（对照参考）

Path 4: Building a SvelteKit app

svelte-awesome
  → svelte-cli（创建项目）
  → svelte-runes（响应式基础）
  → svelte-template-syntax
  → sveltekit-overview（项目骨架）
  → sveltekit-data（数据流 / form actions）
  → sveltekit-config（adapter / env）
  → svelte-lifecycle（副作用与数据同步）

Typical tasks and skill matching

Task	Recommended skills
Write a counter component	`svelte-runes`
Render lists, conditional branches	`svelte-template-syntax`
Reuse markup blocks with snippet	`svelte-template-syntax`(snippet chapter)
Component style isolation, CSS variable passing	`svelte-styling`
Error boundaries, async pending UI	`svelte-special-elements`
Share state across components	`svelte-runtime`(Context/Stores chapter)
Unit testing, Vitest configuration	`svelte-runtime`(Testing chapter)
TypeScript type annotations	`svelte-misc`(TypeScript chapter)
Migrating a Svelte 4 project to Svelte 5	`svelte-misc`
Compile a component into a Web Component	`svelte-misc`(Custom Elements chapter)
Control side effect timing (before/after DOM updates, cleanup)	`svelte-lifecycle`
Debug reactivity not updating	`svelte-lifecycle`（`$inspect` / `$effect.tracking`）
Initialize a SvelteKit project	`svelte-cli`
Add adapter/tailwind/drizzle to SvelteKit	`svelte-cli`
Configure Svelte context for an AI editor (Cursor/Windsurf)	`svelte-ai`
SvelteKit routing / `+page.svelte` / `+layout.svelte`	`sveltekit-overview`
SvelteKit `load` functions / form actions	`sveltekit-data`
Configure SvelteKit adapter / aliases / env	`sveltekit-config`
SvelteKit `handle` hooks / service worker	`sveltekit-advanced`
Consult `transition:fade` API	`svelte-reference`
Understand `bind:value` two-way binding	`svelte-template-syntax`(bind chapter)
`bind:this` get a component instance	`svelte-runtime`(mount chapter)
Maintain legacy Svelte 4 code	`svelte-legacy-apis`

Svelte 5 core concepts quick reference

Runes reactivity

let count = $state(0);           // 响应式状态
let doubled = $derived(count * 2); // 派生值
$effect(() => { document.title = count; }); // 副作用
let { name } = $props();         // 属性
let { value = $bindable() } = $props(); // 可绑定属性

Template

{#if count > 0}
  <p>counting...</p>
{/if}

{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}

{#snippet card(item)}
  <div>{item.title}</div>
{/snippet}
{@render card(item)}

Events

<!-- Svelte 5: onclick 不是 on:click -->
<button onclick={() => count++}>+</button>

Official resources

Resources	Links
Svelte documentation	https://svelte.dev/docs/svelte
Official tutorial	https://svelte.dev/tutorial
Playground	https://svelte.dev/playground
SvelteKit	https://kit.svelte.dev
GitHub	https://github.com/sveltejs/svelte
Discord	https://svelte.dev/chat

Cross-References

Collaboration guidance with other skills:

Side effects / lifecycle / $effect cleanup → svelte-lifecycle
SvelteKit routing / data / configuration → sveltekit-overview → sveltekit-data / sveltekit-config / sveltekit-advanced
Project scaffolding (npx sv create) → svelte-cli
AI editor / LLM-assisted development (Cursor / Windsurf / Zed, etc.) → svelte-ai

Gotchas

Svelte 5 enters Runes Mode — a component enters Runes Mode if it uses any Rune ($state etc.), and legacy syntax is no longer available
No virtual DOM — Svelte generates precise DOM operations at compile time, with no diffing or patching
$state is a deep proxy — destructuring loses reactivity; for large arrays use $state.raw to avoid proxy overhead
$effect is exclusively for side effects — do not use it for derived computations; that is the job of $derived ; for side-effect cleanup and debugging, see svelte-lifecycle
Snippet replaces Slot — new code uses {#snippet} + {@render}, no longer using <slot>
SvelteKit ≠ Svelte — componentization/static sites only → use Svelte; if you need routing/SSR/form server-side handling → go to sveltekit-overview

FAQ

Q: Can Svelte 5 and Svelte 4 coexist? A: Yes. Svelte 5 still supports Legacy Mode (Svelte 4 syntax), allowing gradual migration.

Q: What is the core difference between Svelte and React/Vue? A: Svelte has no virtual DOM and generates precise DOM operation code at compile time, with zero framework overhead at runtime. Reactivity is based on dependency tracking inferred by the compiler, with no need to declare dependencies.

Q: Do I need to learn Svelte 4 first? A: No. You can directly learn the Svelte 5 Runes system; Legacy knowledge of Svelte 4 only helps when maintaining old projects.

Q: What scenarios is Svelte suitable for? A: It is suitable for all Web UI scenarios: from simple components to complex applications. With SvelteKit, it supports SSR, static sites, API routes, etc.

Examples

Offline executable examples, for use with this skill:

getting-started.md — project creation, first component, SvelteKit routing, API routes, environment variables
component-patterns.md — complete examples of Props, Snippet, events, bindings, reactivity, and cross-component state
sveltekit-bootstrap.md — use npx sv create to create a SvelteKit project through the first route
lifecycle-patterns.md — $effect cleanup,onMount、onDestroy、$inspect

sub-skill examples

(each of the following skills is installed via npx skills add full-stack-skills/svelte-skills --skill <name> installation)

routing / data loading / +page.svelte / +layout.svelte → hand off to sveltekit-overview skill
load functions / form actions / use:enhance → hand off to sveltekit-data skill
adapter / env / $lib / hooks / service worker → hand off to sveltekit-advanced skill
svelte.config.js / build / deploy / enhanced-img → hand off to sveltekit-config skill
sv create / sv add / sv migrate / sv check → hand off to svelte-cli skill
Svelte MCP server / Cursor rules → hand off to svelte-ai skill
lifecycle / Stores / Context / Vitest / Storybook → hand off to svelte-lifecycle skill

References

In-depth reference docs:

runes-overview.md — Runes principles, proxy behavior, dependency tracking rules, module-level $state
template-syntax.md — template syntax quick reference, complete usage of {#each}/{#await}/{#snippet}, bind: directive comparison
styling.md — Scoped Styles/:global/Custom Properties/Tailwind integration
migration.md — Svelte 4→5 migration comparison, automatic migration scripts, Legacy Mode
skill-map.md — overview and loading timing of all 16 svelte-* / sveltekit-* skills
routing-data.md — SvelteKit routing + data loading quick reference

sub-skill reference