feat: claude skill + marketplace

.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."
+		}
+	]
+}

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

documentation/docs/40-claude-plugin/index.md

@@ -0,0 +1,3 @@
+---
+title: Claude Plugin
+---

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
+```

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).

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"
+	}
+}

plugins/svelte/.mcp.json

@@ -0,0 +1,8 @@
+{
+	"mcpServers": {
+		"svelte": {
+			"type": "http",
+			"url": "https://mcp.svelte.dev/mcp"
+		}
+	}
+}

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.