Svelte
Svelte/SvelteKit 应用构建、调试与审查专家
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Svelte。 它的用途是：Svelte/SvelteKit 应用构建、调试与审查专家 完整的 Skill 内容见：https://321skill.com/skills/svelte-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我的SvelteKit应用部署后表单动作返回403，这是表单和动作的代码……”它会分析CSRF保护、权限配置、适配器设置，给出修复建议，例如在load函数中检查form参数或调整hooks中的handle。
介绍
该 Skill 专门解决 Svelte 和 SvelteKit 开发中的常见问题：UI 不随状态更新、effect 无限循环（effect_update_depth_exceeded）、props 或 bindings 失去响应、Map 或 class 字段未被追踪、服务端状态泄漏、构建时“window is not defined”报错、水合标记不匹配、数据突变后仍显示旧值、表单动作无响应或返回 403、作用域 CSS 被错误剪枝、过渡动画不触发，以及各种适配器（Node、Vercel、Cloudflare、静态）构建失败。同时支持从 Svelte 4 迁移到 Svelte 5 的 runes 模式，自动转换 export let 为 $props、$: 为 $derived、createEventDispatcher 为回调 props、slots 为 snippets、on:click 为 onclick，并提供 TypeScript 类型化 props 和路由数据、使用 Vitest 或 Playwright 测试组件、优化包体积和重渲染成本。
使用方式：直接描述你的问题或需求，例如“我的 SvelteKit 表单动作返回 403”或“将这段 Svelte 4 组件迁移到 runes”。该 Skill 会分析代码上下文，给出修复方案、代码转换或调试指导。支持 Node、Vercel、Cloudflare、静态适配器等部署环境。
适合人群：前端开发者、全栈开发者、Svelte/SvelteKit 项目维护者、从 Svelte 4 升级到 5 的团队、需要调试复杂状态管理的开发者。
使用建议：提供具体的代码片段、错误信息或期望行为，能获得更精准的解答。注意该 Skill 不适用于 Vue、Nuxt、React 或纯浏览器 JavaScript 语义。
核心特点
与通用前端调试 Skill 不同，该 Skill 深度理解 Svelte 5 的 runes、stores、snippets、load 函数、form actions 等专属概念，能精准定位 Svelte 特有的错误（如 effect_update_depth_exceeded）并提供一键迁移方案。
注意事项
不适用于 Vue、Nuxt、React 或纯浏览器 JavaScript 语义。
常见问题
如何将 Svelte 4 的 export let 转换为 $props？
直接描述你的组件，该 Skill 会自动将 export let 替换为 $props() 并调整内部引用。例如 export let name; 变为 let { name } = $props();。
我的 SvelteKit 表单动作返回 403 怎么办？
检查表单动作是否有 CSRF 保护、是否使用了正确的 method（POST/PUT/DELETE）、以及是否在 load 函数中正确处理了 form 数据。该 Skill 可以分析你的代码并给出修复建议。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/svelte-x-6/raw/index.md 读取 Svelte 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/svelte-x-6/raw/index.md（查看排版版本）