Svelte
专为Svelte/SvelteKit应用提供构建、调试、审查与迁移支持的AI助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Svelte。 它的用途是：专为Svelte/SvelteKit应用提供构建、调试、审查与迁移支持的AI助手。 完整的 Skill 内容见：https://321skill.com/skills/svelte-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的SvelteKit应用在提交表单后，页面数据没有刷新，控制台也没有错误，这是怎么回事？’ 它会引导您检查表单action的返回值是否正确，load函数是否重新执行，并排查可能的状态缓存或响应式更新问题。或者，您可以说：‘在将Svelte 4项目升级到Svelte 5时，如何将原来的store转换成runes？’ 它会提供具体的代码转换示例和最佳实践。
介绍
本Skill旨在解决Svelte和SvelteKit开发过程中的一系列痛点问题。当您遇到UI状态更新失败、响应式失效、服务器端状态泄漏、构建适配器错误、水合不匹配、表单动作异常、样式被意外修剪、动画不触发等具体难题时，它可以提供专业的诊断和解决方案。
它通过分析您提供的代码片段、错误信息和上下文，来定位问题根源并给出修复建议。例如，您可以粘贴导致“effect_update_depth_exceeded”无限循环的代码，或描述“window is not defined”导致构建失败的场景，Skill会引导您理解Svelte的运行机制并提供修改方案。
它非常适合正在使用Svelte 4/5或SvelteKit进行项目开发、维护或升级的前端和全栈开发者。无论是初学者在理解响应式原理时遇到困惑，还是有经验的开发者在处理复杂的状态管理、服务器端渲染或构建部署问题时，都能从中获得帮助。
使用建议：在提问时，请尽量提供具体的错误信息、相关代码段（如组件、load函数、action等）以及您正在使用的Svelte版本和适配器类型。这有助于Skill给出更精确的答案。请注意，它专注于Svelte生态，不处理Vue、React或原生JavaScript的问题。
核心特点
与通用前端调试Skill相比，它深度聚焦于Svelte/SvelteKit框架特有的问题，如Runes响应式系统、SvelteKit的load函数/表单动作/适配器，并提供从Svelte 4到Svelte 5的详细迁移指导，覆盖了该框架生态下绝大多数特有的疑难杂症。
注意事项
不适用于Vue/Nuxt、React或原生浏览器JavaScript语义相关的问题。
常见问题
如何解决Svelte中UI不更新的问题？
检查响应式变量是否使用$state或$derived正确声明，确保状态变更在组件或操作内触发。
如何将Svelte 4组件迁移到Svelte 5的Runes？
将`export let`改为`$props()`，将`$:`响应式语句改为`$derived()`，事件分发改用回调props。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/svelte-x-4/raw/index.md 读取 Svelte 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/svelte-x-4/raw/index.md（查看排版版本）