Svelte SvelteKit Full-Stack Development Skill

What This Skill Enables

Claude can build reactive web applications using Svelte's compile-time approach and SvelteKit's full-stack framework. Svelte compiles components to vanilla JavaScript at build time, resulting in minimal runtime overhead and exceptional performance. SvelteKit adds file-based routing, server-side rendering, API routes, and adapters for any platform. From simple components to production apps with authentication and databases, Claude handles the Svelte ecosystem end-to-end.

Compatibility

Native

• Claude Code / Claude: native skill usage via SKILL.md.
• Codex/OpenAI workflows: compatible with Agent Skills-style SKILL.md content as reusable workflow instructions.

Manual Adaptation

• Gemini CLI: native skill usage via .gemini/skills/<skill-name>/SKILL.md or .agents/skills/<skill-name>/SKILL.md where supported.
• Cursor: use the generated .cursor/rules/*.mdc adapter for project rules.
• OpenClaw and similar agents: use the same skill content as a reusable prompt/workflow file when native skill import is unavailable.

Prerequisites

Required:

• Claude Pro subscription or Claude Code CLI
• Node.js 18+ (20+ recommended)
• npm or pnpm package manager
• Basic JavaScript knowledge

What Claude handles automatically:

• Creating reactive Svelte components with stores
• Building SvelteKit routes with +page.svelte files
• Implementing server-side logic in +page.server.ts
• Setting up form actions with progressive enhancement
• Adding authentication with hooks and load functions
• Configuring database connections and ORMs
• Implementing real-time features with Svelte stores
• Deploying to Vercel, Netlify, or Node servers

How to Use This Skill

Reactive Component Development

Prompt: "Create Svelte component for user profile with: editable bio, avatar upload with preview, reactive form validation, and optimistic UI updates. Use Svelte stores for state."

Claude will:

1. Create component with $: reactive statements
2. Set up writable stores for form state
3. Add two-way binding with bind:value
4. Implement file upload with FileReader
5. Add reactive validation with $:
6. Show optimistic updates
7. Handle submission with fetch

SvelteKit Full-Stack App

Prompt: "Build SvelteKit blog with: file-based routing, Markdown posts with frontmatter, server-side API routes for CRUD, authentication with JWT, and SQLite database with Prisma."

Claude will:

1. Set up SvelteKit project structure
2. Create +page.svelte routes
3. Add +page.server.ts load functions
4. Implement API routes in +server.ts
5. Configure Prisma with SQLite
6. Add authentication hooks
7. Parse Markdown with gray-matter

Form Handling with Actions

Prompt: "Create SvelteKit form for product creation with: server-side validation, progressive enhancement (works without JS), file uploads, and optimistic UI. Show errors next to fields."

Claude will:

1. Create form in +page.svelte
2. Add form action in +page.server.ts
3. Implement server-side validation
4. Use enhance for progressive enhancement
5. Add file upload handling
6. Display field-specific errors
7. Show success messages

Real-Time Dashboard

Prompt: "Build real-time analytics dashboard with Svelte: WebSocket connection, reactive charts with Chart.js, derived stores for calculated metrics, and auto-refreshing data every 30s."

Claude will:

1. Set up WebSocket in SvelteKit
2. Create writable stores for data
3. Add derived stores for calculations
4. Integrate Chart.js reactively
5. Implement auto-refresh with setInterval
6. Add connection status indicator
7. Handle reconnection logic

Tips for Best Results

1. Use Reactive Statements: The $: syntax automatically re-runs when dependencies change. Use for derived values, side effects, and reactive logic.

2. Embrace Two-Way Binding: bind:value, bind:checked, bind:group simplify form handling. No need for onChange handlers.

3. Stores for Global State: Use writable, readable, or derived stores instead of React Context. Access with $ prefix in components.

4. Server Load Functions: Fetch data in +page.server.ts load functions for SSR. Access with data prop in components.

5. Form Actions Over APIs: SvelteKit form actions provide progressive enhancement. No JavaScript required for basic functionality.

6. Compile-Time Optimization: Svelte compiles to optimal JavaScript. Avoid runtime overhead of virtual DOM. Components are just functions.

Common Workflows

E-Commerce Store

"Build SvelteKit e-commerce with:
1. Product catalog: +page.svelte with load function, search/filter
2. Product detail: dynamic [slug]/+page.svelte route
3. Cart: writable store with localStorage persistence
4. Checkout: form actions with Stripe integration
5. Auth: hooks for JWT validation, protected routes
6. Admin: +layout.server.ts for role-based access
7. Database: Prisma with PostgreSQL
8. Images: static adapter with CDN"

SaaS Dashboard

"Create multi-tenant SvelteKit SaaS:
1. Auth: +hooks.server.ts for session management
2. Multi-tenant: load function filters by tenant ID
3. Dashboard: reactive charts with derived stores
4. Settings: form actions for account updates
5. API: +server.ts routes for external integrations
6. Billing: Stripe webhooks in API routes
7. Real-time: Server-Sent Events for notifications
8. Deploy: Node adapter with PM2"

Static Site Generator

"Build Svelte static site generator:
1. Content: Markdown files with frontmatter
2. Processing: +page.server.ts loads and parses MD
3. Templates: layout components for post types
4. Navigation: derived store from post metadata
5. Search: client-side with Fuse.js
6. RSS: +server.ts generates feed.xml
7. Sitemap: prerender all routes
8. Deploy: Static adapter to Netlify"

Real-Time Collaboration

"Build collaborative doc editor with Svelte:
1. Editor: rich text with ProseMirror
2. Sync: WebSocket for real-time updates
3. Presence: writable store showing active users
4. Conflict resolution: operational transforms
5. Persistence: auto-save to database
6. Auth: session-based with refresh tokens
7. Rooms: dynamic [roomId] routes
8. Cursor positions: reactive SVG overlays"

Troubleshooting

Issue: "Reactive statements not updating when I expect" Solution: Ensure reactive statement depends on reactive value ($: result = calculate(value), not const). Use = for assignment in reactive block. Check that dependencies are in scope. Array/object mutations need reassignment: items = [...items, newItem].

Issue: "Load function data not available in component" Solution: Export data prop in +page.svelte: export let data;. Check +page.server.ts returns object from load(). Verify route has +page.server.ts file. Use $page.data for nested layouts.

Issue: "Form action not being called" Solution: Add name to form action: <form method="POST" action="?/create">. Export actions in +page.server.ts. Use enhance from $app/forms for progressive enhancement. Check method is POST.

Issue: "Stores not persisting across page navigation" Solution: Use writable store in separate .ts file, not component. Import same store instance everywhere. For persistence, sync to localStorage with custom store. Check SvelteKit isn't destroying store on navigation.

Issue: "Deployment build failing with adapter errors" Solution: Install correct adapter (@sveltejs/adapter-node, -vercel, -static). Check svelte.config.js has adapter configured. Verify build command in package.json. For static, ensure all routes are prerenderable.

Learn More

• Svelte Official Tutorial
• SvelteKit Documentation
• Svelte GitHub Repository
• SvelteKit Examples
• Svelte Society Recipes
• Svelte REPL

Features

• Compile-time optimization with zero runtime overhead - Svelte compiles to vanilla JavaScript
• Reactive programming with $: syntax for auto-updates and $state/$derived runes in Svelte 5
• SvelteKit file-based routing with SSR, SSG, and hybrid rendering modes
• Form actions with progressive enhancement (works without JavaScript)
• Server load functions (+page.server.ts) for data fetching and authentication
• Svelte stores (writable, readable, derived) for global state management
• TypeScript support with automatic type generation from routes
• Adapters for deployment to Vercel, Netlify, Node.js, Cloudflare Workers, and more

Use Cases

• Building reactive dashboards with minimal JavaScript and real-time updates
• Full-stack apps with authentication, databases (Prisma, Drizzle), and API routes
• Static sites with Markdown content processing and SSG
• E-commerce stores with cart management, checkout flows, and payment integration
• SaaS dashboards with multi-tenant data isolation and role-based access
• Real-time collaborative tools with WebSocket connections and presence tracking

• Source repositorygithub.com 2025-10-23
• Documentationsvelte.dev
• Package (SHA-256 pinned)/downloads/skills/svelte-sveltekit-fullstack.zip