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..ee98a3a
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/SKILL.md
@@ -0,0 +1,198 @@
+---
+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.
+---
+
+# 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..961b0be
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/MIGRATION.md
@@ -0,0 +1,596 @@
+# 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..836df4f
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/PATTERNS.md
@@ -0,0 +1,553 @@
+# 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..b98cb1a
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/PITFALLS.md
@@ -0,0 +1,390 @@
+# 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..1a34ad1
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/RUNES.md
@@ -0,0 +1,367 @@
+# 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..e7a987f
--- /dev/null
+++ b/plugins/svelte/skills/svelte-code-writer/references/TYPESCRIPT.md
@@ -0,0 +1,652 @@
+# 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>
+```