Svelte Awesome

Svelte 5 — 全技能导航入口

本技能是 Svelte 5 技能的编排入口，提供框架全貌、学习路径指引和子技能协同指南。

关于 Svelte 5

Svelte 5 是新一代 UI 框架，核心特性：

• 无虚拟 DOM — 编译器直接生成精确的 DOM 操作代码，运行时零开销
• Runes 响应式 — $state/$derived/$effect 等显式符文替代隐式响应式
• 原生 TypeScript — 无需额外配置
• SvelteKit — 官方应用框架，支持 SSR、静态站点、API 路由

技能架构图

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 / 编辑器集成

子技能速查表

SvelteKit 配套技能

当目标是应用/路由/SSR/数据加载时，从 SvelteKit 技能开始：

路径四：从 Svelte 组件到 SvelteKit 应用

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

工具集成

进阶主题

与 svelte-runtime（Stores / Context / mount）互补：lifecycle 把生命周期 + Stores + Context + 测试聚合在一起，runtime 偏向 runtime API（mount / render）的细节。

学习路径

路径一：Svelte 新手

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

路径二：从 Vue/React 迁移

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

路径三：从 Svelte 4 迁移

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

路径四：构建 SvelteKit 应用

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

典型任务与技能匹配

Svelte 5 核心概念速记

Runes 响应式

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

模板

{#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)}

事件

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

官方资源

Cross-References

其它技能的协作指引：

• 副作用 / 生命周期 / $effect 清理 → svelte-lifecycle
• SvelteKit 路由 / 数据 / 配置 → sveltekit-overview → sveltekit-data / sveltekit-config / sveltekit-advanced
• 项目脚手架 (npx sv create) → svelte-cli
• AI 编辑器 / LLM 辅助开发（Cursor / Windsurf / Zed 等）→ svelte-ai

Gotchas

1. Svelte 5 进入 Runes Mode — 组件中使用了任意一个 Rune（$state 等）即进入 Runes Mode，Legacy 语法不再可用
2. 无虚拟 DOM — Svelte 编译时生成精确 DOM 操作，不存在 diffing 和 patch
3. $state 是深层代理 — 解构会丢失响应式；大数组用 $state.raw 避免代理开销
4. $effect 是副作用专用 — 不要用它做派生计算，那是 $derived 的职责；副作用清理与调试见 svelte-lifecycle
5. Snippet 取代 Slot — 新代码用 {#snippet} + {@render}，不再使用 <slot>
6. SvelteKit ≠ Svelte — 仅做组件化/静态站点 → 用 Svelte；要做路由/SSR/表单服务端处理 → 进入 sveltekit-overview

FAQ

Q: Svelte 5 和 Svelte 4 可以共存吗？ A: 可以。Svelte 5 仍支持 Legacy Mode（Svelte 4 语法），可渐进迁移。

Q: Svelte 和 React/Vue 的核心区别？ A: Svelte 无虚拟 DOM，编译时生成精确 DOM 操作代码，运行时零框架开销。响应式基于编译器推导的依赖追踪，无需声明依赖。

Q: 需要先学 Svelte 4 吗？ A: 不需要。直接学 Svelte 5 Runes 系统即可，Svelte 4 的 Legacy 知识仅在维护旧项目时有帮助。

Q: Svelte 适合什么场景？ A: 适合所有 Web UI 场景：从简单组件到复杂应用。配合 SvelteKit 支持 SSR、静态站点、API 路由等。

Examples

离线可执行示例，配合本技能使用：

• getting-started.md — 项目创建、首个组件、SvelteKit 路由、API 路由、环境变量
• component-patterns.md — Props、Snippet、事件、绑定、响应式、跨组件状态完整示例
• sveltekit-bootstrap.md — 用 npx sv create 创建 SvelteKit 项目到首个路由
• lifecycle-patterns.md — $effect 清理、onMount、onDestroy、$inspect

子技能示例

(以下每个 skill 通过 npx skills add full-stack-skills/svelte-skills --skill <name> 安装)

• 路由 / 数据加载 / +page.svelte / +layout.svelte → hand off to sveltekit-overview skill
• load 函数 / 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 / 构建 / 部署 / 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
• 生命周期 / Stores / Context / Vitest / Storybook → hand off to svelte-lifecycle skill

References

深入参考文档：

• runes-overview.md — Runes 原理、代理行为、依赖追踪规则、模块级 $state
• template-syntax.md — 模板语法速查、{#each}/{#await}/{#snippet} 完整用法、bind: 指令对照
• styling.md — Scoped Styles/:global/Custom Properties/Tailwind 集成
• migration.md — Svelte 4→5 迁移对照、自动迁移脚本、Legacy Mode
• skill-map.md — 全部 16 个 svelte-* / sveltekit-* 技能的全景图与加载时机
• routing-data.md — SvelteKit 路由 + 数据加载速查

子技能参考

(以下每个 skill 通过 npx skills add full-stack-skills/svelte-skills --skill <name> 安装)

• SvelteKit 项目结构 / 路由约定 / Web 标准 → hand off to sveltekit-overview skill
• 数据加载 / form actions / 页面选项 / use:enhance → hand off to sveltekit-data skill
• SSR 安全 stores / Remote functions / Hooks / $app/* → hand off to sveltekit-advanced skill
• Adapters / 构建 / 性能 / Images / Migration → hand off to sveltekit-config skill
• sv 命令完整参数 / 自定义 add-on → hand off to svelte-cli skill
• MCP tools / AI 集成清单 → hand off to svelte-ai skill
• Lifecycle / Stores / Context / Testing 深入 → hand off to svelte-lifecycle skill