Svelte
Svelte/SvelteKit应用构建、调试与代码审查专家
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Svelte。 它的用途是：Svelte/SvelteKit应用构建、调试与代码审查专家 完整的 Skill 内容见：https://321skill.com/skills/svelte-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的SvelteKit应用中，当我点击按钮更新count时，页面UI没有变化，但控制台打印count已经增加。请帮我检查代码中是否有runes使用错误。' 它会分析代码，发现count变量没有用$state()包裹，而是普通let声明，然后给出修复建议：将let count = 0改为let count = $state(0)，并解释为什么这样可以触发响应式更新。
介绍
本Skill专注于解决Svelte及SvelteKit开发中的各类棘手的运行时问题与构建错误，包括UI状态更新不生效、effect无限循环（effect_update_depth_exceeded）、props或bindings失去响应、Map或class字段未被追踪、服务端状态泄漏导致用户数据混淆、window is not defined导致构建中断、hydration时标记不匹配、数据突变后保持陈旧、form action无响应或返回403、scoped CSS被错误修剪、过渡动画不触发，以及Node/Vercel/Cloudflare/static等适配器构建失败等。同时涵盖从Svelte 4向Svelte 5的迁移工作，如将export let转换为$props、$:转换为$derived、createEventDispatcher转换为callback props、slots转换为snippets、on:click转换为onclick等。
使用方式非常直接：在对话中描述你遇到的具体问题（如UI不更新、effect死循环、props失效等），或将相关代码片段粘贴给AI，Skill会自动分析代码逻辑，识别runes、stores、load functions、form actions、adapters等Svelte特性的使用是否正确，并给出修复建议或重构方案。支持在TypeScript下为props和route data提供类型安全，以及使用Vitest或Playwright进行组件测试。
适合Svelte/SvelteKit的初学者、进阶开发者，以及正在进行框架升级迁移的团队。尤其适用于那些在Svelte 5新模式（runes、$derived、$effect等）下感到困惑，或者遇到Svelte特有陷阱（如未正确使用$state导致UI不更新）的开发者。对于需要快速排查线上问题、优化组件性能、减小打包体积的工程团队同样高效。
使用建议：提供上下文时，尽量包含完整的组件代码、错误信息和控制台输出，以便AI精准定位问题根因。注意本Skill不适用于Vue、Nuxt、React或纯浏览器JavaScript语义——如果你遇到的是React的hook问题或Vue的响应式陷阱，请使用对应框架的专用Skill。另外，对于简单的CSS样式调整或非Svelte特有的逻辑bug，可能不需要使用此Skill。
核心特点
与通用代码审查或调试技能不同，本Skill深度绑定Svelte/SvelteKit的响应式模型（runes、stores）和框架特有机制（load functions、form actions、adapters），能精准识别并修复Svelte 5迁移中的模式转换错误，以及scoped CSS、hydration等框架独有的陷阱。
注意事项
不适用于Vue、Nuxt、React或纯浏览器JavaScript语义的问题，也无法处理与Svelte生态无关的通用后端逻辑或数据库查询。
常见问题
Svelte 5中如何将export let替换为$props？
使用$props() rune替代export let，例如：let { name, age } = $props(); 然后在父组件中通过属性传递。注意不要混用export let和$props，否则会报错。
为什么我的effect无限循环并报错effect_update_depth_exceeded？
通常是因为effect内部修改了它所依赖的响应式状态，导致触发重新运行。解决方法：使用$effect的清理函数，或确保修改不在依赖追踪范围内，或改用$derived自动计算。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/svelte-x-3/raw/index.md 读取 Svelte 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/svelte-x-3/raw/index.md（查看排版版本）