# Svelte

> Use when the user asks about Svelte 5, Runes, component development, template syntax, control flow, state management, styling, lifecycle, testing, migration, or SvelteKit app setup.

- Skill: `morning-start/svelte` (Agent Skill)
- Install (CLI): `npx skillmds@latest add morning-start/svelte`
- Raw SKILL.md: https://api.skillmd.com/api/skills/morning-start/svelte/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: morning-start (https://skillmd.com/u/morning-start)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/morning-start/svelte

---


# Svelte Skills

## 任务目标
- 本 Skill 用于：掌握 Svelte 框架开发的完整技能体系
- 能力包含：组件开发、响应式状态、模板控制流、DOM 交互、样式管理、状态共享、测试部署
- 触发条件：需要开发 Svelte 应用或学习 Svelte 框架时

## 技能地图

### 入门技能
- [svelte-core](svelte-core/) - 核心基础：项目创建、文件结构、Rune 概念
- [svelte-runes](svelte-runes/) - Runes 系统：$state、$derived、$effect、$props

### 模板技能
- [svelte-template-basics](svelte-template-basics/) - 模板基础：标记语法、文本插值、特殊标签
- [svelte-control-flow](svelte-control-flow/) - 控制流：if、each、await、snippet

### 交互技能
- [svelte-directives](svelte-directives/) - 指令系统：bind、use、transition、animate

### 样式技能
- [svelte-styling](svelte-styling/) - 样式管理：作用域样式、CSS 自定义属性

### 高级技能
- [svelte-special-elements](svelte-special-elements/) - 特殊元素：svelte:window、element、head
- [svelte-state-management](svelte-state-management/) - 状态管理：Stores、Context API
- [svelte-lifecycle](svelte-lifecycle/) - 生命周期：挂载、销毁、命令式 API

### 工程技能
- [svelte-best-practices](svelte-best-practices/) - 最佳实践：测试、TypeScript、迁移指南
- [svelte-api-reference](svelte-api-reference/) - API 参考：svelte/* 模块完整文档

### 兼容技能
- [svelte-legacy](svelte-legacy/) - 遗留语法：Svelte 4 兼容代码维护

## 学习路径

### 入门路线
1. [svelte-core](svelte-core/) - 了解 Svelte 基础概念
2. [svelte-runes](svelte-runes/) - 掌握 Runes 响应式系统
3. [svelte-template-basics](svelte-template-basics/) - 学习模板语法
4. [svelte-control-flow](svelte-control-flow/) - 掌握条件与循环
5. [svelte-directives](svelte-directives/) - 学会 DOM 交互

### 进阶路线
6. [svelte-styling](svelte-styling/) - 样式管理
7. [svelte-special-elements](svelte-special-elements/) - 特殊元素
8. [svelte-state-management](svelte-state-management/) - 跨组件状态
9. [svelte-lifecycle](svelte-lifecycle/) - 生命周期钩子

### 专业路线
10. [svelte-best-practices](svelte-best-practices/) - 最佳实践
11. [svelte-api-reference](svelte-api-reference/) - API 参考
12. [svelte-legacy](svelte-legacy/) - 遗留代码

## 资源索引
- 官方文档：https://svelte.dev/docs
- 官方教程：https://svelte.dev/tutorial
- Playground：https://svelte.dev/playground
- SvelteKit：https://kit.svelte.dev

## 注意事项
- 推荐使用 SvelteKit 作为应用框架
- 优先使用 Svelte 5 Runes 语法
- 新项目避免使用遗留语法
- 遵循最佳实践编写高质量代码