# Svelte

> Svelte reactive JavaScript framework with compile-time optimization

- Skill: `ffsshhttiikk/svelte` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ffsshhttiikk/svelte`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ffsshhttiikk/svelte/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: ffsshhttiikk (https://skillmd.com/u/ffsshhttiikk)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ffsshhttiikk/svelte

---

## What I do
- Build reactive web applications with less boilerplate
- Use Svelte's reactivity system with stores
- Create component animations and transitions
- Write scoped CSS in components
- Use SvelteKit for full-stack apps
- Handle server-side rendering
- Implement context API for dependency injection

## When to use me
When building highly performant web apps with minimal JavaScript output.

## Component Syntax
```svelte
<script>
  let count = 0
  let doubled = $derived(count * 2)
  
  function increment() {
    count += 1
  }
  
  $: console.log('count is', count)
</script>

<button on:click={increment}>
  Clicks: {count}
  Doubled: {doubled}
</button>

<style>
  button {
    padding: 1rem;
  }
</style>
```

## Stores
```typescript
// stores.ts
import { writable, derived } from 'svelte/store'

export const count = writable(0)

export const doubled = derived(count, $count => $count * 2)

// Custom store
function createTimer() {
  const { subscribe, set, update } = writable(0)
  
  return {
    subscribe,
    start() {
      setInterval(() => update(n => n + 1), 1000)
    },
    reset() {
      set(0)
    }
  }
}

export const timer = createTimer()
```

## Reactive Statements
```svelte
<script>
  let count = 0
  let numbers = [1, 2, 3]
  
  // Runs when count changes
  $: doubled = count * 2
  
  // Runs when any referenced variable changes
  $: {
    console.log('count changed:', count)
    if (count > 10) {
      console.log('count is large!')
    }
  }
  
  // Reactive object destructuring
  $: ({ a, b } = { a: count, b: count * 2 })
</script>
```

## Event Handling
```svelte
<script>
  function handleClick(event) {
    console.log(event.target)
  }
  
  function handleKeydown(event) {
    if (event.key === 'Escape') {
      // handle escape
    }
  }
</script>

<button on:click={handleClick}>Click me</button>
<input on:keydown={handleKeydown} />

<!-- Event modifiers -->
<button on:click|once|preventDefault={handleClick}>
  Click once, prevent default
</button>

<!-- Forward events -->
<button on:click>Forwarded</button>
```

## Lifecycle & Context
```svelte
<script>
  import { onMount, onDestroy } from 'svelte'
  import { setContext, getContext } from 'svelte'
  
  onMount(() => {
    console.log('component mounted')
  })
  
  onDestroy(() => {
    console.log('cleanup')
  })
  
  // Context
  setContext('theme', 'dark')
  const theme = getContext('theme')
</script>
```

## SvelteKit
```typescript
// +page.svelte
<script>
  export let data
</script>

{data.message}

// +page.server.ts
export const load = async ({ params }) => {
  return { message: 'Hello' }
}

// +server.ts (API route)
export const POST = async ({ request }) => {
  const data = await request.formData()
  return new Response('ok')
}
```