mcpField
S
svelte-runes

svelte-runes

github.com/spences10开发941.0k 次安装2 周前更新
代码仓库

关于 svelte-runes

svelte-runes 是一项介绍 Svelte Runes 的开发技能，面向使用 Svelte 5 编写组件的开发者。它说明各 Rune 的用途、反应性规则及从 Svelte 4 迁移时的注意事项。

主要功能

  1. 01说明各 Rune 的典型用途
  2. 02介绍顶层使用及反应性规则
  3. 03提供迁移和组件 API 参考
  4. 04涵盖常见错误与调试方法

适用场景

  1. 01选择适合的 Rune 管理状态
  2. 02编写组件属性和派生值
  3. 03排查反应性问题及迁移语法

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spences10/svelte-skills-kit --skill svelte-runes

安装后在 Claude Code 中输入/svelte-runes确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
examples/
bindable-props.svelte
effect-vs-derived.svelte
references/
common-mistakes.md
component-api.md
migration-gotchas.md
reactivity-patterns.md
snippets-vs-slots.md

详细介绍

Svelte Runes

快速入门

选哪个 rune？ 属性：$props() | 可绑定：$bindable() | 派生：$derived() | 副作用：$effect() | 状态：$state()

关键规则： Runes 只能在顶层使用。$derived 可以被覆盖 （只读时使用 const）。不要混用 Svelte 4/5 语法。 对象/数组默认是深度响应式的。

示例

<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>

参考文件

关于 @attach 和其他模板指令，请参阅 svelte-template-directives 技能。

备注

  • 使用 onclick，不要使用 on:click；在布局中使用 {@render children()}
  • $derived 可以重新赋值（5.25+）——只读时使用 const
  • 为确保类型安全，优先使用 createContext，而非 setContext/getContext
  • 使用 $inspect.trace 调试响应式问题
  • 最后验证时间： 2026-03-12

评论

支持 Markdown