svelte

Provide Svelte 5 and SvelteKit patterns for reactivity, routing, and form actions.

14|5|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/oakoss/agent-skills --skill svelte-oakoss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/oakoss/agent-skills/tree/main/skills/svelte
Command: npx skills add https://github.com/oakoss/agent-skills --skill svelte-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and patterns for developing modern web applications using Svelte 5 and its full-stack framework, SvelteKit, simplifying complex UI development and server-side integration.

Core Features & Use Cases

  • Svelte 5 Reactivity: Master runes like $state, $derived, and $effect for fine-grained control.
  • SvelteKit Framework: Implement file-based routing, server/universal loads, form actions, and adapters.
  • Migration: Smoothly transition from Svelte 4 to Svelte 5 with clear migration paths.
  • Use Case: Develop a new e-commerce frontend with SvelteKit, leveraging server load functions for product data and form actions for checkout, ensuring a fast and reactive user experience.

Quick Start

Use the svelte skill to create a new SvelteKit project and set up basic file-based routing.

Frequently Asked Questions about svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Svelte 5 runes for state management and reactivity?▼

Svelte 5 reactivity uses runes like `$state` for mutable variables, `$derived` for computed values, and `$effect` for side effects to provide fine-grained control over component updates.

How do I migrate an existing Svelte 4 app to Svelte 5?▼

Migrating from Svelte 4 to Svelte 5 involves transitioning to the new runes-based reactivity system using established migration paths and patterns to update component logic and lifecycle handling.

How do I handle full-stack routing and server-side logic in SvelteKit?▼

SvelteKit handles full-stack routing with a file-based router, using server and universal load functions to fetch data, and form actions to process server-side mutations like checkout submissions.

Can I build a static site with SvelteKit and how do adapters work?▼

SvelteKit builds static sites and handles deployment through adapters, which configure the application output for specific hosting platforms and progressive enhancement scenarios.

What is the best way to structure an e-commerce frontend with SvelteKit?▼

Building an e-commerce frontend with SvelteKit leverages server load functions to fetch product data and form actions to process checkout, ensuring a fast, reactive, and progressively enhanced user experience.

Why are my Svelte 5 derived statements not updating?▼

Debugging Svelte 5 reactivity issues involves checking rune usage to ensure `$derived` values correctly track `$state` dependencies, and verifying `$effect` execution to resolve common state synchronization problems.