Svelte
Svelte/SvelteKit 深度调试与迁移助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Svelte。 它的用途是：Svelte/SvelteKit 深度调试与迁移助手 完整的 Skill 内容见：https://321skill.com/skills/svelte-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的Svelte 5组件中，当点击按钮修改count时，UI没有更新，代码是：<script> let count = $state(0); function increment() { count += 1; console.log(count); } </script> <button onclick={increment}>点击</button> <p>{count}</p>'，它会检查$state使用是否正确，并指出可能缺失了$effect或使用了过期变量，然后给出修复后的代码。
介绍
本技能专为 Svelte 和 SvelteKit 应用开发设计，解决你在使用 runes、stores、snippets、load 函数、form actions 和适配器时遇到的各种疑难杂症。当 UI 在状态变化后不更新、effect 陷入无限循环（报错 effect_update_depth_exceeded）、props 或 bindings 突然失效、Map 或 class 字段无法被追踪、服务端状态泄漏导致用户间数据串扰、构建时出现 window is not defined、水合时标记不匹配、数据在 mutation 后仍显示旧值、form action 无响应或返回 403、scoped CSS 被错误修剪、过渡动画不触发，以及 Node/Vercel/Cloudflare/static 适配器构建失败时，直接使用本技能即可快速定位根因并获得修复方案。
使用方法：只需将你的 Svelte 组件代码、错误日志或构建输出粘贴给 AI，技能会自动分析问题类型，并给出针对性的调试步骤或代码修改建议。支持从 Svelte 4 到 Svelte 5 的迁移，包括将 export let 转换为 $props、$: 转换为 $derived、createEventDispatcher 转换为 callback props、slots 转换为 snippets、on:click 转换为 onclick 等，同时提供 TypeScript 类型定义指引、Vitest/Playwright 测试编写建议，以及如何减少 bundle 体积和重渲染开销。
适合用户：前端开发、全栈开发、测试工程师，特别是正在使用 Svelte 5 新特性（runes、snippets）或需要将旧项目升级到 Svelte 5 的团队。也适用于正在排查 SvelteKit 部署问题（如适配器兼容性）的运维开发人员。
使用建议：在提问时尽量提供完整的组件代码、错误堆栈或构建日志，以及你期望的行为描述。对于迁移任务，建议先运行官方迁移工具再使用本技能查漏补缺。注意本技能不适用于 Vue、Nuxt、React 或纯浏览器 JavaScript 场景，若遇到跨框架问题请切换至对应技能。
核心特点
目前市面上缺乏专门针对 Svelte 5 runes/snippets 等新特性的深度调试助手，本技能不仅覆盖常见错误，还内置了 Svelte 4 到 5 的完整迁移规则，能自动识别旧语法并给出替换方案，而其他通用技能往往只处理 React 或 Vue 生态。
注意事项
不适用于 Vue、Nuxt、React 或纯浏览器 JavaScript 语义，也无法处理 Svelte 以外的框架问题。
常见问题
Svelte 5 中 effect 无限循环怎么办？
检查 $effect 内部是否修改了依赖项，或者使用 $effect.root 创建隔离作用域。本技能可以帮你分析循环依赖链。
如何将 Svelte 4 的 export let 迁移到 Svelte 5？
使用 $props() 接收所有 props，例如 export let name → let { name } = $props()。本技能支持批量转换。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/svelte-x/raw/index.md 读取 Svelte 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/svelte-x/raw/index.md（查看排版版本）