From 9998507a089aaff218884944d5608561c8502b4a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 14 Nov 2025 12:03:53 +0100
Subject: [PATCH 1/3] feat: claude skill + marketplace

---
 .claude-plugin/marketplace.json               |  13 +
 .../docs/20-setup/30-remote-setup.md          |   2 +
 documentation/docs/40-claude-plugin/index.md  |   3 +
 documentation/docs/40-claude-plugin/plugin.md |  21 +
 documentation/docs/40-claude-plugin/skill.md  |  11 +
 plugins/svelte/.claude-plugin/plugin.json     |   8 +
 plugins/svelte/.mcp.json                      |   8 +
 .../svelte/skills/svelte-code-writer/SKILL.md | 198 ++++++
 .../references/MIGRATION.md                   | 550 +++++++++++++++
 .../svelte-code-writer/references/PATTERNS.md | 542 ++++++++++++++
 .../svelte-code-writer/references/PITFALLS.md | 354 ++++++++++
 .../svelte-code-writer/references/RUNES.md    | 358 ++++++++++
 .../references/TYPESCRIPT.md                  | 660 ++++++++++++++++++
 13 files changed, 2728 insertions(+)
 create mode 100644 .claude-plugin/marketplace.json
 create mode 100644 documentation/docs/40-claude-plugin/index.md
 create mode 100644 documentation/docs/40-claude-plugin/plugin.md
 create mode 100644 documentation/docs/40-claude-plugin/skill.md
 create mode 100644 plugins/svelte/.claude-plugin/plugin.json
 create mode 100644 plugins/svelte/.mcp.json
 create mode 100644 plugins/svelte/skills/svelte-code-writer/SKILL.md
 create mode 100644 plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md
 create mode 100644 plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md
 create mode 100644 plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md
 create mode 100644 plugins/svelte/skills/svelte-code-writer/references/RUNES.md
 create mode 100644 plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md

diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
new file mode 100644
index 0000000..9ed99ed
--- /dev/null
+++ b/.claude-plugin/marketplace.json
@@ -0,0 +1,13 @@
+{
+	"name": "svelte",
+	"owner": {
+		"name": "Svelte"
+	},
+	"plugins": [
+		{
+			"name": "svelte",
+			"source": "./plugins/svelte",
+			"description": "A plugin for all things svelte development, MCP, skills, and more."
+		}
+	]
+}
diff --git a/documentation/docs/20-setup/30-remote-setup.md b/documentation/docs/20-setup/30-remote-setup.md
index 108c2bf..8f4d3ad 100644
--- a/documentation/docs/20-setup/30-remote-setup.md
+++ b/documentation/docs/20-setup/30-remote-setup.md
@@ -16,6 +16,8 @@ claude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp
 
 You can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.
 
+If you prefer you can also install the `svelte` plugin in [the svelte claude code marketplace](plugin) that will give you both the remote server and a useful [skill](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview).
+
 ## Claude Desktop
 
 - Open Settings > Connectors
