svelte5-best-practices

SKILL.md

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

Svelte 5 符文、程式碼片段、SvelteKit 模式以及 TypeScript 和元件開發的現代最佳實踐。在編寫、審查或重構 Svelte 5 元件和 SvelteKit 應用程式時使用。觸發：Svelte 元件、符文（$state、$driven、$effect、$props、$bindable、$inspect）、片段（{#snippet}、{@render}）、事件處理、SvelteKit 資料載入、表單操作、Svelte 4 到 Svelte 5 遷移、儲存到碼文遷移、表單操作、Svelte 4 到 Svelte 5 遷移、儲存到元件遷移、狀態隔離、效能最佳化或元件測試。 來源：ejirocodes/agent-skills。

開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practices 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用

查看原文