关于 svelte-runes
svelte-runes 是面向 Svelte 开发者的参考技能，帮助选择和使用 Svelte Runes 编写响应式代码，并提示常见错误与调试方法。
主要功能
- 01说明各类 rune 的用途
- 02提供响应式模式参考
- 03介绍组件 API 模式
- 04列出常见错误及修正
- 05提供反应性调试建议
适用场景
- 01选择状态或派生值的 rune
- 02实现组件 props 与绑定
- 03排查响应式问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/svelte-runes确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
examples/bindable-props.svelteeffect-vs-derived.sveltereferences/common-mistakes.mdcomponent-api.mdreactivity-patterns.mdsnippets-vs-slots.md详细介绍
Svelte Runes
快速入门
选择哪个 rune？ 属性：$props() | 可绑定：$bindable() |
计算：$derived() | 副作用：$effect() | 状态：$state()
关键规则： Runes 只能在顶层使用。可以覆盖 $derived
（只读时使用 const）。对象和数组默认具有深层响应性；对于整体替换的大型数据，请使用 $state.raw。
示例
<script>
let count = $state(0); // Mutable state
const doubled = $derived(count * 2); // Computed (const = read-only)
$effect(() => {
console.log(`Count is ${count}`); // Side effect
});
</script>
<button onclick={() => count++}>
{count} (doubled: {doubled})
</button>
参考文件
- reactivity-patterns.md - 何时使用各个 rune
- component-api.md -
$props、$bindable模式 - snippets-vs-slots.md - 新的 snippet 语法
- common-mistakes.md - 常见反模式及修正方法
关于
@attach和其他模板指令，请参阅 svelte-template-directives 技能。
备注
- 在布局中使用
onclick等事件属性，以及{@render children()} - 可以重新赋值给
$derived（5.25+）——只读时使用const - 为确保类型安全，优先使用
createContext，而不是setContext/getContext - 使用
$inspect.trace调试响应性问题 - 多行派生逻辑优先使用
$derived.by - 避免在
$effect中更新状态；effects 是一种逃生机制 - Effects 不会在服务器上运行；不要用
if (browser)包裹 effect 函数体 - 上次验证： 2026-05-14
评论
支持 Markdown