diff --git a/documentation/docs/40-claude-plugin/index.md b/documentation/docs/40-claude-plugin/index.md
new file mode 100644
index 0000000..43c987a
--- /dev/null
+++ b/documentation/docs/40-claude-plugin/index.md
@@ -0,0 +1,3 @@
+---
+title: Claude Plugin
+---
diff --git a/documentation/docs/40-claude-plugin/plugin.md b/documentation/docs/40-claude-plugin/plugin.md
new file mode 100644
index 0000000..e6d24b1
--- /dev/null
+++ b/documentation/docs/40-claude-plugin/plugin.md
@@ -0,0 +1,21 @@
+---
+title: Overview
+---
+
+The open source [repository](https://github.com/sveltejs/mcp) containing the code for the MCP server is also a claude code marketplace.
+
+The marketplace allow you to install the `svelte` plugin which will give you both the remote MCP server and a [skill](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) to instruct the LLM on how to properly write svelte 5 code.
+
+## Installation
+
+To add the repository as a marketplace launch claude code and type
+
+```bash
+/plugin marketplace add sveltejs/mcp
+```
+
+once you do that you can install the svelte skill doing
+
+```bash
+/plugin install svelte
+```
diff --git a/documentation/docs/40-claude-plugin/skill.md b/documentation/docs/40-claude-plugin/skill.md
new file mode 100644
index 0000000..1f2dc79
--- /dev/null
+++ b/documentation/docs/40-claude-plugin/skill.md
@@ -0,0 +1,11 @@
+---
+title: Skill
+---
+
+Claude Skills are a set of MD files that live in your `.claude` folder (or that you can upload in your claude web/desktop). They are automatically loaded by Claude when it thinks they are appropriate for the current task.
+
+With those markdown files you can steer the agent behaviours and, in our case, we teach him how to properly write Svelte 5 code. The advantage over the MCP server is that the relevant tokens are only loaded when they are needed (so if you ask the LLM to write a Typescript utility in a Svelte project it will not load the skill in the context).
+
+You can find the skill inside the [`sveltejs/mcp`](https://github.com/sveltejs/mcp/plugins/svelte/skills) repo (it's in the `/plugins/svelte/skills` folder) and you can download it as a zip file to load it in your Claude web/desktop or to extract it inside your `.claude` folder.
+
+If you are using claude code you can also install it through the [svelte marketplace](plugin).
diff --git a/plugins/svelte/.claude-plugin/plugin.json b/plugins/svelte/.claude-plugin/plugin.json
new file mode 100644
index 0000000..5bdb514
--- /dev/null
+++ b/plugins/svelte/.claude-plugin/plugin.json
@@ -0,0 +1,8 @@
+{
+	"name": "svelte",
+	"description": "A plugin for all things svelte development, MCP, skills, and more.",
+	"version": "1.0.0",
+	"author": {
+		"name": "Svelte"
+	}
+}
diff --git a/plugins/svelte/.mcp.json b/plugins/svelte/.mcp.json
new file mode 100644
index 0000000..0b7b5c6
--- /dev/null
+++ b/plugins/svelte/.mcp.json
@@ -0,0 +1,8 @@
+{
+	"mcpServers": {
+		"svelte": {
+			"type": "http",
+			"url": "https://mcp.svelte.dev/mcp"
+		}
+	}
+}
diff --git a/plugins/svelte/skills/svelte-code-writer/SKILL.md b/plugins/svelte/skills/svelte-code-writer/SKILL.md
new file mode 100644
index 0000000..6f465a6
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/SKILL.md
@@ -0,0 +1,198 @@
+---
+name: svelte5-code-writer
+description: Expert guidance for writing proper Svelte 5 code with runes-based reactivity. Use when writing Svelte 5 components, migrating from Svelte 4, or troubleshooting Svelte 5 syntax. Covers $state, $derived, $effect, $props, $bindable, event handling, snippets, TypeScript integration, and common pitfalls.
+---
+
+# Svelte 5 Code Writer
+
+## Quick Reference
+
+Svelte 5 uses **runes** (functions starting with `$`) for explicit reactivity:
+
+```svelte
+<script lang="ts">
+	let count = $state(0); // Reactive state
+	let doubled = $derived(count * 2); // Computed value
+	let { name, age } = $props(); // Component props
+
+	$effect(() => {
+		// Side effects
+		console.log(`Count is ${count}`);
+		return () => console.log('cleanup');
+	});
+</script>
+
+<button onclick={() => count++}>
+	<!-- Event attributes -->
+	{count} × 2 = {doubled}
+</button>
+```
+
+## Core Workflow
+
+1. **Choose the right rune:**
+   - Computing from state? → Use `$derived`
+   - Managing reactive values? → Use `$state`
+   - Side effects (DOM, network, etc.)? → Use `$effect`
+   - Component props? → Use `$props`
+
+2. **Apply the pattern** (see references below for details)
+
+3. **Add TypeScript types** for props and state
+
+## Key Patterns
+
+### State: $state
+
+```svelte
+<script lang="ts">
+	let count = $state(0); // Primitive
+	let user = $state({ name: 'Alice' }); // Object (deeply reactive)
+	let data = $state.raw(largeDataset); // Non-deeply-reactive (performance)
+</script>
+```
+
+### Computed Values: $derived
+
+**Use `$derived` for values computed from other state** (90% of cases):
+
+```svelte
+<script lang="ts">
+	let count = $state(0);
+	let doubled = $derived(count * 2); // Simple
+
+	let total = $derived.by(() => {
+		// Complex
+		return items.reduce((sum, item) => sum + item.value, 0);
+	});
+</script>
+```
+
+### Side Effects: $effect
+
+**Use `$effect` only for side effects, not derivations, try to avoid reassign state in it:**
+
+```svelte
+<script lang="ts">
+	$effect(() => {
+		// DOM manipulation, network calls, subscriptions
+		const interval = setInterval(() => console.log(count), 1000);
+		return () => clearInterval(interval); // Cleanup
+	});
+</script>
+```
+
+### Props: $props
+
+```svelte
+<script lang="ts">
+	interface Props {
+		required: string;
+		optional?: number;
+		callback: (value: string) => void;
+	}
+
+	let { required, optional = 42, callback }: Props = $props();
+</script>
+```
+
+### Two-Way Binding: $bindable
+
+```svelte
+<script lang="ts">
+	let { value = $bindable('') } = $props();
+</script>
+
+<input bind:value />
+```
+
+## Event Handling
+
+**Events are properties** (not directives):
+
+```svelte
+<button onclick={() => count++}>Click</button>
+<button onclick={handleClick}>Click</button>
+
+<!-- Component callbacks -->
+<Child onsubmit={(data) => console.log(data)} />
+```
+
+## Snippets (Replacing Slots)
+
+```svelte
+<!-- Child -->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		header,
+		children,
+	}: {
+		header?: Snippet;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<!-- Parent -->
+<Child>
+	{#snippet header()}
+		<h1>Title</h1>
+	{/snippet}
+
+	Default content here
+</Child>
+
+{@render header?.()}
+{@render children?.()}
+```
+
+## Common Pitfalls
+
+**❌ Don't synchronize state with $effect:**
+
+```svelte
+let doubled = $state(0);
+$effect(() => { doubled = count * 2; });  // Wrong!
+```
+
+**✅ Use $derived instead:**
+
+```svelte
+let doubled = $derived(count * 2); // Correct!
+```
+
+**❌ Don't mutate non-bindable props:**
+
+```svelte
+let {count} = $props(); count++; // Warning!
+```
+
+**✅ Use callbacks or $bindable:**
+
+```svelte
+let {(count, onIncrement)} = $props(); onIncrement(); // Correct!
+```
+
+## Migration from Svelte 4
+
+| Svelte 4                 | Svelte 5                            |
+| ------------------------ | ----------------------------------- |
+| `let count = 0`          | `let count = $state(0)`             |
+| `$: doubled = count * 2` | `let doubled = $derived(count * 2)` |
+| `$: console.log(count)`  | `$effect(() => console.log(count))` |
+| `export let prop`        | `let { prop } = $props()`           |
+| `on:click={handler}`     | `onclick={handler}`                 |
+| `<slot />`               | `{@render children?.()}`            |
+
+## Detailed References
+
+For comprehensive details, see:
+
+- **[RUNES.md](references/RUNES.md)** - Complete runes reference with examples
+- **[PATTERNS.md](references/PATTERNS.md)** - Component patterns and best practices
+- **[PITFALLS.md](references/PITFALLS.md)** - Common mistakes and how to fix them
+- **[MIGRATION.md](references/MIGRATION.md)** - Detailed migration guide from Svelte 4
+- **[TYPESCRIPT.md](references/TYPESCRIPT.md)** - TypeScript patterns and typing
+
+Load these references only when you need detailed information beyond the quick reference above.
diff --git a/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md b/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md
new file mode 100644
index 0000000..ee2497c
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md
@@ -0,0 +1,550 @@
+# Migration Guide: Svelte 4 → Svelte 5
+
+## Overview
+
+Svelte 5 is largely backward compatible. You can mix Svelte 4 and 5 syntax, and migrate incrementally.
+
+## Migration Strategy
+
+1. **Update dependencies** in package.json
+2. **Run migration script**: `npx sv migrate svelte-5`
+3. **Fix manual migrations** (see below)
+4. **Test thoroughly**
+5. **Iterate component by component**
+
+## Automatic Migrations
+
+The migration script handles:
+- `let` → `$state()`
+- `$:` derivations → `$derived()`
+- `$:` effects → `$effect()` or `run()`
+- `export let` → `$props()`
+- `on:event` → `onevent` (for DOM elements)
+- `<slot>` → `{@render children()}`
+- Slot usage → snippets
+
+## Manual Migrations Required
+
+### 1. Component Events (createEventDispatcher)
+
+**Before:**
+```svelte
+<script>
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+  
+  function handleClick() {
+    dispatch('message', { text: 'Hello' });
+  }
+</script>
+
+<button on:click={handleClick}>Send</button>
+```
+
+**After:**
+```svelte
+<script>
+  let { onmessage } = $props();
+  
+  function handleClick() {
+    onmessage?.({ text: 'Hello' });
+  }
+</script>
+
+<button onclick={handleClick}>Send</button>
+```
+
+**Parent usage before:**
+```svelte
+<Child on:message={handleMessage} />
+```
+
+**Parent usage after:**
+```svelte
+<Child onmessage={handleMessage} />
+```
+
+### 2. beforeUpdate/afterUpdate
+
+**Before:**
+```svelte
+<script>
+  import { beforeUpdate, afterUpdate } from 'svelte';
+  
+  beforeUpdate(() => {
+    console.log('before update');
+  });
+  
+  afterUpdate(() => {
+    console.log('after update');
+  });
+</script>
+```
+
+**After:**
+```svelte
+<script>
+  import { tick } from 'svelte';
+  
+  // beforeUpdate → $effect.pre
+  $effect.pre(() => {
+    console.log('before update');
+  });
+  
+  // afterUpdate → $effect + tick
+  $effect(() => {
+    tick().then(() => {
+      console.log('after update');
+    });
+  });
+</script>
+```
+
+### 3. Component Instantiation
+
+**Before:**
+```js
+import App from './App.svelte';
+
+const app = new App({
+  target: document.getElementById('app'),
+  props: { name: 'world' }
+});
+
+app.$set({ name: 'everybody' });
+app.$on('event', callback);
+app.$destroy();
+```
+
+**After:**
+```js
+import { mount, unmount } from 'svelte';
+import App from './App.svelte';
+
+const props = $state({ name: 'world' });
+const app = mount(App, {
+  target: document.getElementById('app'),
+  props
+});
+
+// Instead of $set:
+props.name = 'everybody';
+
+// Instead of $on:
+const app = mount(App, {
+  target: document.getElementById('app'),
+  props,
+  events: { event: callback }
+});
+
+// Instead of $destroy:
+unmount(app);
+```
+
+### 4. Server-Side Rendering
+
+**Before:**
+```js
+import App from './App.svelte';
+
+const { html, css, head } = App.render({ name: 'world' });
+```
+
+**After:**
+```js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const { html, head } = render(App, {
+  props: { name: 'world' }
+});
+```
+
+Note: CSS is no longer returned by default. Set compiler option `css: 'injected'` if needed.
+
+### 5. Stores in Components
+
+If using stores, they still work but consider migrating to runes:
+
+**Before:**
+```svelte
+<script>
+  import { writable } from 'svelte/store';
+  
+  const count = writable(0);
+  
+  function increment() {
+    count.update(n => n + 1);
+  }
+</script>
+
+<button on:click={increment}>
+  {$count}
+</button>
+```
+
+**After (using runes):**
+```svelte
+<script>
+  let count = $state(0);
+  
+  function increment() {
+    count++;
+  }
+</script>
+
+<button onclick={increment}>
+  {count}
+</button>
+```
+
+## Common Migration Patterns
+
+### Pattern 1: Reactive Statements
+
+**Before:**
+```svelte
+<script>
+  let count = 0;
+  $: doubled = count * 2;
+  $: {
+    console.log(`count is ${count}`);
+  }
+  $: if (count > 10) {
+    alert('Too high!');
+  }
+</script>
+```
+
+**After:**
+```svelte
+<script>
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+  
+  $effect(() => {
+    console.log(`count is ${count}`);
+  });
+  
+  $effect(() => {
+    if (count > 10) {
+      alert('Too high!');
+    }
+  });
+</script>
+```
+
+### Pattern 2: Props with Defaults
+
+**Before:**
+```svelte
+<script>
+  export let name = 'world';
+  export let count;
+</script>
+```
+
+**After:**
+```svelte
+<script>
+  let { name = 'world', count } = $props();
+</script>
+```
+
+### Pattern 3: Slot Props
+
+**Before:**
+```svelte
+<!-- Child.svelte -->
+<slot user={{ name: 'Alice', age: 30 }} />
+
+<!-- Parent.svelte -->
+<Child let:user>
+  {user.name} is {user.age}
+</Child>
+```
+
+**After:**
+```svelte
+<!-- Child.svelte -->
+<script>
+  import type { Snippet } from 'svelte';
+  let { children }: { children: Snippet<[User]> } = $props();
+</script>
+
+{@render children({ name: 'Alice', age: 30 })}
+
+<!-- Parent.svelte -->
+<Child>
+  {#snippet children(user)}
+    {user.name} is {user.age}
+  {/snippet}
+</Child>
+```
+
+### Pattern 4: Named Slots
+
+**Before:**
+```svelte
+<!-- Child.svelte -->
+<header><slot name="header" /></header>
+<main><slot /></main>
+<footer><slot name="footer" /></footer>
+
+<!-- Parent.svelte -->
+<Child>
+  <h1 slot="header">Title</h1>
+  <p>Content</p>
+  <p slot="footer">Footer</p>
+</Child>
+```
+
+**After:**
+```svelte
+<!-- Child.svelte -->
+<script>
+  import type { Snippet } from 'svelte';
+  let { header, children, footer }: {
+    header?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+  } = $props();
+</script>
+
+<header>{@render header?.()}</header>
+<main>{@render children?.()}</main>
+<footer>{@render footer?.()}</footer>
+
+<!-- Parent.svelte -->
+<Child>
+  {#snippet header()}
+    <h1>Title</h1>
+  {/snippet}
+  
+  <p>Content</p>
+  
+  {#snippet footer()}
+    <p>Footer</p>
+  {/snippet}
+</Child>
+```
+
+### Pattern 5: Event Forwarding
+
+**Before:**
+```svelte
+<button on:click>Click me</button>
+```
+
+**After:**
+```svelte
+<script>
+  let { onclick } = $props();
+</script>
+
+<button {onclick}>Click me</button>
+```
+
+### Pattern 6: Prop Spreading with Events
+
+**Before:**
+```svelte
+<script>
+  export let disabled = false;
+</script>
+
+<button {...$$restProps} on:click {disabled}>
+  <slot />
+</button>
+```
+
+**After:**
+```svelte
+<script>
+  let { disabled = false, children, ...rest } = $props();
+</script>
+
+<button {disabled} {...rest}>
+  {@render children?.()}
+</button>
+```
+
+## The `run` Function
+
+The migration script may create `run()` calls for `$:` statements it can't determine are safe to convert to `$effect`:
+
+```svelte
+<script>
+  import { run } from 'svelte/legacy';
+  
+  run(() => {
+    // Migrated $: statement
+  });
+</script>
+```
+
+**Action required:** Review each `run()` and convert to:
+- `$derived()` if it's computing a value
+- `$effect()` if it's a side effect
+- Remove if no longer needed
+
+## Compatibility Options
+
+### Keep Svelte 4 Syntax Working
+
+Use `compatibility.componentApi: 4` to keep `new Component()` working:
+
+```js
+// svelte.config.js
+export default {
+  compilerOptions: {
+    compatibility: {
+      componentApi: 4
+    }
+  }
+};
+```
+
+This adds some overhead but helps during migration.
+
+## Breaking Changes in Runes Mode
+
+### 1. Bindings Need $bindable
+
+**Before (Svelte 4):**
+```svelte
+<script>
+  export let value;
+</script>
+```
+
+All props were bindable in parent:
+```svelte
+<Child bind:value />
+```
+
+**After (Svelte 5):**
+```svelte
+<script>
+  let { value = $bindable() } = $props();
+</script>
+```
+
+Only explicitly bindable props can use `bind:`.
+
+### 2. No Implicit Reactivity
+
+**Before:**
+```svelte
+<script>
+  let count = 0; // Implicitly reactive
+</script>
+```
+
+**After:**
+```svelte
+<script>
+  let count = $state(0); // Explicitly reactive
+</script>
+```
+
+### 3. Component Type Changes
+
+**Before:**
+```ts
+import type { SvelteComponent } from 'svelte';
+import MyComponent from './MyComponent.svelte';
+
+let instance: SvelteComponent;
+let ComponentType: typeof SvelteComponent;
+```
+
+**After:**
+```ts
+import type { Component } from 'svelte';
+import MyComponent from './MyComponent.svelte';
+
+let instance: MyComponent;
+let ComponentType: Component<{ prop: string }>;
+```
+
+## Testing Migration
+
+After migrating, test:
+
+1. **All user interactions** - clicks, forms, inputs
+2. **Reactive updates** - ensure UI updates correctly
+3. **Component communication** - props, events (callbacks)
+4. **Lifecycle behavior** - mounting, updating, cleanup
+5. **Conditional rendering** - `{#if}`, `{#each}`, `{#await}`
+
+## Common Migration Issues
+
+### Issue: Events not firing
+
+**Problem:**
+```svelte
+<Child on:click={handler} />  <!-- Svelte 4 syntax -->
+```
+
+**Solution:**
+```svelte
+<Child onclick={handler} />    <!-- Svelte 5 syntax -->
+```
+
+### Issue: Slot not rendering
+
+**Problem:**
+```svelte
+<Child>Content</Child>  <!-- Still using slot in Child -->
+```
+
+**Solution:** Update Child to use snippets:
+```svelte
+<script>
+  let { children } = $props();
+</script>
+{@render children?.()}
+```
+
+### Issue: Derived value not updating
+
+**Problem:**
+```svelte
+let doubled = count * 2;  <!-- Not reactive! -->
+```
+
+**Solution:**
+```svelte
+let doubled = $derived(count * 2);
+```
+
+### Issue: $set no longer exists
+
+**Problem:**
+```js
+componentInstance.$set({ prop: 'value' });
+```
+
+**Solution:** Use reactive props:
+```js
+const props = $state({ prop: 'value' });
+mount(Component, { props });
+props.prop = 'new value';  // Updates component
+```
+
+## Incremental Migration Tips
+
+1. **Start with leaf components** (no children)
+2. **Migrate one component at a time**
+3. **Test after each component**
+4. **Use compatibility mode** during transition
+5. **Update TypeScript types** as you go
+6. **Document custom patterns** your team uses
+
+## Resources
+
+- Run `npx sv migrate svelte-5` for automated migration
+- Check compiler warnings - they guide migration
+- Review Svelte 5 docs: https://svelte.dev/docs
+- Use VS Code extension for real-time feedback
diff --git a/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md b/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md
new file mode 100644
index 0000000..5511edb
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md
@@ -0,0 +1,542 @@
+# Component Patterns and Best Practices
+
+## TypeScript Integration
+
+### Always Use TypeScript
+
+```svelte
+<script lang="ts">
+  interface Props {
+    items: Item[];
+    onSelect: (item: Item) => void;
+  }
+  
+  let { items, onSelect }: Props = $props();
+</script>
+```
+
+### Generic Components
+
+```svelte
+<script lang="ts" generics="T extends { id: number }">
+  interface Props {
+    items: T[];
+    renderItem: Snippet<[T]>;
+  }
+  
+  let { items, renderItem }: Props = $props();
+</script>
+
+{#each items as item (item.id)}
+  {@render renderItem(item)}
+{/each}
+```
+
+## State Management Patterns
+
+### Minimize State, Maximize Derived
+
+**❌ Avoid:**
+```svelte
+<script lang="ts">
+  let items = $state([]);
+  let count = $state(0);
+  let isEmpty = $state(true);
+  
+  $effect(() => {
+    count = items.length;
+    isEmpty = items.length === 0;
+  });
+</script>
+```
+
+**✅ Better:**
+```svelte
+<script lang="ts">
+  let items = $state([]);
+  let count = $derived(items.length);
+  let isEmpty = $derived(items.length === 0);
+</script>
+```
+
+### Extract Reusable Reactive Logic
+
+Use `.svelte.js` or `.svelte.ts` files for shared state:
+
+```ts
+// counter.svelte.ts
+export function createCounter(initial = 0) {
+  let count = $state(initial);
+  let doubled = $derived(count * 2);
+  
+  return {
+    get count() { return count; },
+    get doubled() { return doubled; },
+    increment: () => count++,
+    decrement: () => count--,
+  };
+}
+```
+
+```svelte
+<!-- Component.svelte -->
+<script lang="ts">
+  import { createCounter } from './counter.svelte.ts';
+  
+  const counter = createCounter(0);
+</script>
+
+<button onclick={counter.increment}>
+  {counter.count} (doubled: {counter.doubled})
+</button>
+```
+
+### Class-Based Reactive State
+
+```svelte
+<script lang="ts">
+  class TodoList {
+    items = $state<Todo[]>([]);
+    
+    get completed() {
+      return this.items.filter(t => t.done);
+    }
+    
+    get remaining() {
+      return this.items.filter(t => !t.done);
+    }
+    
+    add(text: string) {
+      this.items.push({ id: Date.now(), text, done: false });
+    }
+    
+    toggle(id: number) {
+      const todo = this.items.find(t => t.id === id);
+      if (todo) todo.done = !todo.done;
+    }
+  }
+  
+  const todos = new TodoList();
+</script>
+```
+
+## Component Composition
+
+### Snippet-Based Composition
+
+```svelte
+<!-- Table.svelte -->
+<script lang="ts" generics="T">
+  import type { Snippet } from 'svelte';
+  
+  interface Props {
+    data: T[];
+    header?: Snippet;
+    row: Snippet<[T]>;
+    footer?: Snippet;
+  }
+  
+  let { data, header, row, footer }: Props = $props();
+</script>
+
+<table>
+  {#if header}
+    <thead>{@render header()}</thead>
+  {/if}
+  
+  <tbody>
+    {#each data as item}
+      <tr>{@render row(item)}</tr>
+    {/each}
+  </tbody>
+  
+  {#if footer}
+    <tfoot>{@render footer()}</tfoot>
+  {/if}
+</table>
+```
+
+Usage:
+
+```svelte
+<Table {data}>
+  {#snippet header()}
+    <tr>
+      <th>Name</th>
+      <th>Age</th>
+    </tr>
+  {/snippet}
+  
+  {#snippet row(person)}
+    <td>{person.name}</td>
+    <td>{person.age}</td>
+  {/snippet}
+  
+  {#snippet footer()}
+    <tr><td colspan="2">Total: {data.length}</td></tr>
+  {/snippet}
+</Table>
+```
+
+### Higher-Order Components Pattern
+
+```svelte
+<!-- WithAuth.svelte -->
+<script lang="ts">
+  import type { Component } from 'svelte';
+  
+  let {
+    component,
+    ...props
+  }: {
+    component: Component;
+    [key: string]: any;
+  } = $props();
+  
+  let isAuthenticated = $state(false);
+  
+  $effect(() => {
+    checkAuth().then(result => isAuthenticated = result);
+  });
+</script>
+
+{#if isAuthenticated}
+  <svelte:component this={component} {...props} />
+{:else}
+  <p>Please log in</p>
+{/if}
+```
+
+## Event Handling Patterns
+
+### Named Event Handlers
+
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  
+  function handleIncrement() {
+    count++;
+  }
+  
+  function handleDecrement() {
+    count--;
+  }
+  
+  function handleReset() {
+    count = 0;
+  }
+</script>
+
+<button onclick={handleIncrement}>+</button>
+<button onclick={handleDecrement}>-</button>
+<button onclick={handleReset}>Reset</button>
+```
+
+### Event Delegation Pattern
+
+For many similar elements:
+
+```svelte
+<script lang="ts">
+  let items = $state(['a', 'b', 'c']);
+  
+  function handleClick(event: MouseEvent) {
+    const button = (event.target as HTMLElement).closest('button');
+    if (button) {
+      const value = button.dataset.value;
+      console.log('Clicked:', value);
+    }
+  }
+</script>
+
+<div onclick={handleClick}>
+  {#each items as item}
+    <button data-value={item}>{item}</button>
+  {/each}
+</div>
+```
+
+### Custom Event Handlers (Callbacks)
+
+```svelte
+<!-- Child.svelte -->
+<script lang="ts">
+  interface Props {
+    onSuccess?: (data: Data) => void;
+    onError?: (error: Error) => void;
+  }
+  
+  let { onSuccess, onError }: Props = $props();
+  
+  async function submit() {
+    try {
+      const data = await api.submit();
+      onSuccess?.(data);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  }
+</script>
+```
+
+## Form Patterns
+
+### Two-Way Form Binding
+
+```svelte
+<script lang="ts">
+  interface FormData {
+    name: string;
+    email: string;
+    age: number;
+  }
+  
+  let form = $state<FormData>({
+    name: '',
+    email: '',
+    age: 18
+  });
+  
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    console.log(form);
+  }
+</script>
+
+<form onsubmit={handleSubmit}>
+  <input bind:value={form.name} placeholder="Name" />
+  <input bind:value={form.email} type="email" placeholder="Email" />
+  <input bind:value={form.age} type="number" />
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Custom Form Components
+
+```svelte
+<!-- Input.svelte -->
+<script lang="ts">
+  let {
+    value = $bindable(''),
+    label,
+    type = 'text',
+    error,
+    ...rest
+  }: {
+    value?: string;
+    label: string;
+    type?: string;
+    error?: string;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<label>
+  <span>{label}</span>
+  <input {type} bind:value {...rest} />
+  {#if error}
+    <span class="error">{error}</span>
+  {/if}
+</label>
+```
+
+## Async Patterns
+
+### Loading States
+
+```svelte
+<script lang="ts">
+  let promise = $state<Promise<Data>>(fetchData());
+</script>
+
+{#await promise}
+  <p>Loading...</p>
+{:then data}
+  <DataView {data} />
+{:catch error}
+  <p>Error: {error.message}</p>
+{/await}
+```
+
+### Manual Loading State
+
+```svelte
+<script lang="ts">
+  let data = $state<Data | null>(null);
+  let loading = $state(false);
+  let error = $state<Error | null>(null);
+  
+  async function load() {
+    loading = true;
+    error = null;
+    try {
+      data = await fetchData();
+    } catch (e) {
+      error = e as Error;
+    } finally {
+      loading = false;
+    }
+  }
+  
+  $effect(() => {
+    load();
+  });
+</script>
+
+{#if loading}
+  <p>Loading...</p>
+{:else if error}
+  <p>Error: {error.message}</p>
+{:else if data}
+  <DataView {data} />
+{/if}
+```
+
+## Styling Patterns
+
+### Dynamic Classes
+
+```svelte
+<script lang="ts">
+  let active = $state(true);
+  let large = $state(false);
+  let disabled = $state(false);
+</script>
+
+<!-- Object syntax (5.16+) -->
+<div class={{ active, large, disabled }}>Content</div>
+
+<!-- Array syntax -->
+<div class={[
+  'base-class',
+  active && 'active',
+  large && 'large',
+  disabled && 'disabled'
+]}>Content</div>
+
+<!-- Combined -->
+<div class={['base', { active, large }]}>Content</div>
+```
+
+### Component Style Props
+
+```svelte
+<!-- Button.svelte -->
+<script lang="ts">
+  let {
+    variant = 'primary',
+    size = 'medium',
+    children
+  }: {
+    variant?: 'primary' | 'secondary' | 'danger';
+    size?: 'small' | 'medium' | 'large';
+    children: Snippet;
+  } = $props();
+</script>
+
+<button class={{ [variant]: true, [size]: true }}>
+  {@render children()}
+</button>
+
+<style>
+  button {
+    padding: 0.5rem 1rem;
+  }
+  
+  .primary { background: blue; }
+  .secondary { background: gray; }
+  .danger { background: red; }
+  
+  .small { font-size: 0.875rem; }
+  .medium { font-size: 1rem; }
+  .large { font-size: 1.125rem; }
+</style>
+```
+
+## Performance Patterns
+
+### Use Keys in Lists
+
+```svelte
+{#each items as item (item.id)}
+  <Item {item} />
+{/each}
+```
+
+### Use $state.raw for Large Non-Reactive Data
+
+```svelte
+<script lang="ts">
+  // Large read-only dataset
+  let bigData = $state.raw(loadHugeDataset());
+</script>
+```
+
+### Lazy Loading Components
+
+```svelte
+<script lang="ts">
+  let HeavyComponent = $state<Component | null>(null);
+  let show = $state(false);
+  
+  $effect(() => {
+    if (show && !HeavyComponent) {
+      import('./HeavyComponent.svelte').then(m => {
+        HeavyComponent = m.default;
+      });
+    }
+  });
+</script>
+
+{#if show && HeavyComponent}
+  <HeavyComponent />
+{/if}
+```
+
+## Testing Patterns
+
+```typescript
+import { mount } from 'svelte';
+import { expect, test } from 'vitest';
+import Component from './Component.svelte';
+
+test('increments counter', async () => {
+  const target = document.createElement('div');
+  const instance = mount(Component, { target });
+  
+  const button = target.querySelector('button');
+  button?.click();
+  
+  await new Promise(resolve => setTimeout(resolve, 0));
+  
+  expect(target.textContent).toContain('1');
+});
+```
+
+## Accessibility Patterns
+
+```svelte
+<script lang="ts">
+  let menuOpen = $state(false);
+  let buttonId = $props.id();
+</script>
+
+<button
+  id={buttonId}
+  onclick={() => menuOpen = !menuOpen}
+  aria-expanded={menuOpen}
+  aria-controls="menu-{buttonId}"
+>
+  Menu
+</button>
+
+<nav
+  id="menu-{buttonId}"
+  hidden={!menuOpen}
+  aria-labelledby={buttonId}
+>
+  <a href="/home">Home</a>
+  <a href="/about">About</a>
+</nav>
+```
diff --git a/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md b/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md
new file mode 100644
index 0000000..10fe73e
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md
@@ -0,0 +1,354 @@
+# Common Pitfalls
+
+## 1. Using $effect Instead of $derived
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  let doubled = $state(0);
+  
+  $effect(() => {
+    doubled = count * 2;  // Synchronizing state = bad!
+  });
+</script>
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+</script>
+```
+
+## 2. Mutating Non-Bindable Props
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let { count } = $props();
+  
+  function increment() {
+    count++;  // Warning: ownership_invalid_mutation
+  }
+</script>
+```
+
+**✅ Correct Option 1 - Callback:**
+```svelte
+<script lang="ts">
+  let { count, onIncrement } = $props();
+</script>
+
+<button onclick={onIncrement}>+</button>
+```
+
+**✅ Correct Option 2 - $bindable:**
+```svelte
+<script lang="ts">
+  let { count = $bindable(0) } = $props();
+</script>
+
+<button onclick={() => count++}>+</button>
+
+<!-- Parent must bind: -->
+<Child bind:count={value} />
+```
+
+## 3. Accessing Undefined DOM References
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let canvas: HTMLCanvasElement;
+  
+  // canvas is undefined during initialization!
+  const ctx = canvas.getContext('2d');
+</script>
+
+<canvas bind:this={canvas}></canvas>
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let canvas: HTMLCanvasElement;
+  
+  $effect(() => {
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      // Use ctx...
+    }
+  });
+</script>
+
+<canvas bind:this={canvas}></canvas>
+```
+
+## 4. Missing Keys in Lists
+
+**❌ Wrong:**
+```svelte
+{#each items as item}
+  <div>{item.name}</div>
+{/each}
+```
+
+**✅ Correct:**
+```svelte
+{#each items as item (item.id)}
+  <div>{item.name}</div>
+{/each}
+```
+
+## 5. Using on: Event Directive
+
+**❌ Wrong (Svelte 4 syntax):**
+```svelte
+<button on:click={handler}>Click</button>
+<button on:click|preventDefault={handler}>Click</button>
+```
+
+**✅ Correct:**
+```svelte
+<button onclick={handler}>Click</button>
+<button onclick={(e) => { e.preventDefault(); handler(e); }}>Click</button>
+```
+
+## 6. Using export let for Props
+
+**❌ Wrong (Svelte 4 syntax):**
+```svelte
+<script lang="ts">
+  export let name: string;
+  export let age = 18;
+</script>
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let { name, age = 18 }: { name: string; age?: number } = $props();
+</script>
+```
+
+## 7. Using <slot> Instead of Snippets
+
+**❌ Wrong (deprecated):**
+```svelte
+<!-- Child -->
+<slot name="header" />
+<slot />
+```
+
+**✅ Correct:**
+```svelte
+<!-- Child -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { header, children }: {
+    header?: Snippet;
+    children?: Snippet;
+  } = $props();
+</script>
+
+{@render header?.()}
+{@render children?.()}
+```
+
+## 8. Using createEventDispatcher
+
+**❌ Wrong (deprecated):**
+```svelte
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+  
+  function handleClick() {
+    dispatch('click', { value: 42 });
+  }
+</script>
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let { onclick } = $props();
+  
+  function handleClick() {
+    onclick?.({ value: 42 });
+  }
+</script>
+```
+
+## 9. Not Handling Undefined Snippets
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let { header } = $props();
+</script>
+
+{@render header()}  <!-- Error if not provided! -->
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let { header } = $props();
+</script>
+
+{@render header?.()}  <!-- Optional chaining -->
+
+<!-- Or with fallback: -->
+{#if header}
+  {@render header()}
+{:else}
+  <h1>Default Header</h1>
+{/if}
+```
+
+## 10. Destructuring Props Without Types
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let { name, age } = $props();  // No type safety!
+</script>
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  interface Props {
+    name: string;
+    age: number;
+  }
+  
+  let { name, age }: Props = $props();
+</script>
+```
+
+## 11. Making Everything Bindable
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let {
+    name = $bindable(),
+    age = $bindable(),
+    email = $bindable()
+  } = $props();
+</script>
+```
+
+Only use `$bindable()` when truly needed for two-way binding.
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let {
+    name,           // Read-only props
+    age,
+    email,
+    value = $bindable()  // Only this needs binding
+  } = $props();
+</script>
+```
+
+## 12. Using Plain let for Reactive Values
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let count = 0;  // Not reactive in Svelte 5!
+</script>
+
+<button onclick={() => count++}>
+  {count}  <!-- Won't update -->
+</button>
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+  {count}
+</button>
+```
+
+## 13. Infinite Effect Loops
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  
+  $effect(() => {
+    count = count + 1;  // Infinite loop!
+  });
+</script>
+```
+
+Use `untrack` if you must read without tracking:
+
+```svelte
+<script lang="ts">
+  import { untrack } from 'svelte';
+  
+  let count = $state(0);
+  
+  $effect(() => {
+    const current = untrack(() => count);
+    if (current < 10) {
+      count = current + 1;  // Won't cause infinite loop
+    }
+  });
+</script>
+```
+
+## 14. Forgetting Cleanup in Effects
+
+**❌ Wrong:**
+```svelte
+<script lang="ts">
+  $effect(() => {
+    const interval = setInterval(() => console.log('tick'), 1000);
+    // No cleanup! Memory leak!
+  });
+</script>
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  $effect(() => {
+    const interval = setInterval(() => console.log('tick'), 1000);
+    return () => clearInterval(interval);
+  });
+</script>
+```
+
+## 15. Using <svelte:component>
+
+**❌ Wrong (unnecessary):**
+```svelte
+<script lang="ts">
+  let Component = $state(ComponentA);
+</script>
+
+<svelte:component this={Component} />
+```
+
+**✅ Correct:**
+```svelte
+<script lang="ts">
+  let Component = $state(ComponentA);
+</script>
+
+<Component />  <!-- Reactive in Svelte 5! -->
+```
diff --git a/plugins/svelte/skills/svelte-code-writer/references/RUNES.md b/plugins/svelte/skills/svelte-code-writer/references/RUNES.md
new file mode 100644
index 0000000..f337d84
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/RUNES.md
@@ -0,0 +1,358 @@
+# Runes Reference
+
+## $state
+
+Create reactive state that updates the UI when changed.
+
+### Basic Usage
+
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  let user = $state({ name: 'Alice', age: 30 });
+</script>
+```
+
+### Deep Reactivity
+
+Objects and arrays become deeply reactive proxies:
+
+```svelte
+<script lang="ts">
+  let todos = $state([{ done: false, text: 'Learn Svelte 5' }]);
+  
+  // These trigger reactivity:
+  todos[0].done = true;
+  todos.push({ done: false, text: 'Build app' });
+</script>
+```
+
+### In Classes
+
+```svelte
+<script lang="ts">
+  class Todo {
+    done = $state(false);
+    text = $state('');
+    
+    constructor(text: string) {
+      this.text = $state(text);  // Or initialize here
+    }
+  }
+</script>
+```
+
+### $state.raw
+
+Skip deep reactivity for performance:
+
+```svelte
+<script lang="ts">
+  let bigData = $state.raw(hugeDataset);  // Not deeply reactive
+  
+  // Must reassign to update:
+  bigData = { ...bigData, newProp: 'value' };
+</script>
+```
+
+### $state.snapshot
+
+Get non-reactive snapshot:
+
+```svelte
+<script lang="ts">
+  let data = $state({ count: 0 });
+  console.log($state.snapshot(data));  // Plain object
+</script>
+```
+
+## $derived
+
+Compute values from other state. **Always prefer $derived over $effect for computations.**
+
+### Basic Usage
+
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+  let squared = $derived(count ** 2);
+</script>
+```
+
+### $derived.by
+
+For complex computations:
+
+```svelte
+<script lang="ts">
+  let items = $state([/* ... */]);
+  
+  let total = $derived.by(() => {
+    let sum = 0;
+    for (const item of items) {
+      sum += item.price * item.quantity;
+    }
+    return sum;
+  });
+</script>
+```
+
+### Dependency Tracking
+
+Dependencies are tracked at runtime:
+
+```svelte
+<script lang="ts">
+  let condition = $state(true);
+  let a = $state(1);
+  let b = $state(2);
+  
+  // Only depends on what's actually read
+  let result = $derived(condition ? a : b);
+  // Changes to `a` only update when condition is true
+</script>
+```
+
+### Overriding Derived Values
+
+Since Svelte 5.25, deriveds can be reassigned temporarily:
+
+```svelte
+<script lang="ts">
+  let { post } = $props();
+  let likes = $derived(post.likes);
+  
+  async function optimisticLike() {
+    likes += 1;  // Override temporarily
+    try {
+      await apiCall();
+    } catch {
+      likes -= 1;  // Roll back
+    }
+  }
+</script>
+```
+
+## $effect
+
+Run side effects when dependencies change. **Use sparingly - most "effects" should be $derived.**
+
+### Basic Pattern
+
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  
+  $effect(() => {
+    // Side effect code
+    console.log(`Count: ${count}`);
+    
+    // Optional cleanup
+    return () => console.log('Cleaning up');
+  });
+</script>
+```
+
+### Timing
+
+Effects run:
+- After component mounts
+- After state changes (in microtask)
+- After DOM updates
+
+### Common Use Cases
+
+**Canvas drawing:**
+```svelte
+<script lang="ts">
+  let canvas: HTMLCanvasElement;
+  let color = $state('#ff3e00');
+  
+  $effect(() => {
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 100, 100);
+  });
+</script>
+
+<canvas bind:this={canvas}></canvas>
+```
+
+**Intervals/timers:**
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  let running = $state(true);
+  
+  $effect(() => {
+    if (!running) return;
+    
+    const interval = setInterval(() => count++, 1000);
+    return () => clearInterval(interval);
+  });
+</script>
+```
+
+**Network requests:**
+```svelte
+<script lang="ts">
+  let userId = $state(1);
+  let userData = $state(null);
+  
+  $effect(() => {
+    fetch(`/api/users/${userId}`)
+      .then(r => r.json())
+      .then(data => userData = data);
+  });
+</script>
+```
+
+### $effect.pre
+
+Run before DOM updates:
+
+```svelte
+<script lang="ts">
+  import { tick } from 'svelte';
+  
+  let div: HTMLDivElement;
+  let messages = $state<string[]>([]);
+  
+  $effect.pre(() => {
+    if (!div) return;
+    messages.length;  // Track dependency
+    
+    // Auto-scroll if near bottom
+    if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
+      tick().then(() => div.scrollTo(0, div.scrollHeight));
+    }
+  });
+</script>
+```
+
+### Dependency Management
+
+Dependencies are tracked automatically:
+
+```svelte
+<script lang="ts">
+  let a = $state(1);
+  let b = $state(2);
+  let condition = $state(true);
+  
+  $effect(() => {
+    if (condition) {
+      console.log(a);  // Only `a` and `condition` are dependencies
+    } else {
+      console.log(b);  // Only `b` and `condition` are dependencies
+    }
+  });
+</script>
+```
+
+To exempt something from tracking, use `untrack`:
+
+```svelte
+<script lang="ts">
+  import { untrack } from 'svelte';
+  
+  let count = $state(0);
+  let other = $state(0);
+  
+  $effect(() => {
+    console.log(count);  // Tracked
+    console.log(untrack(() => other));  // Not tracked
+  });
+</script>
+```
+
+## $props
+
+Receive data from parent components.
+
+### Basic Pattern
+
+```svelte
+<script lang="ts">
+  interface Props {
+    required: string;
+    optional?: number;
+    callback?: (value: string) => void;
+  }
+  
+  let { required, optional = 42, callback }: Props = $props();
+</script>
+```
+
+### Rest Props
+
+```svelte
+<script lang="ts">
+  let { name, ...rest } = $props();
+</script>
+
+<div {...rest}>{name}</div>
+```
+
+### Renaming
+
+```svelte
+<script lang="ts">
+  let { class: className, for: htmlFor } = $props();
+</script>
+```
+
+### Generic Props
+
+```svelte
+<script lang="ts" generics="T extends { id: number }">
+  interface Props {
+    items: T[];
+    onSelect: (item: T) => void;
+  }
+  
+  let { items, onSelect }: Props = $props();
+</script>
+```
+
+## $bindable
+
+Make props two-way bindable.
+
+### Basic Pattern
+
+```svelte
+<script lang="ts">
+  let { value = $bindable(''), disabled = false } = $props();
+</script>
+
+<input bind:value {disabled} />
+```
+
+### With Fallback
+
+Fallback is used when prop is not bound:
+
+```svelte
+<script lang="ts">
+  let { value = $bindable('default') } = $props();
+</script>
+
+<!-- Parent can use or not use bind: -->
+<Child value="static" />          <!-- Uses 'static' -->
+<Child bind:value={parentValue} /> <!-- Binds to parent -->
+<Child />                         <!-- Uses 'default' -->
+```
+
+### Function Bindings
+
+```svelte
+<script lang="ts">
+  let { value = $bindable() } = $props();
+</script>
+
+<!-- Parent can use function binding -->
+<Child bind:value={() => value, (v) => value = v.toUpperCase()} />
+```
diff --git a/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md b/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md
new file mode 100644
index 0000000..97c44f9
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md
@@ -0,0 +1,660 @@
+# TypeScript Patterns
+
+## Basic Setup
+
+### Component with Types
+
+```svelte
+<script lang="ts">
+  interface Props {
+    name: string;
+    age: number;
+    email?: string;
+  }
+  
+  let { name, age, email }: Props = $props();
+</script>
+```
+
+### Inline Types
+
+For simple components:
+
+```svelte
+<script lang="ts">
+  let { name, age }: { name: string; age: number } = $props();
+</script>
+```
+
+## Typing $state
+
+### Basic State
+
+```svelte
+<script lang="ts">
+  let count: number = $state(0);
+  let name: string = $state('Alice');
+  let user: User | null = $state(null);
+</script>
+```
+
+### State with Undefined
+
+```svelte
+<script lang="ts">
+  // Will be set later
+  let data = $state<Data | undefined>();
+  
+  $effect(() => {
+    fetchData().then(d => data = d);
+  });
+</script>
+```
+
+### Arrays and Objects
+
+```svelte
+<script lang="ts">
+  interface Todo {
+    id: number;
+    text: string;
+    done: boolean;
+  }
+  
+  let todos = $state<Todo[]>([]);
+  let user = $state<User>({ name: '', email: '' });
+</script>
+```
+
+### Class State
+
+```svelte
+<script lang="ts">
+  class Counter {
+    // Will be initialized in constructor
+    count = $state() as number;
+    
+    constructor(initial: number) {
+      this.count = initial;
+    }
+    
+    increment() {
+      this.count++;
+    }
+  }
+</script>
+```
+
+## Typing $derived
+
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  
+  // Type is inferred
+  let doubled = $derived(count * 2);
+  
+  // Explicit type
+  let message: string = $derived(`Count is ${count}`);
+  
+  // Complex derivation
+  let summary = $derived.by((): Summary => {
+    return {
+      count,
+      doubled: count * 2,
+      status: count > 10 ? 'high' : 'low'
+    };
+  });
+</script>
+```
+
+## Typing $props
+
+### Basic Props Interface
+
+```svelte
+<script lang="ts">
+  interface Props {
+    // Required props
+    id: number;
+    name: string;
+    
+    // Optional props
+    email?: string;
+    age?: number;
+    
+    // Props with defaults (optional)
+    role?: 'admin' | 'user';
+    active?: boolean;
+    
+    // Functions
+    onClick?: (event: MouseEvent) => void;
+    onSubmit: (data: FormData) => void;
+    
+    // Snippets
+    children?: Snippet;
+    header?: Snippet;
+    row?: Snippet<[Item]>;
+  }
+  
+  let {
+    id,
+    name,
+    email,
+    age,
+    role = 'user',
+    active = true,
+    onClick,
+    onSubmit,
+    children,
+    header,
+    row
+  }: Props = $props();
+</script>
+```
+
+### Generic Props
+
+```svelte
+<script lang="ts" generics="T extends { id: number }">
+  interface Props {
+    items: T[];
+    onSelect: (item: T) => void;
+    renderItem?: Snippet<[T]>;
+  }
+  
+  let { items, onSelect, renderItem }: Props = $props();
+</script>
+
+{#each items as item (item.id)}
+  <button onclick={() => onSelect(item)}>
+    {#if renderItem}
+      {@render renderItem(item)}
+    {:else}
+      {item.id}
+    {/if}
+  </button>
+{/each}
+```
+
+### Multiple Generics
+
+```svelte
+<script lang="ts" generics="T, U extends keyof T">
+  interface Props {
+    data: T;
+    key: U;
+  }
+  
+  let { data, key }: Props = $props();
+</script>
+
+<p>{data[key]}</p>
+```
+
+### Generic with Constraints
+
+```svelte
+<script lang="ts" generics="T extends Record<string, any>">
+  interface Props {
+    data: T;
+    keys: Array<keyof T>;
+  }
+  
+  let { data, keys }: Props = $props();
+</script>
+
+{#each keys as key}
+  <div>{key}: {data[key]}</div>
+{/each}
+```
+
+## Typing Snippets
+
+### Basic Snippet
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+{@render children?.()}
+```
+
+### Snippet with Parameters
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  interface User {
+    id: number;
+    name: string;
+  }
+  
+  let { row }: { row: Snippet<[User]> } = $props();
+  let users: User[] = [/* ... */];
+</script>
+
+{#each users as user}
+  {@render row(user)}
+{/each}
+```
+
+### Multiple Parameters
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  let {
+    cell
+  }: {
+    cell: Snippet<[number, number, string]>  // row, col, value
+  } = $props();
+</script>
+
+{@render cell(0, 0, 'A1')}
+```
+
+### Optional Snippets
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  let {
+    header,
+    footer
+  }: {
+    header?: Snippet;
+    footer?: Snippet;
+  } = $props();
+</script>
+
+{@render header?.()}
+<main>Content</main>
+{@render footer?.()}
+```
+
+## Typing $bindable
+
+```svelte
+<script lang="ts">
+  let {
+    value = $bindable(''),
+    count = $bindable(0)
+  }: {
+    value?: string;
+    count?: number;
+  } = $props();
+</script>
+```
+
+## Component Types
+
+### Component Type
+
+```svelte
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import ComponentA from './A.svelte';
+  import ComponentB from './B.svelte';
+  
+  // Type for dynamic component
+  let Current: Component<{ name: string }> = $state(ComponentA);
+</script>
+
+<Current name="test" />
+```
+
+### ComponentProps Type
+
+Extract props from a component:
+
+```svelte
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import MyComponent from './MyComponent.svelte';
+  
+  type MyProps = ComponentProps<typeof MyComponent>;
+  
+  const props: MyProps = {
+    name: 'Alice',
+    age: 30
+  };
+</script>
+
+<MyComponent {...props} />
+```
+
+### Component Instance Type
+
+```svelte
+<script lang="ts">
+  import MyComponent from './MyComponent.svelte';
+  
+  let instance: MyComponent;
+</script>
+
+<MyComponent bind:this={instance} />
+```
+
+## Event Handler Types
+
+### DOM Events
+
+```svelte
+<script lang="ts">
+  function handleClick(event: MouseEvent) {
+    const button = event.currentTarget as HTMLButtonElement;
+    console.log(button.textContent);
+  }
+  
+  function handleInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    console.log(input.value);
+  }
+  
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    const form = event.currentTarget as HTMLFormElement;
+    const formData = new FormData(form);
+  }
+</script>
+
+<button onclick={handleClick}>Click</button>
+<input oninput={handleInput} />
+<form onsubmit={handleSubmit}>...</form>
+```
+
+### Custom Event Callbacks
+
+```svelte
+<script lang="ts">
+  interface Events {
+    click?: (event: MouseEvent) => void;
+    submit?: (data: FormData) => void;
+    change?: (value: string) => void;
+  }
+  
+  let { click, submit, change }: Events = $props();
+</script>
+```
+
+## Typing with HTML Elements
+
+### Element References
+
+```svelte
+<script lang="ts">
+  let div: HTMLDivElement;
+  let input: HTMLInputElement;
+  let canvas: HTMLCanvasElement;
+  
+  $effect(() => {
+    if (div) {
+      console.log(div.offsetWidth);
+    }
+    
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      // ctx is CanvasRenderingContext2D | null
+    }
+  });
+</script>
+
+<div bind:this={div}>Content</div>
+<input bind:this={input} />
+<canvas bind:this={canvas}></canvas>
+```
+
+### HTML Attributes
+
+Extend HTML attributes for custom elements:
+
+```ts
+// app.d.ts
+import type { HTMLAttributes } from 'svelte/elements';
+
+declare module 'svelte/elements' {
+  export interface SvelteHTMLElements {
+    'custom-element': HTMLAttributes<HTMLElement> & {
+      'custom-prop'?: string;
+    };
+  }
+}
+```
+
+## Typing Actions
+
+```svelte
+<script lang="ts">
+  import type { Action } from 'svelte/action';
+  
+  interface ClickOutsideParams {
+    enabled: boolean;
+    callback: () => void;
+  }
+  
+  const clickOutside: Action<HTMLElement, ClickOutsideParams> = (
+    node,
+    params
+  ) => {
+    function handleClick(event: MouseEvent) {
+      if (params.enabled && !node.contains(event.target as Node)) {
+        params.callback();
+      }
+    }
+    
+    $effect(() => {
+      document.addEventListener('click', handleClick);
+      return () => document.removeEventListener('click', handleClick);
+    });
+  };
+</script>
+
+<div use:clickOutside={{ enabled: true, callback: () => {} }}>
+  Content
+</div>
+```
+
+## Wrapper Components
+
+### Extending HTML Element Props
+
+```svelte
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  
+  interface Props extends HTMLButtonAttributes {
+    variant?: 'primary' | 'secondary';
+  }
+  
+  let { variant = 'primary', children, ...rest }: Props = $props();
+</script>
+
+<button class={variant} {...rest}>
+  {@render children?.()}
+</button>
+```
+
+### Generic Wrapper
+
+```svelte
+<script lang="ts">
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  
+  let {
+    as = 'div',
+    children,
+    ...rest
+  }: {
+    as?: keyof SvelteHTMLElements;
+    children?: Snippet;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<svelte:element this={as} {...rest}>
+  {@render children?.()}
+</svelte:element>
+```
+
+## Store Types (Legacy)
+
+If still using stores:
+
+```svelte
+<script lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+  
+  interface User {
+    name: string;
+    email: string;
+  }
+  
+  const user: Writable<User | null> = writable(null);
+</script>
+
+{#if $user}
+  <p>{$user.name}</p>
+{/if}
+```
+
+## Advanced Patterns
+
+### Discriminated Unions
+
+```svelte
+<script lang="ts">
+  type State =
+    | { status: 'idle' }
+    | { status: 'loading' }
+    | { status: 'success'; data: Data }
+    | { status: 'error'; error: Error };
+  
+  let state = $state<State>({ status: 'idle' });
+</script>
+
+{#if state.status === 'loading'}
+  <p>Loading...</p>
+{:else if state.status === 'success'}
+  <DataView data={state.data} />
+{:else if state.status === 'error'}
+  <p>Error: {state.error.message}</p>
+{/if}
+```
+
+### Conditional Props
+
+```svelte
+<script lang="ts">
+  type Props =
+    | { mode: 'view'; data: Data }
+    | { mode: 'edit'; data: Data; onSave: (data: Data) => void };
+  
+  let props = $props() as Props;
+</script>
+
+{#if props.mode === 'edit'}
+  <button onclick={() => props.onSave(props.data)}>Save</button>
+{/if}
+```
+
+### Type Guards
+
+```svelte
+<script lang="ts">
+  function isUser(value: unknown): value is User {
+    return (
+      typeof value === 'object' &&
+      value !== null &&
+      'name' in value &&
+      'email' in value
+    );
+  }
+  
+  let data: unknown = $state(null);
+  
+  $effect(() => {
+    if (isUser(data)) {
+      // data is User here
+      console.log(data.name);
+    }
+  });
+</script>
+```
+
+## tsconfig.json Settings
+
+Recommended settings:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}
+```
+
+## Common Type Issues
+
+### Issue: Type not inferred in $derived
+
+```svelte
+<script lang="ts">
+  let items = $state<Item[]>([]);
+  
+  // Type not inferred automatically
+  let first = $derived.by(() => {
+    return items[0]; // May need explicit return type
+  });
+  
+  // Better: Add explicit type
+  let first = $derived.by((): Item | undefined => {
+    return items[0];
+  });
+</script>
+```
+
+### Issue: Snippet parameter types
+
+```svelte
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  // Must specify tuple type for parameters
+  let { row }: { row: Snippet<[Item]> } = $props();
+  
+  // Not: Snippet<Item> (incorrect)
+</script>
+```
+
+### Issue: Generic component props
+
+```svelte
+<script lang="ts" generics="T">
+  // Must constrain generic if accessing properties
+  interface Props {
+    items: T[]; // Works
+    getKey: (item: T) => string; // Works
+  }
+  
+  // If you need to access item.id:
+  // generics="T extends { id: string }"
+</script>
+```

From ddfb0fe3aae76e5bf917029dbbcda5a538c2d93a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 14 Nov 2025 12:08:45 +0100
Subject: [PATCH 2/3] fix: lint

---
 .../references/MIGRATION.md                   | 300 ++++----
 .../svelte-code-writer/references/PATTERNS.md | 581 +++++++--------
 .../svelte-code-writer/references/PITFALLS.md | 242 ++++---
 .../svelte-code-writer/references/RUNES.md    | 293 ++++----
 .../references/TYPESCRIPT.md                  | 670 +++++++++---------
 5 files changed, 1090 insertions(+), 996 deletions(-)

diff --git a/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md b/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md
index ee2497c..961b0be 100644
--- a/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md
+++ b/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md
@@ -15,6 +15,7 @@ Svelte 5 is largely backward compatible. You can mix Svelte 4 and 5 syntax, and
 ## Automatic Migrations
 
 The migration script handles:
+
 - `let` → `$state()`
 - `$:` derivations → `$derived()`
 - `$:` effects → `$effect()` or `run()`
@@ -28,38 +29,42 @@ The migration script handles:
 ### 1. Component Events (createEventDispatcher)
 
 **Before:**
+
 ```svelte
 <script>
-  import { createEventDispatcher } from 'svelte';
-  const dispatch = createEventDispatcher();
-  
-  function handleClick() {
-    dispatch('message', { text: 'Hello' });
-  }
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	function handleClick() {
+		dispatch('message', { text: 'Hello' });
+	}
 </script>
 
 <button on:click={handleClick}>Send</button>
 ```
 
 **After:**
+
 ```svelte
 <script>
-  let { onmessage } = $props();
-  
-  function handleClick() {
-    onmessage?.({ text: 'Hello' });
-  }
+	let { onmessage } = $props();
+
+	function handleClick() {
+		onmessage?.({ text: 'Hello' });
+	}
 </script>
 
 <button onclick={handleClick}>Send</button>
 ```
 
 **Parent usage before:**
+
 ```svelte
 <Child on:message={handleMessage} />
 ```
 
 **Parent usage after:**
+
 ```svelte
 <Child onmessage={handleMessage} />
 ```
@@ -67,48 +72,51 @@ The migration script handles:
 ### 2. beforeUpdate/afterUpdate
 
 **Before:**
+
 ```svelte
 <script>
-  import { beforeUpdate, afterUpdate } from 'svelte';
-  
-  beforeUpdate(() => {
-    console.log('before update');
-  });
-  
-  afterUpdate(() => {
-    console.log('after update');
-  });
+	import { beforeUpdate, afterUpdate } from 'svelte';
+
+	beforeUpdate(() => {
+		console.log('before update');
+	});
+
+	afterUpdate(() => {
+		console.log('after update');
+	});
 </script>
 ```
 
 **After:**
+
 ```svelte
 <script>
-  import { tick } from 'svelte';
-  
-  // beforeUpdate → $effect.pre
-  $effect.pre(() => {
-    console.log('before update');
-  });
-  
-  // afterUpdate → $effect + tick
-  $effect(() => {
-    tick().then(() => {
-      console.log('after update');
-    });
-  });
+	import { tick } from 'svelte';
+
+	// beforeUpdate → $effect.pre
+	$effect.pre(() => {
+		console.log('before update');
+	});
+
+	// afterUpdate → $effect + tick
+	$effect(() => {
+		tick().then(() => {
+			console.log('after update');
+		});
+	});
 </script>
 ```
 
 ### 3. Component Instantiation
 
 **Before:**
+
 ```js
 import App from './App.svelte';
 
 const app = new App({
-  target: document.getElementById('app'),
-  props: { name: 'world' }
+	target: document.getElementById('app'),
+	props: { name: 'world' },
 });
 
 app.$set({ name: 'everybody' });
@@ -117,14 +125,15 @@ app.$destroy();
 ```
 
 **After:**
+
 ```js
 import { mount, unmount } from 'svelte';
 import App from './App.svelte';
 
 const props = $state({ name: 'world' });
 const app = mount(App, {
-  target: document.getElementById('app'),
-  props
+	target: document.getElementById('app'),
+	props,
 });
 
 // Instead of $set:
@@ -132,9 +141,9 @@ props.name = 'everybody';
 
 // Instead of $on:
 const app = mount(App, {
-  target: document.getElementById('app'),
-  props,
-  events: { event: callback }
+	target: document.getElementById('app'),
+	props,
+	events: { event: callback },
 });
 
 // Instead of $destroy:
@@ -144,6 +153,7 @@ unmount(app);
 ### 4. Server-Side Rendering
 
 **Before:**
+
 ```js
 import App from './App.svelte';
 
@@ -151,12 +161,13 @@ const { html, css, head } = App.render({ name: 'world' });
 ```
 
 **After:**
+
 ```js
 import { render } from 'svelte/server';
 import App from './App.svelte';
 
 const { html, head } = render(App, {
-  props: { name: 'world' }
+	props: { name: 'world' },
 });
 ```
 
@@ -167,34 +178,36 @@ Note: CSS is no longer returned by default. Set compiler option `css: 'injected'
 If using stores, they still work but consider migrating to runes:
 
 **Before:**
+
 ```svelte
 <script>
-  import { writable } from 'svelte/store';
-  
-  const count = writable(0);
-  
-  function increment() {
-    count.update(n => n + 1);
-  }
+	import { writable } from 'svelte/store';
+
+	const count = writable(0);
+
+	function increment() {
+		count.update((n) => n + 1);
+	}
 </script>
 
 <button on:click={increment}>
-  {$count}
+	{$count}
 </button>
 ```
 
 **After (using runes):**
+
 ```svelte
 <script>
-  let count = $state(0);
-  
-  function increment() {
-    count++;
-  }
+	let count = $state(0);
+
+	function increment() {
+		count++;
+	}
 </script>
 
 <button onclick={increment}>
-  {count}
+	{count}
 </button>
 ```
 
@@ -203,88 +216,95 @@ If using stores, they still work but consider migrating to runes:
 ### Pattern 1: Reactive Statements
 
 **Before:**
+
 ```svelte
 <script>
-  let count = 0;
-  $: doubled = count * 2;
-  $: {
-    console.log(`count is ${count}`);
-  }
-  $: if (count > 10) {
-    alert('Too high!');
-  }
+	let count = 0;
+	$: doubled = count * 2;
+	$: {
+		console.log(`count is ${count}`);
+	}
+	$: if (count > 10) {
+		alert('Too high!');
+	}
 </script>
 ```
 
 **After:**
+
 ```svelte
 <script>
-  let count = $state(0);
-  let doubled = $derived(count * 2);
-  
-  $effect(() => {
-    console.log(`count is ${count}`);
-  });
-  
-  $effect(() => {
-    if (count > 10) {
-      alert('Too high!');
-    }
-  });
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+
+	$effect(() => {
+		console.log(`count is ${count}`);
+	});
+
+	$effect(() => {
+		if (count > 10) {
+			alert('Too high!');
+		}
+	});
 </script>
 ```
 
 ### Pattern 2: Props with Defaults
 
 **Before:**
+
 ```svelte
 <script>
-  export let name = 'world';
-  export let count;
+	export let name = 'world';
+	export let count;
 </script>
 ```
 
 **After:**
+
 ```svelte
 <script>
-  let { name = 'world', count } = $props();
+	let { name = 'world', count } = $props();
 </script>
 ```
 
 ### Pattern 3: Slot Props
 
 **Before:**
+
 ```svelte
 <!-- Child.svelte -->
 <slot user={{ name: 'Alice', age: 30 }} />
 
 <!-- Parent.svelte -->
 <Child let:user>
-  {user.name} is {user.age}
+	{user.name} is {user.age}
 </Child>
 ```
 
 **After:**
+
 ```svelte
 <!-- Child.svelte -->
 <script>
-  import type { Snippet } from 'svelte';
-  let { children }: { children: Snippet<[User]> } = $props();
+	import type { Snippet } from 'svelte';
+	let { children }: { children: Snippet<[User]> } = $props();
 </script>
 
 {@render children({ name: 'Alice', age: 30 })}
 
 <!-- Parent.svelte -->
 <Child>
-  {#snippet children(user)}
-    {user.name} is {user.age}
-  {/snippet}
+	{#snippet children(user)}
+		{user.name} is {user.age}
+	{/snippet}
 </Child>
 ```
 
 ### Pattern 4: Named Slots
 
 **Before:**
+
 ```svelte
 <!-- Child.svelte -->
 <header><slot name="header" /></header>
@@ -293,22 +313,27 @@ If using stores, they still work but consider migrating to runes:
 
 <!-- Parent.svelte -->
 <Child>
-  <h1 slot="header">Title</h1>
-  <p>Content</p>
-  <p slot="footer">Footer</p>
+	<h1 slot="header">Title</h1>
+	<p>Content</p>
+	<p slot="footer">Footer</p>
 </Child>
 ```
 
 **After:**
+
 ```svelte
 <!-- Child.svelte -->
 <script>
-  import type { Snippet } from 'svelte';
-  let { header, children, footer }: {
-    header?: Snippet;
-    children?: Snippet;
-    footer?: Snippet;
-  } = $props();
+	import type { Snippet } from 'svelte';
+	let {
+		header,
+		children,
+		footer,
+	}: {
+		header?: Snippet;
+		children?: Snippet;
+		footer?: Snippet;
+	} = $props();
 </script>
 
 <header>{@render header?.()}</header>
@@ -317,29 +342,31 @@ If using stores, they still work but consider migrating to runes:
 
 <!-- Parent.svelte -->
 <Child>
-  {#snippet header()}
-    <h1>Title</h1>
-  {/snippet}
-  
-  <p>Content</p>
-  
-  {#snippet footer()}
-    <p>Footer</p>
-  {/snippet}
+	{#snippet header()}
+		<h1>Title</h1>
+	{/snippet}
+
+	<p>Content</p>
+
+	{#snippet footer()}
+		<p>Footer</p>
+	{/snippet}
 </Child>
 ```
 
 ### Pattern 5: Event Forwarding
 
 **Before:**
+
 ```svelte
 <button on:click>Click me</button>
 ```
 
 **After:**
+
 ```svelte
 <script>
-  let { onclick } = $props();
+	let { onclick } = $props();
 </script>
 
 <button {onclick}>Click me</button>
@@ -348,24 +375,26 @@ If using stores, they still work but consider migrating to runes:
 ### Pattern 6: Prop Spreading with Events
 
 **Before:**
+
 ```svelte
 <script>
-  export let disabled = false;
+	export let disabled = false;
 </script>
 
 <button {...$$restProps} on:click {disabled}>
-  <slot />
+	<slot />
 </button>
 ```
 
 **After:**
+
 ```svelte
 <script>
-  let { disabled = false, children, ...rest } = $props();
+	let { disabled = false, children, ...rest } = $props();
 </script>
 
 <button {disabled} {...rest}>
-  {@render children?.()}
+	{@render children?.()}
 </button>
 ```
 
@@ -375,15 +404,16 @@ The migration script may create `run()` calls for `$:` statements it can't deter
 
 ```svelte
 <script>
-  import { run } from 'svelte/legacy';
-  
-  run(() => {
-    // Migrated $: statement
-  });
+	import { run } from 'svelte/legacy';
+
+	run(() => {
+		// Migrated $: statement
+	});
 </script>
 ```
 
 **Action required:** Review each `run()` and convert to:
+
 - `$derived()` if it's computing a value
 - `$effect()` if it's a side effect
 - Remove if no longer needed
@@ -397,11 +427,11 @@ Use `compatibility.componentApi: 4` to keep `new Component()` working:
 ```js
 // svelte.config.js
 export default {
-  compilerOptions: {
-    compatibility: {
-      componentApi: 4
-    }
-  }
+	compilerOptions: {
+		compatibility: {
+			componentApi: 4,
+		},
+	},
 };
 ```
 
@@ -412,21 +442,24 @@ This adds some overhead but helps during migration.
 ### 1. Bindings Need $bindable
 
 **Before (Svelte 4):**
+
 ```svelte
 <script>
-  export let value;
+	export let value;
 </script>
 ```
 
 All props were bindable in parent:
+
 ```svelte
 <Child bind:value />
 ```
 
 **After (Svelte 5):**
+
 ```svelte
 <script>
-  let { value = $bindable() } = $props();
+	let { value = $bindable() } = $props();
 </script>
 ```
 
@@ -435,22 +468,25 @@ Only explicitly bindable props can use `bind:`.
 ### 2. No Implicit Reactivity
 
 **Before:**
+
 ```svelte
 <script>
-  let count = 0; // Implicitly reactive
+	let count = 0; // Implicitly reactive
 </script>
 ```
 
 **After:**
+
 ```svelte
 <script>
-  let count = $state(0); // Explicitly reactive
+	let count = $state(0); // Explicitly reactive
 </script>
 ```
 
 ### 3. Component Type Changes
 
 **Before:**
+
 ```ts
 import type { SvelteComponent } from 'svelte';
 import MyComponent from './MyComponent.svelte';
@@ -460,6 +496,7 @@ let ComponentType: typeof SvelteComponent;
 ```
 
 **After:**
+
 ```ts
 import type { Component } from 'svelte';
 import MyComponent from './MyComponent.svelte';
@@ -483,38 +520,45 @@ After migrating, test:
 ### Issue: Events not firing
 
 **Problem:**
+
 ```svelte
-<Child on:click={handler} />  <!-- Svelte 4 syntax -->
+<Child on:click={handler} /> <!-- Svelte 4 syntax -->
 ```
 
 **Solution:**
+
 ```svelte
-<Child onclick={handler} />    <!-- Svelte 5 syntax -->
+<Child onclick={handler} /> <!-- Svelte 5 syntax -->
 ```
 
 ### Issue: Slot not rendering
 
 **Problem:**
+
 ```svelte
-<Child>Content</Child>  <!-- Still using slot in Child -->
+<Child>Content</Child> <!-- Still using slot in Child -->
 ```
 
 **Solution:** Update Child to use snippets:
+
 ```svelte
 <script>
-  let { children } = $props();
+	let { children } = $props();
 </script>
+
 {@render children?.()}
 ```
 
 ### Issue: Derived value not updating
 
 **Problem:**
+
 ```svelte
-let doubled = count * 2;  <!-- Not reactive! -->
+let doubled = count * 2; <!-- Not reactive! -->
 ```
 
 **Solution:**
+
 ```svelte
 let doubled = $derived(count * 2);
 ```
@@ -522,15 +566,17 @@ let doubled = $derived(count * 2);
 ### Issue: $set no longer exists
 
 **Problem:**
+
 ```js
 componentInstance.$set({ prop: 'value' });
 ```
 
 **Solution:** Use reactive props:
+
 ```js
 const props = $state({ prop: 'value' });
 mount(Component, { props });
-props.prop = 'new value';  // Updates component
+props.prop = 'new value'; // Updates component
 ```
 
 ## Incremental Migration Tips
diff --git a/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md b/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md
index 5511edb..836df4f 100644
--- a/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md
+++ b/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md
@@ -6,12 +6,12 @@
 
 ```svelte
 <script lang="ts">
-  interface Props {
-    items: Item[];
-    onSelect: (item: Item) => void;
-  }
-  
-  let { items, onSelect }: Props = $props();
+	interface Props {
+		items: Item[];
+		onSelect: (item: Item) => void;
+	}
+
+	let { items, onSelect }: Props = $props();
 </script>
 ```
 
@@ -19,16 +19,16 @@
 
 ```svelte
 <script lang="ts" generics="T extends { id: number }">
-  interface Props {
-    items: T[];
-    renderItem: Snippet<[T]>;
-  }
-  
-  let { items, renderItem }: Props = $props();
+	interface Props {
+		items: T[];
+		renderItem: Snippet<[T]>;
+	}
+
+	let { items, renderItem }: Props = $props();
 </script>
 
 {#each items as item (item.id)}
-  {@render renderItem(item)}
+	{@render renderItem(item)}
 {/each}
 ```
 
@@ -37,25 +37,27 @@
 ### Minimize State, Maximize Derived
 
 **❌ Avoid:**
+
 ```svelte
 <script lang="ts">
-  let items = $state([]);
-  let count = $state(0);
-  let isEmpty = $state(true);
-  
-  $effect(() => {
-    count = items.length;
-    isEmpty = items.length === 0;
-  });
+	let items = $state([]);
+	let count = $state(0);
+	let isEmpty = $state(true);
+
+	$effect(() => {
+		count = items.length;
+		isEmpty = items.length === 0;
+	});
 </script>
 ```
 
 **✅ Better:**
+
 ```svelte
 <script lang="ts">
-  let items = $state([]);
-  let count = $derived(items.length);
-  let isEmpty = $derived(items.length === 0);
+	let items = $state([]);
+	let count = $derived(items.length);
+	let isEmpty = $derived(items.length === 0);
 </script>
 ```
 
@@ -66,28 +68,32 @@ Use `.svelte.js` or `.svelte.ts` files for shared state:
 ```ts
 // counter.svelte.ts
 export function createCounter(initial = 0) {
-  let count = $state(initial);
-  let doubled = $derived(count * 2);
-  
-  return {
-    get count() { return count; },
-    get doubled() { return doubled; },
-    increment: () => count++,
-    decrement: () => count--,
-  };
+	let count = $state(initial);
+	let doubled = $derived(count * 2);
+
+	return {
+		get count() {
+			return count;
+		},
+		get doubled() {
+			return doubled;
+		},
+		increment: () => count++,
+		decrement: () => count--,
+	};
 }
 ```
 
 ```svelte
 <!-- Component.svelte -->
 <script lang="ts">
-  import { createCounter } from './counter.svelte.ts';
-  
-  const counter = createCounter(0);
+	import { createCounter } from './counter.svelte.ts';
+
+	const counter = createCounter(0);
 </script>
 
 <button onclick={counter.increment}>
-  {counter.count} (doubled: {counter.doubled})
+	{counter.count} (doubled: {counter.doubled})
 </button>
 ```
 
@@ -95,28 +101,28 @@ export function createCounter(initial = 0) {
 
 ```svelte
 <script lang="ts">
-  class TodoList {
-    items = $state<Todo[]>([]);
-    
-    get completed() {
-      return this.items.filter(t => t.done);
-    }
-    
-    get remaining() {
-      return this.items.filter(t => !t.done);
-    }
-    
-    add(text: string) {
-      this.items.push({ id: Date.now(), text, done: false });
-    }
-    
-    toggle(id: number) {
-      const todo = this.items.find(t => t.id === id);
-      if (todo) todo.done = !todo.done;
-    }
-  }
-  
-  const todos = new TodoList();
+	class TodoList {
+		items = $state<Todo[]>([]);
+
+		get completed() {
+			return this.items.filter((t) => t.done);
+		}
+
+		get remaining() {
+			return this.items.filter((t) => !t.done);
+		}
+
+		add(text: string) {
+			this.items.push({ id: Date.now(), text, done: false });
+		}
+
+		toggle(id: number) {
+			const todo = this.items.find((t) => t.id === id);
+			if (todo) todo.done = !todo.done;
+		}
+	}
+
+	const todos = new TodoList();
 </script>
 ```
 
@@ -127,32 +133,32 @@ export function createCounter(initial = 0) {
 ```svelte
 <!-- Table.svelte -->
 <script lang="ts" generics="T">
-  import type { Snippet } from 'svelte';
-  
-  interface Props {
-    data: T[];
-    header?: Snippet;
-    row: Snippet<[T]>;
-    footer?: Snippet;
-  }
-  
-  let { data, header, row, footer }: Props = $props();
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		data: T[];
+		header?: Snippet;
+		row: Snippet<[T]>;
+		footer?: Snippet;
+	}
+
+	let { data, header, row, footer }: Props = $props();
 </script>
 
 <table>
-  {#if header}
-    <thead>{@render header()}</thead>
-  {/if}
-  
-  <tbody>
-    {#each data as item}
-      <tr>{@render row(item)}</tr>
-    {/each}
-  </tbody>
-  
-  {#if footer}
-    <tfoot>{@render footer()}</tfoot>
-  {/if}
+	{#if header}
+		<thead>{@render header()}</thead>
+	{/if}
+
+	<tbody>
+		{#each data as item}
+			<tr>{@render row(item)}</tr>
+		{/each}
+	</tbody>
+
+	{#if footer}
+		<tfoot>{@render footer()}</tfoot>
+	{/if}
 </table>
 ```
 
@@ -160,21 +166,21 @@ Usage:
 
 ```svelte
 <Table {data}>
-  {#snippet header()}
-    <tr>
-      <th>Name</th>
-      <th>Age</th>
-    </tr>
-  {/snippet}
-  
-  {#snippet row(person)}
-    <td>{person.name}</td>
-    <td>{person.age}</td>
-  {/snippet}
-  
-  {#snippet footer()}
-    <tr><td colspan="2">Total: {data.length}</td></tr>
-  {/snippet}
+	{#snippet header()}
+		<tr>
+			<th>Name</th>
+			<th>Age</th>
+		</tr>
+	{/snippet}
+
+	{#snippet row(person)}
+		<td>{person.name}</td>
+		<td>{person.age}</td>
+	{/snippet}
+
+	{#snippet footer()}
+		<tr><td colspan="2">Total: {data.length}</td></tr>
+	{/snippet}
 </Table>
 ```
 
@@ -183,27 +189,27 @@ Usage:
 ```svelte
 <!-- WithAuth.svelte -->
 <script lang="ts">
-  import type { Component } from 'svelte';
-  
-  let {
-    component,
-    ...props
-  }: {
-    component: Component;
-    [key: string]: any;
-  } = $props();
-  
-  let isAuthenticated = $state(false);
-  
-  $effect(() => {
-    checkAuth().then(result => isAuthenticated = result);
-  });
+	import type { Component } from 'svelte';
+
+	let {
+		component,
+		...props
+	}: {
+		component: Component;
+		[key: string]: any;
+	} = $props();
+
+	let isAuthenticated = $state(false);
+
+	$effect(() => {
+		checkAuth().then((result) => (isAuthenticated = result));
+	});
 </script>
 
 {#if isAuthenticated}
-  <svelte:component this={component} {...props} />
+	<svelte:component this={component} {...props} />
 {:else}
-  <p>Please log in</p>
+	<p>Please log in</p>
 {/if}
 ```
 
@@ -213,19 +219,19 @@ Usage:
 
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  
-  function handleIncrement() {
-    count++;
-  }
-  
-  function handleDecrement() {
-    count--;
-  }
-  
-  function handleReset() {
-    count = 0;
-  }
+	let count = $state(0);
+
+	function handleIncrement() {
+		count++;
+	}
+
+	function handleDecrement() {
+		count--;
+	}
+
+	function handleReset() {
+		count = 0;
+	}
 </script>
 
 <button onclick={handleIncrement}>+</button>
@@ -239,21 +245,21 @@ For many similar elements:
 
 ```svelte
 <script lang="ts">
-  let items = $state(['a', 'b', 'c']);
-  
-  function handleClick(event: MouseEvent) {
-    const button = (event.target as HTMLElement).closest('button');
-    if (button) {
-      const value = button.dataset.value;
-      console.log('Clicked:', value);
-    }
-  }
+	let items = $state(['a', 'b', 'c']);
+
+	function handleClick(event: MouseEvent) {
+		const button = (event.target as HTMLElement).closest('button');
+		if (button) {
+			const value = button.dataset.value;
+			console.log('Clicked:', value);
+		}
+	}
 </script>
 
 <div onclick={handleClick}>
-  {#each items as item}
-    <button data-value={item}>{item}</button>
-  {/each}
+	{#each items as item}
+		<button data-value={item}>{item}</button>
+	{/each}
 </div>
 ```
 
@@ -262,21 +268,21 @@ For many similar elements:
 ```svelte
 <!-- Child.svelte -->
 <script lang="ts">
-  interface Props {
-    onSuccess?: (data: Data) => void;
-    onError?: (error: Error) => void;
-  }
-  
-  let { onSuccess, onError }: Props = $props();
-  
-  async function submit() {
-    try {
-      const data = await api.submit();
-      onSuccess?.(data);
-    } catch (error) {
-      onError?.(error as Error);
-    }
-  }
+	interface Props {
+		onSuccess?: (data: Data) => void;
+		onError?: (error: Error) => void;
+	}
+
+	let { onSuccess, onError }: Props = $props();
+
+	async function submit() {
+		try {
+			const data = await api.submit();
+			onSuccess?.(data);
+		} catch (error) {
+			onError?.(error as Error);
+		}
+	}
 </script>
 ```
 
@@ -286,29 +292,29 @@ For many similar elements:
 
 ```svelte
 <script lang="ts">
-  interface FormData {
-    name: string;
-    email: string;
-    age: number;
-  }
-  
-  let form = $state<FormData>({
-    name: '',
-    email: '',
-    age: 18
-  });
-  
-  function handleSubmit(e: SubmitEvent) {
-    e.preventDefault();
-    console.log(form);
-  }
+	interface FormData {
+		name: string;
+		email: string;
+		age: number;
+	}
+
+	let form = $state<FormData>({
+		name: '',
+		email: '',
+		age: 18,
+	});
+
+	function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		console.log(form);
+	}
 </script>
 
 <form onsubmit={handleSubmit}>
-  <input bind:value={form.name} placeholder="Name" />
-  <input bind:value={form.email} type="email" placeholder="Email" />
-  <input bind:value={form.age} type="number" />
-  <button type="submit">Submit</button>
+	<input bind:value={form.name} placeholder="Name" />
+	<input bind:value={form.email} type="email" placeholder="Email" />
+	<input bind:value={form.age} type="number" />
+	<button type="submit">Submit</button>
 </form>
 ```
 
@@ -317,27 +323,27 @@ For many similar elements:
 ```svelte
 <!-- Input.svelte -->
 <script lang="ts">
-  let {
-    value = $bindable(''),
-    label,
-    type = 'text',
-    error,
-    ...rest
-  }: {
-    value?: string;
-    label: string;
-    type?: string;
-    error?: string;
-    [key: string]: any;
-  } = $props();
+	let {
+		value = $bindable(''),
+		label,
+		type = 'text',
+		error,
+		...rest
+	}: {
+		value?: string;
+		label: string;
+		type?: string;
+		error?: string;
+		[key: string]: any;
+	} = $props();
 </script>
 
 <label>
-  <span>{label}</span>
-  <input {type} bind:value {...rest} />
-  {#if error}
-    <span class="error">{error}</span>
-  {/if}
+	<span>{label}</span>
+	<input {type} bind:value {...rest} />
+	{#if error}
+		<span class="error">{error}</span>
+	{/if}
 </label>
 ```
 
@@ -347,15 +353,15 @@ For many similar elements:
 
 ```svelte
 <script lang="ts">
-  let promise = $state<Promise<Data>>(fetchData());
+	let promise = $state<Promise<Data>>(fetchData());
 </script>
 
 {#await promise}
-  <p>Loading...</p>
+	<p>Loading...</p>
 {:then data}
-  <DataView {data} />
+	<DataView {data} />
 {:catch error}
-  <p>Error: {error.message}</p>
+	<p>Error: {error.message}</p>
 {/await}
 ```
 
@@ -363,33 +369,33 @@ For many similar elements:
 
 ```svelte
 <script lang="ts">
-  let data = $state<Data | null>(null);
-  let loading = $state(false);
-  let error = $state<Error | null>(null);
-  
-  async function load() {
-    loading = true;
-    error = null;
-    try {
-      data = await fetchData();
-    } catch (e) {
-      error = e as Error;
-    } finally {
-      loading = false;
-    }
-  }
-  
-  $effect(() => {
-    load();
-  });
+	let data = $state<Data | null>(null);
+	let loading = $state(false);
+	let error = $state<Error | null>(null);
+
+	async function load() {
+		loading = true;
+		error = null;
+		try {
+			data = await fetchData();
+		} catch (e) {
+			error = e as Error;
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		load();
+	});
 </script>
 
 {#if loading}
-  <p>Loading...</p>
+	<p>Loading...</p>
 {:else if error}
-  <p>Error: {error.message}</p>
+	<p>Error: {error.message}</p>
 {:else if data}
-  <DataView {data} />
+	<DataView {data} />
 {/if}
 ```
 
@@ -399,21 +405,18 @@ For many similar elements:
 
 ```svelte
 <script lang="ts">
-  let active = $state(true);
-  let large = $state(false);
-  let disabled = $state(false);
+	let active = $state(true);
+	let large = $state(false);
+	let disabled = $state(false);
 </script>
 
 <!-- Object syntax (5.16+) -->
 <div class={{ active, large, disabled }}>Content</div>
 
 <!-- Array syntax -->
-<div class={[
-  'base-class',
-  active && 'active',
-  large && 'large',
-  disabled && 'disabled'
-]}>Content</div>
+<div class={['base-class', active && 'active', large && 'large', disabled && 'disabled']}>
+	Content
+</div>
 
 <!-- Combined -->
 <div class={['base', { active, large }]}>Content</div>
@@ -424,33 +427,45 @@ For many similar elements:
 ```svelte
 <!-- Button.svelte -->
 <script lang="ts">
-  let {
-    variant = 'primary',
-    size = 'medium',
-    children
-  }: {
-    variant?: 'primary' | 'secondary' | 'danger';
-    size?: 'small' | 'medium' | 'large';
-    children: Snippet;
-  } = $props();
+	let {
+		variant = 'primary',
+		size = 'medium',
+		children,
+	}: {
+		variant?: 'primary' | 'secondary' | 'danger';
+		size?: 'small' | 'medium' | 'large';
+		children: Snippet;
+	} = $props();
 </script>
 
 <button class={{ [variant]: true, [size]: true }}>
-  {@render children()}
+	{@render children()}
 </button>
 
 <style>
-  button {
-    padding: 0.5rem 1rem;
-  }
-  
-  .primary { background: blue; }
-  .secondary { background: gray; }
-  .danger { background: red; }
-  
-  .small { font-size: 0.875rem; }
-  .medium { font-size: 1rem; }
-  .large { font-size: 1.125rem; }
+	button {
+		padding: 0.5rem 1rem;
+	}
+
+	.primary {
+		background: blue;
+	}
+	.secondary {
+		background: gray;
+	}
+	.danger {
+		background: red;
+	}
+
+	.small {
+		font-size: 0.875rem;
+	}
+	.medium {
+		font-size: 1rem;
+	}
+	.large {
+		font-size: 1.125rem;
+	}
 </style>
 ```
 
@@ -460,7 +475,7 @@ For many similar elements:
 
 ```svelte
 {#each items as item (item.id)}
-  <Item {item} />
+	<Item {item} />
 {/each}
 ```
 
@@ -468,8 +483,8 @@ For many similar elements:
 
 ```svelte
 <script lang="ts">
-  // Large read-only dataset
-  let bigData = $state.raw(loadHugeDataset());
+	// Large read-only dataset
+	let bigData = $state.raw(loadHugeDataset());
 </script>
 ```
 
@@ -477,20 +492,20 @@ For many similar elements:
 
 ```svelte
 <script lang="ts">
-  let HeavyComponent = $state<Component | null>(null);
-  let show = $state(false);
-  
-  $effect(() => {
-    if (show && !HeavyComponent) {
-      import('./HeavyComponent.svelte').then(m => {
-        HeavyComponent = m.default;
-      });
-    }
-  });
+	let HeavyComponent = $state<Component | null>(null);
+	let show = $state(false);
+
+	$effect(() => {
+		if (show && !HeavyComponent) {
+			import('./HeavyComponent.svelte').then((m) => {
+				HeavyComponent = m.default;
+			});
+		}
+	});
 </script>
 
 {#if show && HeavyComponent}
-  <HeavyComponent />
+	<HeavyComponent />
 {/if}
 ```
 
@@ -502,15 +517,15 @@ import { expect, test } from 'vitest';
 import Component from './Component.svelte';
 
 test('increments counter', async () => {
-  const target = document.createElement('div');
-  const instance = mount(Component, { target });
-  
-  const button = target.querySelector('button');
-  button?.click();
-  
-  await new Promise(resolve => setTimeout(resolve, 0));
-  
-  expect(target.textContent).toContain('1');
+	const target = document.createElement('div');
+	const instance = mount(Component, { target });
+
+	const button = target.querySelector('button');
+	button?.click();
+
+	await new Promise((resolve) => setTimeout(resolve, 0));
+
+	expect(target.textContent).toContain('1');
 });
 ```
 
@@ -518,25 +533,21 @@ test('increments counter', async () => {
 
 ```svelte
 <script lang="ts">
-  let menuOpen = $state(false);
-  let buttonId = $props.id();
+	let menuOpen = $state(false);
+	let buttonId = $props.id();
 </script>
 
 <button
-  id={buttonId}
-  onclick={() => menuOpen = !menuOpen}
-  aria-expanded={menuOpen}
-  aria-controls="menu-{buttonId}"
+	id={buttonId}
+	onclick={() => (menuOpen = !menuOpen)}
+	aria-expanded={menuOpen}
+	aria-controls="menu-{buttonId}"
 >
-  Menu
+	Menu
 </button>
 
-<nav
-  id="menu-{buttonId}"
-  hidden={!menuOpen}
-  aria-labelledby={buttonId}
->
-  <a href="/home">Home</a>
-  <a href="/about">About</a>
+<nav id="menu-{buttonId}" hidden={!menuOpen} aria-labelledby={buttonId}>
+	<a href="/home">Home</a>
+	<a href="/about">About</a>
 </nav>
 ```
diff --git a/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md b/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md
index 10fe73e..b98cb1a 100644
--- a/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md
+++ b/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md
@@ -3,51 +3,56 @@
 ## 1. Using $effect Instead of $derived
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  let doubled = $state(0);
-  
-  $effect(() => {
-    doubled = count * 2;  // Synchronizing state = bad!
-  });
+	let count = $state(0);
+	let doubled = $state(0);
+
+	$effect(() => {
+		doubled = count * 2; // Synchronizing state = bad!
+	});
 </script>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  let doubled = $derived(count * 2);
+	let count = $state(0);
+	let doubled = $derived(count * 2);
 </script>
 ```
 
 ## 2. Mutating Non-Bindable Props
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let { count } = $props();
-  
-  function increment() {
-    count++;  // Warning: ownership_invalid_mutation
-  }
+	let { count } = $props();
+
+	function increment() {
+		count++; // Warning: ownership_invalid_mutation
+	}
 </script>
 ```
 
 **✅ Correct Option 1 - Callback:**
+
 ```svelte
 <script lang="ts">
-  let { count, onIncrement } = $props();
+	let { count, onIncrement } = $props();
 </script>
 
 <button onclick={onIncrement}>+</button>
 ```
 
 **✅ Correct Option 2 - $bindable:**
+
 ```svelte
 <script lang="ts">
-  let { count = $bindable(0) } = $props();
+	let { count = $bindable(0) } = $props();
 </script>
 
 <button onclick={() => count++}>+</button>
@@ -59,28 +64,30 @@
 ## 3. Accessing Undefined DOM References
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let canvas: HTMLCanvasElement;
-  
-  // canvas is undefined during initialization!
-  const ctx = canvas.getContext('2d');
+	let canvas: HTMLCanvasElement;
+
+	// canvas is undefined during initialization!
+	const ctx = canvas.getContext('2d');
 </script>
 
 <canvas bind:this={canvas}></canvas>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let canvas: HTMLCanvasElement;
-  
-  $effect(() => {
-    if (canvas) {
-      const ctx = canvas.getContext('2d');
-      // Use ctx...
-    }
-  });
+	let canvas: HTMLCanvasElement;
+
+	$effect(() => {
+		if (canvas) {
+			const ctx = canvas.getContext('2d');
+			// Use ctx...
+		}
+	});
 </script>
 
 <canvas bind:this={canvas}></canvas>
@@ -89,53 +96,65 @@
 ## 4. Missing Keys in Lists
 
 **❌ Wrong:**
+
 ```svelte
 {#each items as item}
-  <div>{item.name}</div>
+	<div>{item.name}</div>
 {/each}
 ```
 
 **✅ Correct:**
+
 ```svelte
 {#each items as item (item.id)}
-  <div>{item.name}</div>
+	<div>{item.name}</div>
 {/each}
 ```
 
 ## 5. Using on: Event Directive
 
 **❌ Wrong (Svelte 4 syntax):**
+
 ```svelte
 <button on:click={handler}>Click</button>
 <button on:click|preventDefault={handler}>Click</button>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <button onclick={handler}>Click</button>
-<button onclick={(e) => { e.preventDefault(); handler(e); }}>Click</button>
+<button
+	onclick={(e) => {
+		e.preventDefault();
+		handler(e);
+	}}>Click</button
+>
 ```
 
 ## 6. Using export let for Props
 
 **❌ Wrong (Svelte 4 syntax):**
+
 ```svelte
 <script lang="ts">
-  export let name: string;
-  export let age = 18;
+	export let name: string;
+	export let age = 18;
 </script>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let { name, age = 18 }: { name: string; age?: number } = $props();
+	let { name, age = 18 }: { name: string; age?: number } = $props();
 </script>
 ```
 
 ## 7. Using <slot> Instead of Snippets
 
 **❌ Wrong (deprecated):**
+
 ```svelte
 <!-- Child -->
 <slot name="header" />
@@ -143,14 +162,18 @@
 ```
 
 **✅ Correct:**
+
 ```svelte
 <!-- Child -->
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  let { header, children }: {
-    header?: Snippet;
-    children?: Snippet;
-  } = $props();
+	import type { Snippet } from 'svelte';
+	let {
+		header,
+		children,
+	}: {
+		header?: Snippet;
+		children?: Snippet;
+	} = $props();
 </script>
 
 {@render header?.()}
@@ -160,137 +183,146 @@
 ## 8. Using createEventDispatcher
 
 **❌ Wrong (deprecated):**
+
 ```svelte
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  const dispatch = createEventDispatcher();
-  
-  function handleClick() {
-    dispatch('click', { value: 42 });
-  }
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	function handleClick() {
+		dispatch('click', { value: 42 });
+	}
 </script>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let { onclick } = $props();
-  
-  function handleClick() {
-    onclick?.({ value: 42 });
-  }
+	let { onclick } = $props();
+
+	function handleClick() {
+		onclick?.({ value: 42 });
+	}
 </script>
 ```
 
 ## 9. Not Handling Undefined Snippets
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let { header } = $props();
+	let { header } = $props();
 </script>
 
-{@render header()}  <!-- Error if not provided! -->
+{@render header()} <!-- Error if not provided! -->
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let { header } = $props();
+	let { header } = $props();
 </script>
 
-{@render header?.()}  <!-- Optional chaining -->
+{@render header?.()}
+<!-- Optional chaining -->
 
 <!-- Or with fallback: -->
 {#if header}
-  {@render header()}
+	{@render header()}
 {:else}
-  <h1>Default Header</h1>
+	<h1>Default Header</h1>
 {/if}
 ```
 
 ## 10. Destructuring Props Without Types
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let { name, age } = $props();  // No type safety!
+	let { name, age } = $props(); // No type safety!
 </script>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  interface Props {
-    name: string;
-    age: number;
-  }
-  
-  let { name, age }: Props = $props();
+	interface Props {
+		name: string;
+		age: number;
+	}
+
+	let { name, age }: Props = $props();
 </script>
 ```
 
 ## 11. Making Everything Bindable
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let {
-    name = $bindable(),
-    age = $bindable(),
-    email = $bindable()
-  } = $props();
+	let { name = $bindable(), age = $bindable(), email = $bindable() } = $props();
 </script>
 ```
 
 Only use `$bindable()` when truly needed for two-way binding.
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let {
-    name,           // Read-only props
-    age,
-    email,
-    value = $bindable()  // Only this needs binding
-  } = $props();
+	let {
+		name, // Read-only props
+		age,
+		email,
+		value = $bindable(), // Only this needs binding
+	} = $props();
 </script>
 ```
 
 ## 12. Using Plain let for Reactive Values
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let count = 0;  // Not reactive in Svelte 5!
+	let count = 0; // Not reactive in Svelte 5!
 </script>
 
 <button onclick={() => count++}>
-  {count}  <!-- Won't update -->
+	{count}
+	<!-- Won't update -->
 </button>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let count = $state(0);
+	let count = $state(0);
 </script>
 
 <button onclick={() => count++}>
-  {count}
+	{count}
 </button>
 ```
 
 ## 13. Infinite Effect Loops
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  
-  $effect(() => {
-    count = count + 1;  // Infinite loop!
-  });
+	let count = $state(0);
+
+	$effect(() => {
+		count = count + 1; // Infinite loop!
+	});
 </script>
 ```
 
@@ -298,57 +330,61 @@ Use `untrack` if you must read without tracking:
 
 ```svelte
 <script lang="ts">
-  import { untrack } from 'svelte';
-  
-  let count = $state(0);
-  
-  $effect(() => {
-    const current = untrack(() => count);
-    if (current < 10) {
-      count = current + 1;  // Won't cause infinite loop
-    }
-  });
+	import { untrack } from 'svelte';
+
+	let count = $state(0);
+
+	$effect(() => {
+		const current = untrack(() => count);
+		if (current < 10) {
+			count = current + 1; // Won't cause infinite loop
+		}
+	});
 </script>
 ```
 
 ## 14. Forgetting Cleanup in Effects
 
 **❌ Wrong:**
+
 ```svelte
 <script lang="ts">
-  $effect(() => {
-    const interval = setInterval(() => console.log('tick'), 1000);
-    // No cleanup! Memory leak!
-  });
+	$effect(() => {
+		const interval = setInterval(() => console.log('tick'), 1000);
+		// No cleanup! Memory leak!
+	});
 </script>
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  $effect(() => {
-    const interval = setInterval(() => console.log('tick'), 1000);
-    return () => clearInterval(interval);
-  });
+	$effect(() => {
+		const interval = setInterval(() => console.log('tick'), 1000);
+		return () => clearInterval(interval);
+	});
 </script>
 ```
 
 ## 15. Using <svelte:component>
 
 **❌ Wrong (unnecessary):**
+
 ```svelte
 <script lang="ts">
-  let Component = $state(ComponentA);
+	let Component = $state(ComponentA);
 </script>
 
 <svelte:component this={Component} />
 ```
 
 **✅ Correct:**
+
 ```svelte
 <script lang="ts">
-  let Component = $state(ComponentA);
+	let Component = $state(ComponentA);
 </script>
 
-<Component />  <!-- Reactive in Svelte 5! -->
+<Component /> <!-- Reactive in Svelte 5! -->
 ```
diff --git a/plugins/svelte/skills/svelte-code-writer/references/RUNES.md b/plugins/svelte/skills/svelte-code-writer/references/RUNES.md
index f337d84..1a34ad1 100644
--- a/plugins/svelte/skills/svelte-code-writer/references/RUNES.md
+++ b/plugins/svelte/skills/svelte-code-writer/references/RUNES.md
@@ -8,8 +8,8 @@ Create reactive state that updates the UI when changed.
 
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  let user = $state({ name: 'Alice', age: 30 });
+	let count = $state(0);
+	let user = $state({ name: 'Alice', age: 30 });
 </script>
 ```
 
@@ -19,11 +19,11 @@ Objects and arrays become deeply reactive proxies:
 
 ```svelte
 <script lang="ts">
-  let todos = $state([{ done: false, text: 'Learn Svelte 5' }]);
-  
-  // These trigger reactivity:
-  todos[0].done = true;
-  todos.push({ done: false, text: 'Build app' });
+	let todos = $state([{ done: false, text: 'Learn Svelte 5' }]);
+
+	// These trigger reactivity:
+	todos[0].done = true;
+	todos.push({ done: false, text: 'Build app' });
 </script>
 ```
 
@@ -31,14 +31,14 @@ Objects and arrays become deeply reactive proxies:
 
 ```svelte
 <script lang="ts">
-  class Todo {
-    done = $state(false);
-    text = $state('');
-    
-    constructor(text: string) {
-      this.text = $state(text);  // Or initialize here
-    }
-  }
+	class Todo {
+		done = $state(false);
+		text = $state('');
+
+		constructor(text: string) {
+			this.text = $state(text); // Or initialize here
+		}
+	}
 </script>
 ```
 
@@ -48,10 +48,10 @@ Skip deep reactivity for performance:
 
 ```svelte
 <script lang="ts">
-  let bigData = $state.raw(hugeDataset);  // Not deeply reactive
-  
-  // Must reassign to update:
-  bigData = { ...bigData, newProp: 'value' };
+	let bigData = $state.raw(hugeDataset); // Not deeply reactive
+
+	// Must reassign to update:
+	bigData = { ...bigData, newProp: 'value' };
 </script>
 ```
 
@@ -61,8 +61,8 @@ Get non-reactive snapshot:
 
 ```svelte
 <script lang="ts">
-  let data = $state({ count: 0 });
-  console.log($state.snapshot(data));  // Plain object
+	let data = $state({ count: 0 });
+	console.log($state.snapshot(data)); // Plain object
 </script>
 ```
 
@@ -74,9 +74,9 @@ Compute values from other state. **Always prefer $derived over $effect for compu
 
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  let doubled = $derived(count * 2);
-  let squared = $derived(count ** 2);
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+	let squared = $derived(count ** 2);
 </script>
 ```
 
@@ -86,15 +86,17 @@ For complex computations:
 
 ```svelte
 <script lang="ts">
-  let items = $state([/* ... */]);
-  
-  let total = $derived.by(() => {
-    let sum = 0;
-    for (const item of items) {
-      sum += item.price * item.quantity;
-    }
-    return sum;
-  });
+	let items = $state([
+		/* ... */
+	]);
+
+	let total = $derived.by(() => {
+		let sum = 0;
+		for (const item of items) {
+			sum += item.price * item.quantity;
+		}
+		return sum;
+	});
 </script>
 ```
 
@@ -104,13 +106,13 @@ Dependencies are tracked at runtime:
 
 ```svelte
 <script lang="ts">
-  let condition = $state(true);
-  let a = $state(1);
-  let b = $state(2);
-  
-  // Only depends on what's actually read
-  let result = $derived(condition ? a : b);
-  // Changes to `a` only update when condition is true
+	let condition = $state(true);
+	let a = $state(1);
+	let b = $state(2);
+
+	// Only depends on what's actually read
+	let result = $derived(condition ? a : b);
+	// Changes to `a` only update when condition is true
 </script>
 ```
 
@@ -120,17 +122,17 @@ Since Svelte 5.25, deriveds can be reassigned temporarily:
 
 ```svelte
 <script lang="ts">
-  let { post } = $props();
-  let likes = $derived(post.likes);
-  
-  async function optimisticLike() {
-    likes += 1;  // Override temporarily
-    try {
-      await apiCall();
-    } catch {
-      likes -= 1;  // Roll back
-    }
-  }
+	let { post } = $props();
+	let likes = $derived(post.likes);
+
+	async function optimisticLike() {
+		likes += 1; // Override temporarily
+		try {
+			await apiCall();
+		} catch {
+			likes -= 1; // Roll back
+		}
+	}
 </script>
 ```
 
@@ -142,21 +144,22 @@ Run side effects when dependencies change. **Use sparingly - most "effects" shou
 
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  
-  $effect(() => {
-    // Side effect code
-    console.log(`Count: ${count}`);
-    
-    // Optional cleanup
-    return () => console.log('Cleaning up');
-  });
+	let count = $state(0);
+
+	$effect(() => {
+		// Side effect code
+		console.log(`Count: ${count}`);
+
+		// Optional cleanup
+		return () => console.log('Cleaning up');
+	});
 </script>
 ```
 
 ### Timing
 
 Effects run:
+
 - After component mounts
 - After state changes (in microtask)
 - After DOM updates
@@ -164,48 +167,51 @@ Effects run:
 ### Common Use Cases
 
 **Canvas drawing:**
+
 ```svelte
 <script lang="ts">
-  let canvas: HTMLCanvasElement;
-  let color = $state('#ff3e00');
-  
-  $effect(() => {
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    ctx.fillStyle = color;
-    ctx.fillRect(0, 0, 100, 100);
-  });
+	let canvas: HTMLCanvasElement;
+	let color = $state('#ff3e00');
+
+	$effect(() => {
+		if (!canvas) return;
+		const ctx = canvas.getContext('2d');
+		ctx.fillStyle = color;
+		ctx.fillRect(0, 0, 100, 100);
+	});
 </script>
 
 <canvas bind:this={canvas}></canvas>
 ```
 
 **Intervals/timers:**
+
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  let running = $state(true);
-  
-  $effect(() => {
-    if (!running) return;
-    
-    const interval = setInterval(() => count++, 1000);
-    return () => clearInterval(interval);
-  });
+	let count = $state(0);
+	let running = $state(true);
+
+	$effect(() => {
+		if (!running) return;
+
+		const interval = setInterval(() => count++, 1000);
+		return () => clearInterval(interval);
+	});
 </script>
 ```
 
 **Network requests:**
+
 ```svelte
 <script lang="ts">
-  let userId = $state(1);
-  let userData = $state(null);
-  
-  $effect(() => {
-    fetch(`/api/users/${userId}`)
-      .then(r => r.json())
-      .then(data => userData = data);
-  });
+	let userId = $state(1);
+	let userData = $state(null);
+
+	$effect(() => {
+		fetch(`/api/users/${userId}`)
+			.then((r) => r.json())
+			.then((data) => (userData = data));
+	});
 </script>
 ```
 
@@ -215,20 +221,20 @@ Run before DOM updates:
 
 ```svelte
 <script lang="ts">
-  import { tick } from 'svelte';
-  
-  let div: HTMLDivElement;
-  let messages = $state<string[]>([]);
-  
-  $effect.pre(() => {
-    if (!div) return;
-    messages.length;  // Track dependency
-    
-    // Auto-scroll if near bottom
-    if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
-      tick().then(() => div.scrollTo(0, div.scrollHeight));
-    }
-  });
+	import { tick } from 'svelte';
+
+	let div: HTMLDivElement;
+	let messages = $state<string[]>([]);
+
+	$effect.pre(() => {
+		if (!div) return;
+		messages.length; // Track dependency
+
+		// Auto-scroll if near bottom
+		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
+			tick().then(() => div.scrollTo(0, div.scrollHeight));
+		}
+	});
 </script>
 ```
 
@@ -238,17 +244,17 @@ Dependencies are tracked automatically:
 
 ```svelte
 <script lang="ts">
-  let a = $state(1);
-  let b = $state(2);
-  let condition = $state(true);
-  
-  $effect(() => {
-    if (condition) {
-      console.log(a);  // Only `a` and `condition` are dependencies
-    } else {
-      console.log(b);  // Only `b` and `condition` are dependencies
-    }
-  });
+	let a = $state(1);
+	let b = $state(2);
+	let condition = $state(true);
+
+	$effect(() => {
+		if (condition) {
+			console.log(a); // Only `a` and `condition` are dependencies
+		} else {
+			console.log(b); // Only `b` and `condition` are dependencies
+		}
+	});
 </script>
 ```
 
@@ -256,15 +262,15 @@ To exempt something from tracking, use `untrack`:
 
 ```svelte
 <script lang="ts">
-  import { untrack } from 'svelte';
-  
-  let count = $state(0);
-  let other = $state(0);
-  
-  $effect(() => {
-    console.log(count);  // Tracked
-    console.log(untrack(() => other));  // Not tracked
-  });
+	import { untrack } from 'svelte';
+
+	let count = $state(0);
+	let other = $state(0);
+
+	$effect(() => {
+		console.log(count); // Tracked
+		console.log(untrack(() => other)); // Not tracked
+	});
 </script>
 ```
 
@@ -276,13 +282,13 @@ Receive data from parent components.
 
 ```svelte
 <script lang="ts">
-  interface Props {
-    required: string;
-    optional?: number;
-    callback?: (value: string) => void;
-  }
-  
-  let { required, optional = 42, callback }: Props = $props();
+	interface Props {
+		required: string;
+		optional?: number;
+		callback?: (value: string) => void;
+	}
+
+	let { required, optional = 42, callback }: Props = $props();
 </script>
 ```
 
@@ -290,7 +296,7 @@ Receive data from parent components.
 
 ```svelte
 <script lang="ts">
-  let { name, ...rest } = $props();
+	let { name, ...rest } = $props();
 </script>
 
 <div {...rest}>{name}</div>
@@ -300,7 +306,7 @@ Receive data from parent components.
 
 ```svelte
 <script lang="ts">
-  let { class: className, for: htmlFor } = $props();
+	let { class: className, for: htmlFor } = $props();
 </script>
 ```
 
@@ -308,12 +314,12 @@ Receive data from parent components.
 
 ```svelte
 <script lang="ts" generics="T extends { id: number }">
-  interface Props {
-    items: T[];
-    onSelect: (item: T) => void;
-  }
-  
-  let { items, onSelect }: Props = $props();
+	interface Props {
+		items: T[];
+		onSelect: (item: T) => void;
+	}
+
+	let { items, onSelect }: Props = $props();
 </script>
 ```
 
@@ -325,7 +331,7 @@ Make props two-way bindable.
 
 ```svelte
 <script lang="ts">
-  let { value = $bindable(''), disabled = false } = $props();
+	let { value = $bindable(''), disabled = false } = $props();
 </script>
 
 <input bind:value {disabled} />
@@ -337,22 +343,25 @@ Fallback is used when prop is not bound:
 
 ```svelte
 <script lang="ts">
-  let { value = $bindable('default') } = $props();
+	let { value = $bindable('default') } = $props();
 </script>
 
 <!-- Parent can use or not use bind: -->
-<Child value="static" />          <!-- Uses 'static' -->
-<Child bind:value={parentValue} /> <!-- Binds to parent -->
-<Child />                         <!-- Uses 'default' -->
+<Child value="static" />
+<!-- Uses 'static' -->
+<Child bind:value={parentValue} />
+<!-- Binds to parent -->
+<Child />
+<!-- Uses 'default' -->
 ```
 
 ### Function Bindings
 
 ```svelte
 <script lang="ts">
-  let { value = $bindable() } = $props();
+	let { value = $bindable() } = $props();
 </script>
 
 <!-- Parent can use function binding -->
-<Child bind:value={() => value, (v) => value = v.toUpperCase()} />
+<Child bind:value={() => value, (v) => (value = v.toUpperCase())} />
 ```
diff --git a/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md b/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md
index 97c44f9..e7a987f 100644
--- a/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md
+++ b/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md
@@ -6,13 +6,13 @@
 
 ```svelte
 <script lang="ts">
-  interface Props {
-    name: string;
-    age: number;
-    email?: string;
-  }
-  
-  let { name, age, email }: Props = $props();
+	interface Props {
+		name: string;
+		age: number;
+		email?: string;
+	}
+
+	let { name, age, email }: Props = $props();
 </script>
 ```
 
@@ -22,7 +22,7 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  let { name, age }: { name: string; age: number } = $props();
+	let { name, age }: { name: string; age: number } = $props();
 </script>
 ```
 
@@ -32,9 +32,9 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  let count: number = $state(0);
-  let name: string = $state('Alice');
-  let user: User | null = $state(null);
+	let count: number = $state(0);
+	let name: string = $state('Alice');
+	let user: User | null = $state(null);
 </script>
 ```
 
@@ -42,12 +42,12 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  // Will be set later
-  let data = $state<Data | undefined>();
-  
-  $effect(() => {
-    fetchData().then(d => data = d);
-  });
+	// Will be set later
+	let data = $state<Data | undefined>();
+
+	$effect(() => {
+		fetchData().then((d) => (data = d));
+	});
 </script>
 ```
 
@@ -55,14 +55,14 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  interface Todo {
-    id: number;
-    text: string;
-    done: boolean;
-  }
-  
-  let todos = $state<Todo[]>([]);
-  let user = $state<User>({ name: '', email: '' });
+	interface Todo {
+		id: number;
+		text: string;
+		done: boolean;
+	}
+
+	let todos = $state<Todo[]>([]);
+	let user = $state<User>({ name: '', email: '' });
 </script>
 ```
 
@@ -70,18 +70,18 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  class Counter {
-    // Will be initialized in constructor
-    count = $state() as number;
-    
-    constructor(initial: number) {
-      this.count = initial;
-    }
-    
-    increment() {
-      this.count++;
-    }
-  }
+	class Counter {
+		// Will be initialized in constructor
+		count = $state() as number;
+
+		constructor(initial: number) {
+			this.count = initial;
+		}
+
+		increment() {
+			this.count++;
+		}
+	}
 </script>
 ```
 
@@ -89,22 +89,22 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  let count = $state(0);
-  
-  // Type is inferred
-  let doubled = $derived(count * 2);
-  
-  // Explicit type
-  let message: string = $derived(`Count is ${count}`);
-  
-  // Complex derivation
-  let summary = $derived.by((): Summary => {
-    return {
-      count,
-      doubled: count * 2,
-      status: count > 10 ? 'high' : 'low'
-    };
-  });
+	let count = $state(0);
+
+	// Type is inferred
+	let doubled = $derived(count * 2);
+
+	// Explicit type
+	let message: string = $derived(`Count is ${count}`);
+
+	// Complex derivation
+	let summary = $derived.by((): Summary => {
+		return {
+			count,
+			doubled: count * 2,
+			status: count > 10 ? 'high' : 'low',
+		};
+	});
 </script>
 ```
 
@@ -114,42 +114,42 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  interface Props {
-    // Required props
-    id: number;
-    name: string;
-    
-    // Optional props
-    email?: string;
-    age?: number;
-    
-    // Props with defaults (optional)
-    role?: 'admin' | 'user';
-    active?: boolean;
-    
-    // Functions
-    onClick?: (event: MouseEvent) => void;
-    onSubmit: (data: FormData) => void;
-    
-    // Snippets
-    children?: Snippet;
-    header?: Snippet;
-    row?: Snippet<[Item]>;
-  }
-  
-  let {
-    id,
-    name,
-    email,
-    age,
-    role = 'user',
-    active = true,
-    onClick,
-    onSubmit,
-    children,
-    header,
-    row
-  }: Props = $props();
+	interface Props {
+		// Required props
+		id: number;
+		name: string;
+
+		// Optional props
+		email?: string;
+		age?: number;
+
+		// Props with defaults (optional)
+		role?: 'admin' | 'user';
+		active?: boolean;
+
+		// Functions
+		onClick?: (event: MouseEvent) => void;
+		onSubmit: (data: FormData) => void;
+
+		// Snippets
+		children?: Snippet;
+		header?: Snippet;
+		row?: Snippet<[Item]>;
+	}
+
+	let {
+		id,
+		name,
+		email,
+		age,
+		role = 'user',
+		active = true,
+		onClick,
+		onSubmit,
+		children,
+		header,
+		row,
+	}: Props = $props();
 </script>
 ```
 
@@ -157,23 +157,23 @@ For simple components:
 
 ```svelte
 <script lang="ts" generics="T extends { id: number }">
-  interface Props {
-    items: T[];
-    onSelect: (item: T) => void;
-    renderItem?: Snippet<[T]>;
-  }
-  
-  let { items, onSelect, renderItem }: Props = $props();
+	interface Props {
+		items: T[];
+		onSelect: (item: T) => void;
+		renderItem?: Snippet<[T]>;
+	}
+
+	let { items, onSelect, renderItem }: Props = $props();
 </script>
 
 {#each items as item (item.id)}
-  <button onclick={() => onSelect(item)}>
-    {#if renderItem}
-      {@render renderItem(item)}
-    {:else}
-      {item.id}
-    {/if}
-  </button>
+	<button onclick={() => onSelect(item)}>
+		{#if renderItem}
+			{@render renderItem(item)}
+		{:else}
+			{item.id}
+		{/if}
+	</button>
 {/each}
 ```
 
@@ -181,12 +181,12 @@ For simple components:
 
 ```svelte
 <script lang="ts" generics="T, U extends keyof T">
-  interface Props {
-    data: T;
-    key: U;
-  }
-  
-  let { data, key }: Props = $props();
+	interface Props {
+		data: T;
+		key: U;
+	}
+
+	let { data, key }: Props = $props();
 </script>
 
 <p>{data[key]}</p>
@@ -196,16 +196,16 @@ For simple components:
 
 ```svelte
 <script lang="ts" generics="T extends Record<string, any>">
-  interface Props {
-    data: T;
-    keys: Array<keyof T>;
-  }
-  
-  let { data, keys }: Props = $props();
+	interface Props {
+		data: T;
+		keys: Array<keyof T>;
+	}
+
+	let { data, keys }: Props = $props();
 </script>
 
 {#each keys as key}
-  <div>{key}: {data[key]}</div>
+	<div>{key}: {data[key]}</div>
 {/each}
 ```
 
@@ -215,9 +215,9 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  
-  let { children }: { children?: Snippet } = $props();
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children?: Snippet } = $props();
 </script>
 
 {@render children?.()}
@@ -227,19 +227,21 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  
-  interface User {
-    id: number;
-    name: string;
-  }
-  
-  let { row }: { row: Snippet<[User]> } = $props();
-  let users: User[] = [/* ... */];
+	import type { Snippet } from 'svelte';
+
+	interface User {
+		id: number;
+		name: string;
+	}
+
+	let { row }: { row: Snippet<[User]> } = $props();
+	let users: User[] = [
+		/* ... */
+	];
 </script>
 
 {#each users as user}
-  {@render row(user)}
+	{@render row(user)}
 {/each}
 ```
 
@@ -247,13 +249,13 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  
-  let {
-    cell
-  }: {
-    cell: Snippet<[number, number, string]>  // row, col, value
-  } = $props();
+	import type { Snippet } from 'svelte';
+
+	let {
+		cell,
+	}: {
+		cell: Snippet<[number, number, string]>; // row, col, value
+	} = $props();
 </script>
 
 {@render cell(0, 0, 'A1')}
@@ -263,15 +265,15 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  
-  let {
-    header,
-    footer
-  }: {
-    header?: Snippet;
-    footer?: Snippet;
-  } = $props();
+	import type { Snippet } from 'svelte';
+
+	let {
+		header,
+		footer,
+	}: {
+		header?: Snippet;
+		footer?: Snippet;
+	} = $props();
 </script>
 
 {@render header?.()}
@@ -283,13 +285,13 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  let {
-    value = $bindable(''),
-    count = $bindable(0)
-  }: {
-    value?: string;
-    count?: number;
-  } = $props();
+	let {
+		value = $bindable(''),
+		count = $bindable(0),
+	}: {
+		value?: string;
+		count?: number;
+	} = $props();
 </script>
 ```
 
@@ -299,12 +301,12 @@ For simple components:
 
 ```svelte
 <script lang="ts">
-  import type { Component } from 'svelte';
-  import ComponentA from './A.svelte';
-  import ComponentB from './B.svelte';
-  
-  // Type for dynamic component
-  let Current: Component<{ name: string }> = $state(ComponentA);
+	import type { Component } from 'svelte';
+	import ComponentA from './A.svelte';
+	import ComponentB from './B.svelte';
+
+	// Type for dynamic component
+	let Current: Component<{ name: string }> = $state(ComponentA);
 </script>
 
 <Current name="test" />
@@ -316,15 +318,15 @@ Extract props from a component:
 
 ```svelte
 <script lang="ts">
-  import type { ComponentProps } from 'svelte';
-  import MyComponent from './MyComponent.svelte';
-  
-  type MyProps = ComponentProps<typeof MyComponent>;
-  
-  const props: MyProps = {
-    name: 'Alice',
-    age: 30
-  };
+	import type { ComponentProps } from 'svelte';
+	import MyComponent from './MyComponent.svelte';
+
+	type MyProps = ComponentProps<typeof MyComponent>;
+
+	const props: MyProps = {
+		name: 'Alice',
+		age: 30,
+	};
 </script>
 
 <MyComponent {...props} />
@@ -334,9 +336,9 @@ Extract props from a component:
 
 ```svelte
 <script lang="ts">
-  import MyComponent from './MyComponent.svelte';
-  
-  let instance: MyComponent;
+	import MyComponent from './MyComponent.svelte';
+
+	let instance: MyComponent;
 </script>
 
 <MyComponent bind:this={instance} />
@@ -348,21 +350,21 @@ Extract props from a component:
 
 ```svelte
 <script lang="ts">
-  function handleClick(event: MouseEvent) {
-    const button = event.currentTarget as HTMLButtonElement;
-    console.log(button.textContent);
-  }
-  
-  function handleInput(event: Event) {
-    const input = event.target as HTMLInputElement;
-    console.log(input.value);
-  }
-  
-  function handleSubmit(event: SubmitEvent) {
-    event.preventDefault();
-    const form = event.currentTarget as HTMLFormElement;
-    const formData = new FormData(form);
-  }
+	function handleClick(event: MouseEvent) {
+		const button = event.currentTarget as HTMLButtonElement;
+		console.log(button.textContent);
+	}
+
+	function handleInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		console.log(input.value);
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		const form = event.currentTarget as HTMLFormElement;
+		const formData = new FormData(form);
+	}
 </script>
 
 <button onclick={handleClick}>Click</button>
@@ -374,13 +376,13 @@ Extract props from a component:
 
 ```svelte
 <script lang="ts">
-  interface Events {
-    click?: (event: MouseEvent) => void;
-    submit?: (data: FormData) => void;
-    change?: (value: string) => void;
-  }
-  
-  let { click, submit, change }: Events = $props();
+	interface Events {
+		click?: (event: MouseEvent) => void;
+		submit?: (data: FormData) => void;
+		change?: (value: string) => void;
+	}
+
+	let { click, submit, change }: Events = $props();
 </script>
 ```
 
@@ -390,20 +392,20 @@ Extract props from a component:
 
 ```svelte
 <script lang="ts">
-  let div: HTMLDivElement;
-  let input: HTMLInputElement;
-  let canvas: HTMLCanvasElement;
-  
-  $effect(() => {
-    if (div) {
-      console.log(div.offsetWidth);
-    }
-    
-    if (canvas) {
-      const ctx = canvas.getContext('2d');
-      // ctx is CanvasRenderingContext2D | null
-    }
-  });
+	let div: HTMLDivElement;
+	let input: HTMLInputElement;
+	let canvas: HTMLCanvasElement;
+
+	$effect(() => {
+		if (div) {
+			console.log(div.offsetWidth);
+		}
+
+		if (canvas) {
+			const ctx = canvas.getContext('2d');
+			// ctx is CanvasRenderingContext2D | null
+		}
+	});
 </script>
 
 <div bind:this={div}>Content</div>
@@ -420,11 +422,11 @@ Extend HTML attributes for custom elements:
 import type { HTMLAttributes } from 'svelte/elements';
 
 declare module 'svelte/elements' {
-  export interface SvelteHTMLElements {
-    'custom-element': HTMLAttributes<HTMLElement> & {
-      'custom-prop'?: string;
-    };
-  }
+	export interface SvelteHTMLElements {
+		'custom-element': HTMLAttributes<HTMLElement> & {
+			'custom-prop'?: string;
+		};
+	}
 }
 ```
 
@@ -432,33 +434,28 @@ declare module 'svelte/elements' {
 
 ```svelte
 <script lang="ts">
-  import type { Action } from 'svelte/action';
-  
-  interface ClickOutsideParams {
-    enabled: boolean;
-    callback: () => void;
-  }
-  
-  const clickOutside: Action<HTMLElement, ClickOutsideParams> = (
-    node,
-    params
-  ) => {
-    function handleClick(event: MouseEvent) {
-      if (params.enabled && !node.contains(event.target as Node)) {
-        params.callback();
-      }
-    }
-    
-    $effect(() => {
-      document.addEventListener('click', handleClick);
-      return () => document.removeEventListener('click', handleClick);
-    });
-  };
-</script>
-
-<div use:clickOutside={{ enabled: true, callback: () => {} }}>
-  Content
-</div>
+	import type { Action } from 'svelte/action';
+
+	interface ClickOutsideParams {
+		enabled: boolean;
+		callback: () => void;
+	}
+
+	const clickOutside: Action<HTMLElement, ClickOutsideParams> = (node, params) => {
+		function handleClick(event: MouseEvent) {
+			if (params.enabled && !node.contains(event.target as Node)) {
+				params.callback();
+			}
+		}
+
+		$effect(() => {
+			document.addEventListener('click', handleClick);
+			return () => document.removeEventListener('click', handleClick);
+		});
+	};
+</script>
+
+<div use:clickOutside={{ enabled: true, callback: () => {} }}>Content</div>
 ```
 
 ## Wrapper Components
@@ -467,17 +464,17 @@ declare module 'svelte/elements' {
 
 ```svelte
 <script lang="ts">
-  import type { HTMLButtonAttributes } from 'svelte/elements';
-  
-  interface Props extends HTMLButtonAttributes {
-    variant?: 'primary' | 'secondary';
-  }
-  
-  let { variant = 'primary', children, ...rest }: Props = $props();
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		variant?: 'primary' | 'secondary';
+	}
+
+	let { variant = 'primary', children, ...rest }: Props = $props();
 </script>
 
 <button class={variant} {...rest}>
-  {@render children?.()}
+	{@render children?.()}
 </button>
 ```
 
@@ -485,21 +482,21 @@ declare module 'svelte/elements' {
 
 ```svelte
 <script lang="ts">
-  import type { SvelteHTMLElements } from 'svelte/elements';
-  
-  let {
-    as = 'div',
-    children,
-    ...rest
-  }: {
-    as?: keyof SvelteHTMLElements;
-    children?: Snippet;
-    [key: string]: any;
-  } = $props();
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	let {
+		as = 'div',
+		children,
+		...rest
+	}: {
+		as?: keyof SvelteHTMLElements;
+		children?: Snippet;
+		[key: string]: any;
+	} = $props();
 </script>
 
 <svelte:element this={as} {...rest}>
-  {@render children?.()}
+	{@render children?.()}
 </svelte:element>
 ```
 
@@ -509,18 +506,18 @@ If still using stores:
 
 ```svelte
 <script lang="ts">
-  import { writable, type Writable } from 'svelte/store';
-  
-  interface User {
-    name: string;
-    email: string;
-  }
-  
-  const user: Writable<User | null> = writable(null);
+	import { writable, type Writable } from 'svelte/store';
+
+	interface User {
+		name: string;
+		email: string;
+	}
+
+	const user: Writable<User | null> = writable(null);
 </script>
 
 {#if $user}
-  <p>{$user.name}</p>
+	<p>{$user.name}</p>
 {/if}
 ```
 
@@ -530,21 +527,21 @@ If still using stores:
 
 ```svelte
 <script lang="ts">
-  type State =
-    | { status: 'idle' }
-    | { status: 'loading' }
-    | { status: 'success'; data: Data }
-    | { status: 'error'; error: Error };
-  
-  let state = $state<State>({ status: 'idle' });
+	type State =
+		| { status: 'idle' }
+		| { status: 'loading' }
+		| { status: 'success'; data: Data }
+		| { status: 'error'; error: Error };
+
+	let state = $state<State>({ status: 'idle' });
 </script>
 
 {#if state.status === 'loading'}
-  <p>Loading...</p>
+	<p>Loading...</p>
 {:else if state.status === 'success'}
-  <DataView data={state.data} />
+	<DataView data={state.data} />
 {:else if state.status === 'error'}
-  <p>Error: {state.error.message}</p>
+	<p>Error: {state.error.message}</p>
 {/if}
 ```
 
@@ -552,15 +549,15 @@ If still using stores:
 
 ```svelte
 <script lang="ts">
-  type Props =
-    | { mode: 'view'; data: Data }
-    | { mode: 'edit'; data: Data; onSave: (data: Data) => void };
-  
-  let props = $props() as Props;
+	type Props =
+		| { mode: 'view'; data: Data }
+		| { mode: 'edit'; data: Data; onSave: (data: Data) => void };
+
+	let props = $props() as Props;
 </script>
 
 {#if props.mode === 'edit'}
-  <button onclick={() => props.onSave(props.data)}>Save</button>
+	<button onclick={() => props.onSave(props.data)}>Save</button>
 {/if}
 ```
 
@@ -568,23 +565,18 @@ If still using stores:
 
 ```svelte
 <script lang="ts">
-  function isUser(value: unknown): value is User {
-    return (
-      typeof value === 'object' &&
-      value !== null &&
-      'name' in value &&
-      'email' in value
-    );
-  }
-  
-  let data: unknown = $state(null);
-  
-  $effect(() => {
-    if (isUser(data)) {
-      // data is User here
-      console.log(data.name);
-    }
-  });
+	function isUser(value: unknown): value is User {
+		return typeof value === 'object' && value !== null && 'name' in value && 'email' in value;
+	}
+
+	let data: unknown = $state(null);
+
+	$effect(() => {
+		if (isUser(data)) {
+			// data is User here
+			console.log(data.name);
+		}
+	});
 </script>
 ```
 
@@ -594,20 +586,20 @@ Recommended settings:
 
 ```json
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"resolveJsonModule": true,
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules"]
 }
 ```
 
@@ -617,17 +609,17 @@ Recommended settings:
 
 ```svelte
 <script lang="ts">
-  let items = $state<Item[]>([]);
-  
-  // Type not inferred automatically
-  let first = $derived.by(() => {
-    return items[0]; // May need explicit return type
-  });
-  
-  // Better: Add explicit type
-  let first = $derived.by((): Item | undefined => {
-    return items[0];
-  });
+	let items = $state<Item[]>([]);
+
+	// Type not inferred automatically
+	let first = $derived.by(() => {
+		return items[0]; // May need explicit return type
+	});
+
+	// Better: Add explicit type
+	let first = $derived.by((): Item | undefined => {
+		return items[0];
+	});
 </script>
 ```
 
@@ -635,12 +627,12 @@ Recommended settings:
 
 ```svelte
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  
-  // Must specify tuple type for parameters
-  let { row }: { row: Snippet<[Item]> } = $props();
-  
-  // Not: Snippet<Item> (incorrect)
+	import type { Snippet } from 'svelte';
+
+	// Must specify tuple type for parameters
+	let { row }: { row: Snippet<[Item]> } = $props();
+
+	// Not: Snippet<Item> (incorrect)
 </script>
 ```
 
@@ -648,13 +640,13 @@ Recommended settings:
 
 ```svelte
 <script lang="ts" generics="T">
-  // Must constrain generic if accessing properties
-  interface Props {
-    items: T[]; // Works
-    getKey: (item: T) => string; // Works
-  }
-  
-  // If you need to access item.id:
-  // generics="T extends { id: string }"
+	// Must constrain generic if accessing properties
+	interface Props {
+		items: T[]; // Works
+		getKey: (item: T) => string; // Works
+	}
+
+	// If you need to access item.id:
+	// generics="T extends { id: string }"
 </script>
 ```

From dc53ba05e2c7cf114d5d66d4364e0379706e853e Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Fri, 14 Nov 2025 12:10:52 +0100
Subject: [PATCH 3/3] fix: rename skill

---
 plugins/svelte/skills/svelte-code-writer/SKILL.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/svelte/skills/svelte-code-writer/SKILL.md b/plugins/svelte/skills/svelte-code-writer/SKILL.md
index 6f465a6..ee98a3a 100644
--- a/plugins/svelte/skills/svelte-code-writer/SKILL.md
+++ b/plugins/svelte/skills/svelte-code-writer/SKILL.md
@@ -1,5 +1,5 @@
 ---
-name: svelte5-code-writer
+name: svelte-code-writer
 description: Expert guidance for writing proper Svelte 5 code with runes-based reactivity. Use when writing Svelte 5 components, migrating from Svelte 4, or troubleshooting Svelte 5 syntax. Covers $state, $derived, $effect, $props, $bindable, event handling, snippets, TypeScript integration, and common pitfalls.
 ---