Svelte Skills

任务目标

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

技能地图

入门技能

• svelte-core - 核心基础：项目创建、文件结构、Rune 概念
• svelte-runes - Runes 系统：$state、$derived、$effect、$props

模板技能

• svelte-template-basics - 模板基础：标记语法、文本插值、特殊标签
• svelte-control-flow - 控制流：if、each、await、snippet

交互技能

• svelte-directives - 指令系统：bind、use、transition、animate

样式技能

• svelte-styling - 样式管理：作用域样式、CSS 自定义属性

高级技能

• svelte-special-elements - 特殊元素：svelte:window、element、head
• svelte-state-management - 状态管理：Stores、Context API
• svelte-lifecycle - 生命周期：挂载、销毁、命令式 API

工程技能

• svelte-best-practices - 最佳实践：测试、TypeScript、迁移指南
• svelte-api-reference - API 参考：svelte/* 模块完整文档

兼容技能

• svelte-legacy - 遗留语法：Svelte 4 兼容代码维护

学习路径

入门路线

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

进阶路线

6. svelte-styling - 样式管理
7. svelte-special-elements - 特殊元素
8. svelte-state-management - 跨组件状态
9. svelte-lifecycle - 生命周期钩子

专业路线

10. svelte-best-practices - 最佳实践
11. svelte-api-reference - API 参考
12. svelte-legacy - 遗留代码

资源索引

• 官方文档：https://svelte.dev/docs
• 官方教程：https://svelte.dev/tutorial
• Playground：https://svelte.dev/playground
• SvelteKit：https://kit.svelte.dev

注意事项

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