svelte

name	svelte
description	SvelteKit: file-based routing, server/client load functions, form actions, stores, Cloudflare Workers deployment, component patterns

SvelteKit Skill

When to activate

• Building a SvelteKit application (full-stack or static)
• Writing Svelte components (reactive declarations, stores, animations)
• Setting up server load functions and form actions
• Deploying SvelteKit to Cloudflare Workers or Vercel
• Choosing between SvelteKit and Next.js for a project

When NOT to use

• React ecosystem projects — use the React skill
• When your team is all React and switching would be costly
• Complex enterprise apps where Next.js ecosystem support matters more

Instructions

Project setup

npm create svelte@latest my-app
# Options: SvelteKit demo / Skeleton / Library
# TypeScript: Yes
# ESLint + Prettier: Yes

npm install
npm run dev

File structure

src/
├── routes/
│   ├── +layout.svelte        # root layout
│   ├── +layout.server.ts     # root server load
│   ├── +page.svelte          # / route
│   ├── +page.server.ts       # server load + actions for /
│   ├── blog/
│   │   ├── +page.svelte      # /blog
│   │   └── [slug]/
│   │       ├── +page.svelte  # /blog/[slug]
│   │       └── +page.server.ts
│   └── api/
│       └── users/
│           └── +server.ts    # API endpoint
├── lib/
│   ├── components/
│   ├── stores/
│   └── utils/
└── app.html                  # HTML shell

Svelte components

<!-- Counter.svelte -->
<script lang="ts">
  // Reactive declarations
  let count = $state(0)               // Svelte 5: runes
  let doubled = $derived(count * 2)  // computed

  // Or Svelte 4 style:
  // let count = 0
  // $: doubled = count * 2

  function increment() { count++ }
</script>

<button onclick={increment}>
  Count: {count} (doubled: {doubled})
</button>