sveltekit-best-practices

When to use

Use this skill when working with SvelteKit or Svelte 5 code. AI agents are trained on Svelte 4 patterns and frequently generate outdated code using stores, reactive declarations, and export let. This skill enforces Svelte 5 runes, load functions, and form actions.

Critical Rules

1. Use Svelte 5 runes - never Svelte 4 stores or reactive declarations

Wrong (agents do this):

<script>
  import { writable, derived } from 'svelte/store';
  let count = writable(0);
  $: doubled = $count * 2;
  $: if (count > 5) alert('too high');
</script>
<p>{$count}</p>

Correct:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  $effect(() => {
    if (count > 5) alert('too high');
  });
</script>
<p>{count}</p>

Why: Svelte 5 runes ($state, $derived, $effect) replace stores and $: syntax. Agents default to Svelte 4 patterns.

2. Use $state for reactive state - not let with reactive assignments

Wrong:

<script>
  let count = 0;
  count = count + 1;
</script>

Correct:

<script>
  let count = $state(0);
  count = count + 1;
</script>

Why: In Svelte 5, reactivity is opt-in via $state. Plain let is not reactive.

3. Use $derived for computed values - not $: reactive declarations

Wrong:

<script>
  let firstName = $state('John');
  let lastName = $state('Doe');
  $: fullName = `${firstName} ${lastName}`;
</script>

Correct:

<script>
  let firstName = $state('John');
  let lastName = $state('Doe');
  let fullName = $derived(`${firstName} ${lastName}`);
</script>

Why: $: is Svelte 4. Svelte 5 uses $derived for derivations.

4. Use $effect for side effects - not $: reactive statements

Wrong:

<script>
  let count = $state(0);
  $: if (count > 5) console.log('count is high');
</script>

Correct:

<script>
  let count = $state(0);
  $effect(() => {
    if (count > 5) console.log('count is high');
  });
</script>