Svelte
Svelte/SvelteKit应用开发、调试与审查助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Svelte。 它的用途是：Svelte/SvelteKit应用开发、调试与审查助手 完整的 Skill 内容见：https://321skill.com/skills/svelte-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我审查这个Svelte组件，当count变化时UI没有更新，排查根因。' 它会分析代码中的runes使用是否正确，比如是否使用了$state或$derived，并建议修复方案。另外，
对AI说：'将这段Svelte 4代码迁移到Svelte 5，使用runes和$props。' 它会自动转换export let、$:、createEventDispatcher等旧语法。
介绍
本技能专为Svelte和SvelteKit开发者设计，解决从状态更新到部署构建的全链路问题。当UI在状态变化后不更新、effect无限循环报错（effect_update_depth_exceeded）、props或bindings失去响应、Map或class字段不被追踪、服务器端状态泄漏、构建时出现“window is not defined”错误、水合时标记不匹配、数据在突变后仍为旧值、表单操作无反应或返回403、作用域CSS被误删、过渡动画不触发，以及Node/Vercel/Cloudflare/静态适配器构建失败时，都可以使用本技能快速定位并修复。
使用方法：只需将Svelte或SvelteKit代码片段或项目上下文提供给AI，它会分析代码并给出具体修改建议。支持从Svelte 4迁移到Svelte 5的runes系统，包括将export let转换为$props、$:转换为$derived、createEventDispatcher转换为回调props、slots转换为snippets、on:click转换为onclick等。同时支持TypeScript类型定义（props、路由数据）、使用Vitest或Playwright进行组件测试，以及优化打包体积和减少重渲染次数。
适合Svelte前端开发者、全栈开发者以及从Svelte 4升级到5的团队。无论你是刚接触Svelte 5的新特性，还是排查SvelteKit中的复杂交互问题，都能获得精准帮助。
注意事项：本技能专注于Svelte生态，不适用于Vue、Nuxt、React或普通浏览器JavaScript语义。对于简单的纯CSS或HTML问题，建议使用其他通用技能。建议在提供代码时尽量包含上下文（如组件关系、数据流向），以便AI更准确地诊断问题。
核心特点
不同于通用前端调试助手，本技能深度理解Svelte 5的runes、$derived/$effect等新特性，以及SvelteKit的load函数、form actions、适配器机制，能精准处理Svelte特有的状态追踪和编译问题。
注意事项
不适用于Vue、Nuxt、React或纯浏览器JavaScript；不处理非Svelte的UI框架问题。
常见问题
如何处理effect循环报错（effect_update_depth_exceeded）？
检查effect内部是否修改了依赖的状态，导致无限循环。可以使用$effect.root或调整依赖项，也可以将副作用逻辑移至回调中避免同步修改。
如何将Svelte 4的export let迁移到Svelte 5的$props？
将export let message替换为let { message } = $props()，并确保组件使用onclick代替on:click。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/svelte-x-7/raw/index.md 读取 Svelte 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/svelte-x-7/raw/index.md（查看排版版本）