Guide Svelte 5 and SvelteKit development with runes and server boundaries.
npx skills add https://github.com/Muvon/octomind-tap --skill programming-svelte
Please help me install this Agent Skill. Skill: programming-svelte Source: https://github.com/Muvon/octomind-tap/tree/main/skills/programming-svelte Command: npx skills add https://github.com/Muvon/octomind-tap --skill programming-svelte
This Skill helps you design and implement correct, maintainable Svelte 5 and SvelteKit applications without falling into common pitfalls around reactivity, state, and server/client boundaries.
$state, $derived, and $effect with guidance on when to use each and how to avoid loops.+page.* and hooks.server.ts.+page.server.ts actions and upgrade with use:enhance while returning validation errors properly.Ask the skill to review your planned SvelteKit page and tell you where to put server-only logic, what runes to use for state and derived values, and how to implement the mutation with progressive-enhancement-friendly form actions.
High-intent search queries and answers about installing and using this skill.
Svelte 5 runes like $state, $derived, and $effect provide reactivity by explicitly declaring reactive values. To avoid infinite loops, use $derived for computed values instead of $effect, reserving $effect strictly for synchronous side effects that sync with external systems.
Structure SvelteKit server-only logic by placing sensitive code in +page.server.ts or +server.ts files and using server-only modules. This ensures secrets and database queries execute exclusively on the server, maintaining a clean server-client boundary.
Implement progressive enhancement in SvelteKit by defining mutations in +page.server.ts form actions and applying the use:enhance directive. This upgrades forms with client-side fetching while returning validation errors properly for users without JavaScript.
Yes, Svelte 5 runes work seamlessly within SvelteKit +page.svelte and +layout.svelte files. You can use $state and $derived to manage local component reactivity for data passed from universal and server load functions.
The $effect rune runs continuously when it reads reactive state that it also writes to, creating a loop. Extract the computed value into a $derived rune to break the cycle and ensure the effect only triggers necessary side effects.
Tobbe3108Fetches Svelte 5 documentation and analyzes components via MCP CLI.
MolcajeteAIGuide React component testing with Testing Library, user-event, and Vitest.
hai-seriesBuild cross-platform UIs with Svelte 5 Runes, DaisyUI, and Tailwind CSS.
AnExiledDevAdopt Svelte 5 runes for explicit component reactivity and state management.