svelte

When to use this skill

Use this skill whenever the user wants to:

• Build Svelte components with reactive declarations and bindings
• Create a SvelteKit application with file-based routing and SSR
• Implement Svelte stores for shared state management
• Add transitions, animations, or lifecycle hooks (onMount, onDestroy)
• Configure Svelte with Vite or deploy a SvelteKit app

How to use this skill

Workflow

1. Set up the project - npm create svelte@latest my-app for SvelteKit or Vite+Svelte
2. Create components - Write .svelte files with script, markup, and style blocks
3. Add reactivity - Use $: reactive declarations and Svelte stores
4. Build and deploy - npm run build with adapter-auto, adapter-node, or adapter-static

Quick-Start Example: Reactive Counter Component

<script>
  let count = 0;
  $: doubled = count * 2;
  $: if (count > 10) console.log('Count is high!');

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

<button on:click={increment}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>Doubled: {doubled}</p>

<style>
  button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: #ff3e00;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>

Store Example: Shared State

// stores.js
import { writable, derived } from 'svelte/store';

export const todos = writable([]);
export const completedCount = derived(todos, $todos =>
  $todos.filter(t => t.done).length
);

<script>
  import { todos, completedCount } from './stores.js';
  let newTodo = '';

  function addTodo() {
    todos.update(t => [...t, { text: newTodo, done: false }]);
    newTodo = '';
  }
</script>

<input bind:value={newTodo} />
<button on:click={addTodo}>Add</button>
<p>Completed: {$completedCount}</p>

Best Practices

1. Keep reactive dependencies explicit - Avoid side effects in $: blocks; use them for derived values
2. Split into small components - Each .svelte file should handle one concern
3. Use stores for shared state - Avoid prop drilling; writable/derived stores are lightweight
4. Add TypeScript - Use <script lang="ts"> for type safety in components
5. Leverage SvelteKit features - Use +page.server.ts for server-side data loading, form actions for mutations

Resources

• Official Docs: https://svelte.dev/docs
• SvelteKit Docs: https://kit.svelte.dev/docs

Keywords

svelte, SvelteKit, reactive, component, store, transition, SSR, Vite, 响应式, 编译时, file-based routing