Svelte
Svelte/SvelteKit应用开发、调试与迁移助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Svelte。 它的用途是：Svelte/SvelteKit应用开发、调试与迁移助手 完整的 Skill 内容见：https://321skill.com/skills/svelte-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的SvelteKit应用在hydration时出现markup mismatch错误，并且一个effect循环导致effect_update_depth_exceeded'，它会分析代码并提供修复建议，比如调整依赖项或使用$effect.root。若说'想把Svelte 4组件的export let改成$props'，它会给出完整转换步骤和注意事项。
介绍
该技能专门解决Svelte和SvelteKit开发中的常见问题：UI不更新、effect无限循环（effect_update_depth_exceeded）、props或bindings停止响应、Map/类字段不被追踪、服务器端状态泄漏、window is not defined导致构建失败、hydration时标记不匹配、数据在mutation后仍显示旧值、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等。 使用方法：向AI描述你遇到的具体问题（如错误信息、代码行为异常），或直接粘贴相关代码片段，AI会分析上下文并提供修复方案、优化建议或迁移步骤。对于构建失败，它会检查适配器配置和环境变量。对于状态泄漏，它会定位共享状态并给出隔离方案。 适合Svelte/SvelteKit开发者、前端全栈工程师、正在将Svelte 4项目升级到5的团队，以及需要调试复杂响应式状态或性能问题的开发者。也适合使用TypeScript增强props和路由数据类型的场景。 注意：该技能仅适用于Svelte和SvelteKit生态，不适用于Vue、Nuxt、React或纯浏览器JavaScript。迁移时建议先备份代码，并逐步验证每个转换步骤。对于大型项目，建议分模块进行。
核心特点
与通用代码调试工具不同，该技能深度理解Svelte 5的runes、$state、$derived、$effect等特性，以及SvelteKit的load函数、form actions、adapter等内置机制，能精准定位runes特有的响应式陷阱和迁移兼容性问题。
注意事项
不适用于Vue、Nuxt、React或纯浏览器JavaScript语义，且无法处理与Svelte无关的通用后端逻辑。
常见问题
如何处理effect_update_depth_exceeded错误？
通常是因为$effect中修改了响应式依赖导致无限循环，可通过$effect.root或使用$effect的清理函数隔离副作用，或改用$derived计算值。
如何将Svelte 4的export let迁移到Svelte 5的$props？
将 export let name; 改为 let { name } = $props(); 并移除组件标签上的bind:，直接使用属性传递。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/svelte-x-5/raw/index.md 读取 Svelte 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/svelte-x-5/raw/index.md（查看排版版本）