svelte5-best-practices by ejirocodes/agent-skills
npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practices| 主题 | 何时使用 | 参考链接 |
|---|---|---|
| Runes | $state, $derived, $effect, $props, $bindable, $inspect | runes.md |
| Snippets | 替换插槽，{#snippet}, {@render} | snippets.md |
| Events | onclick 处理程序，回调属性，上下文 API | events.md |
| TypeScript | 属性类型定义，泛型组件 | typescript.md |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 迁移 |
| 从 Svelte 4 到 5，从 stores 到 runes |
| migration.md |
| SvelteKit | 加载函数，表单操作，SSR，页面类型定义 | sveltekit.md |
| 性能 | 通用响应性，避免过度响应性，流式处理 | performance.md |
<script>
let count = $state(0); // 响应式状态
let doubled = $derived(count * 2); // 计算值
</script>
<script>
let { name, count = 0 } = $props();
let { value = $bindable() } = $props(); // 双向绑定
</script>
<script>
let { children, header } = $props();
</script>
{@render header?.()}
{@render children()}
<!-- Svelte 5: 使用 onclick，而不是 on:click -->
<button onclick={() => count++}>点击</button>
<script>
let { onclick } = $props();
</script>
<button onclick={() => onclick?.({ data })}>点击</button>
let 而不使用 $state - 没有 $state() 的变量不是响应式的$effect 处理派生值 - 应使用 $derivedon:click 语法 - 在 Svelte 5 中应使用 onclickcreateEventDispatcher - 应使用回调属性替代<slot> - 应使用带 {@render} 的 snippets$bindable() - 这是 bind: 生效所必需的Promise.all 处理并行请求每周安装量
2.3K
代码仓库
GitHub 星标数
4
首次出现
2026年1月23日
安全审计
安装于
opencode2.0K
gemini-cli2.0K
codex1.9K
github-copilot1.9K
kimi-cli1.9K
amp1.9K
| Topic | When to Use | Reference |
|---|---|---|
| Runes | $state, $derived, $effect, $props, $bindable, $inspect | runes.md |
| Snippets | Replacing slots, {#snippet}, {@render} | snippets.md |
| Events | onclick handlers, callback props, context API | events.md |
| TypeScript | Props typing, generic components | typescript.md |
| Migration | Svelte 4 to 5, stores to runes | migration.md |
| SvelteKit | Load functions, form actions, SSR, page typing | sveltekit.md |
| Performance | Universal reactivity, avoiding over-reactivity, streaming | performance.md |
<script>
let count = $state(0); // Reactive state
let doubled = $derived(count * 2); // Computed value
</script>
<script>
let { name, count = 0 } = $props();
let { value = $bindable() } = $props(); // Two-way binding
</script>
<script>
let { children, header } = $props();
</script>
{@render header?.()}
{@render children()}
<!-- Svelte 5: use onclick, not on:click -->
<button onclick={() => count++}>Click</button>
<script>
let { onclick } = $props();
</script>
<button onclick={() => onclick?.({ data })}>Click</button>
let without $state - Variables are not reactive without $state()$effect for derived values - Use $derived insteadon:click syntax - Use onclick in Svelte 5createEventDispatcher - Use callback props instead<slot> - Use snippets with {@render}Weekly Installs
2.3K
Repository
GitHub Stars
4
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode2.0K
gemini-cli2.0K
codex1.9K
github-copilot1.9K
kimi-cli1.9K
amp1.9K
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
102,200 周安装
$bindable() - Required for bind: to workPromise.all for parallel requests