Svelte SvelteKit Full-Stack Development Skill

# Svelte/SvelteKit Full-Stack Developer 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. ## 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](https://svelte.dev/tutorial) - [SvelteKit Documentation](https://kit.svelte.dev/docs) - [Svelte GitHub Repository](https://github.com/sveltejs/svelte) - [SvelteKit Examples](https://github.com/sveltejs/kit/tree/master/examples) - [Svelte Society Recipes](https://sveltesociety.dev/recipes) - [Svelte REPL](https://svelte.dev/repl)

// src/routes/posts/+page.server.ts import type { PageServerLoad } from './$types'; import { prisma } from '$lib/server/database'; export const load: PageServerLoad = async () => { const posts = await prisma.post.findMany({ orderBy: { createdAt: 'desc' }, take: 10, }); return { posts }; }; // src/routes/posts/+page.svelte <script lang="ts"> import type { PageData } from './$types'; export let data: PageData; </script> <h1>Recent Posts</h1> <ul> {#each data.posts as post} <li> <a href="/posts/{post.slug}">{post.title}</a> <time>{post.createdAt.toLocaleDateString()}</time> </li> {/each} </ul>

// src/routes/create/+page.server.ts import type { Actions } from './$types'; import { fail } from '@sveltejs/kit'; import { z } from 'zod'; const schema = z.object({ title: z.string().min(3), content: z.string().min(10), }); export const actions: Actions = { create: async ({ request }) => { const formData = await request.formData(); const data = { title: formData.get('title'), content: formData.get('content'), }; const result = schema.safeParse(data); if (!result.success) { return fail(400, { errors: result.error.flatten().fieldErrors, data, }); } // Save to database // await prisma.post.create({ data: result.data }); return { success: true }; }, }; // src/routes/create/+page.svelte <script lang="ts"> import { enhance } from '$app/forms'; import type { ActionData } from './$types'; export let form: ActionData; </script> <form method="POST" action="?/create" use:enhance> <label> Title <input name="title" value={form?.data?.title ?? ''} /> {#if form?.errors?.title} <span class="error">{form.errors.title[0]}</span> {/if} </label> <label> Content <textarea name="content">{form?.data?.content ?? ''}</textarea> {#if form?.errors?.content} <span class="error">{form.errors.content[0]}</span> {/if} </label> <button type="submit">Create Post</button> {#if form?.success} <p class="success">Post created successfully!</p> {/if} </form>

// src/lib/stores/cart.ts import { writable } from 'svelte/store'; import { browser } from '$app/environment'; type CartItem = { id: string; name: string; quantity: number }; function createCartStore() { // Load from localStorage if in browser const stored = browser ? localStorage.getItem('cart') : null; const initial: CartItem[] = stored ? JSON.parse(stored) : []; const { subscribe, set, update } = writable<CartItem[]>(initial); // Persist to localStorage on changes if (browser) { subscribe((value) => { localStorage.setItem('cart', JSON.stringify(value)); }); } return { subscribe, add: (item: CartItem) => update((cart) => { const existing = cart.find((i) => i.id === item.id); if (existing) { existing.quantity += item.quantity; return [...cart]; } return [...cart, item]; }), remove: (id: string) => update((cart) => cart.filter((i) => i.id !== id)), clear: () => set([]), }; } export const cart = createCartStore(); // Usage in component: // <script> // import { cart } from '$lib/stores/cart'; // $: total = $cart.reduce((sum, item) => sum + item.quantity, 0); // </script> // <p>Cart: {total} items</p>

Svelte/SvelteKit Full-Stack Developer

Claude Code Setup

Claude Desktop Setup

Reactive Counter Component

SvelteKit Page with Server Load

Form with Server Action

Writable Store with Persistence

Reviews (0)