Version Packages (#136)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

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

.github/workflows/check.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.26.2
+          version: 10.27.0
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/lint.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.26.2
+          version: 10.27.0
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/release-svelte-skill.yml

@@ -0,0 +1,45 @@
+name: Release Svelte Code Writer Skill
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'plugins/svelte/skills/svelte-code-writer/**'
+  workflow_dispatch:
+
+permissions: {}
+
+jobs:
+  release:
+    permissions:
+      contents: write
+    # prevents this action from running on forks
+    if: github.repository == 'sveltejs/mcp'
+    name: Release Svelte Code Writer Skill
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v6
+
+      - name: Get version from date
+        id: version
+        run: echo "version=$(date +'%Y.%m.%d-%H%M%S')" >> $GITHUB_OUTPUT
+
+      - name: Create zip
+        run: |
+          cd plugins/svelte/skills
+          zip -r svelte-code-writer.zip svelte-code-writer/
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: svelte-code-writer-v${{ steps.version.outputs.version }}
+          name: Svelte Code Writer Skill v${{ steps.version.outputs.version }}
+          body: |
+            Automated release of the Svelte Code Writer skill.
+
+            This release was triggered by changes to the `plugins/svelte/skills/svelte-code-writer/` directory.
+          files: plugins/svelte/skills/svelte-code-writer.zip
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.26.2
+          version: 10.27.0
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

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 Code Plugin
+---

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

@@ -0,0 +1,23 @@
+---
+title: Overview
+---
+
+The open source [repository](https://github.com/sveltejs/mcp) containing the code for the MCP server is also a Claude Code Marketplace plugin.
+
+The marketplace allow you to install the `svelte` plugin which will give you both the remote MCP server, 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, and a specialized agent for editing Svelte files.
+
+If possible is recommended to instruct the LLM to execute MCP calls with the agent (you can explicitly mention an agent in your message to delegate work to it) when creating or editing `.svelte` files or `.svelte.ts`/`.svelte.js` modules as it helps save context by handling Svelte-specific tasks more efficiently.
+
+## 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 Markdown 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/tree/main/plugins/svelte/skills) repo (it's in the `/plugins/svelte/skills` folder). You can also download the latest zip file from the [releases page](https://github.com/sveltejs/mcp/releases?q=svelte-code-writer) 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).

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

@@ -0,0 +1,11 @@
+---
+title: Subagent
+---
+
+The Svelte plugin includes a specialized subagent called `svelte-file-editor` designed for creating, editing, and reviewing Svelte files.
+
+## Benefits
+
+The subagent is executed in a separate "agent" that has access to it's own context window. This allows the agent to fetch the documentation, iterate with the `svelte-autofixer` tool and write to the file system without wasting context in the main agent.
+
+The delegation should happen automatically when appropriate, but you can also explicitly request the subagent be used for Svelte-related tasks.

package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"description": "The official Svelte MCP server implementation",
 	"type": "module",
-	"packageManager": "pnpm@10.26.2",
+	"packageManager": "pnpm@10.27.0",
 	"scripts": {
 		"build": "pnpm -r run build",
 		"dev": "pnpm --filter @sveltejs/mcp-remote run dev",

packages/mcp-server/src/mcp/handlers/tools/svelte-autofixer.test.ts

@@ -53,6 +53,18 @@ describe('svelte-autofixer tool', () => {
 		);
 	});
 
+	it('should add suggestions for snippets declared in script tag', async () => {
+		const content = await autofixer_tool_call(`<script>
+			{#snippet my_snippet()}
+				some content
+			{/snippet}
+		</script>`);
+		expect(content.issues.length).toBeGreaterThan(0);
+		expect(content.suggestions).toContain(
+			"The code can't be compiled because a Javascript parse error. The error suggests you have a `{#snippet ...}` block inside the `<script>` tag. Snippets are template syntax and should be declared in the markup section of the component, not in the script. Move the snippet outside of the `<script>` tag. Snippets declared in the markup can also be accessed in the script tag in case you need them.",
+		);
+	});
+
 	it('should error out if async is true with a version less than 5', async () => {
 		const content = await autofixer_tool_call(
 			`<script>

packages/mcp-server/src/mcp/handlers/tools/svelte-autofixer.ts

@@ -75,14 +75,21 @@ export async function svelte_autofixer_handler({
 
 		await add_eslint_issues(content, code, +desired_svelte_version, filename, async);
 	} catch (e: unknown) {
-		const error = e as Error & { start?: { line: number; column: number } };
+		const error = e as Error & { start?: { line: number; column: number }; frame?: string };
 		content.issues.push(
 			`${error.message} at line ${error.start?.line}, column ${error.start?.column}`,
 		);
 		if (error.message.includes('js_parse_error')) {
-			content.suggestions.push(
-				"The code can't be compiled because a Javascript parse error. In case you are using runes like this `$state variable_name = 3;` or `$derived variable_name = 3 * count` that's not how runes are used. You need to use them as function calls without importing them: `const variable_name = $state(3)` and `const variable_name = $derived(3 * count)`.",
-			);
+			// Check if the error frame contains template syntax that was incorrectly placed in the script tag
+			if (error.frame?.includes('{#snippet')) {
+				content.suggestions.push(
+					"The code can't be compiled because a Javascript parse error. The error suggests you have a `{#snippet ...}` block inside the `<script>` tag. Snippets are template syntax and should be declared in the markup section of the component, not in the script. Move the snippet outside of the `<script>` tag. Snippets declared in the markup can also be accessed in the script tag in case you need them.",
+				);
+			} else {
+				content.suggestions.push(
+					"The code can't be compiled because a Javascript parse error. In case you are using runes like this `$state variable_name = 3;` or `$derived variable_name = 3 * count` that's not how runes are used. You need to use them as function calls without importing them: `const variable_name = $state(3)` and `const variable_name = $derived(3 * count)`.",
+				);
+			}
 		} else if (error.message.includes('css_expected_identifier')) {
 			content.suggestions.push(
 				"The code can't be compiled because a valid CSS identifier is expected. This sometimes means you are trying to use a variable in CSS like this: `color: {my_color}` but Svelte doesn't support that. You can use inline CSS variables for that `<div style:--color={my_color}></div>` and then use the variable as usual in CSS with `color: var(--color)`.",

packages/mcp-stdio/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sveltejs/mcp
 
+## 0.1.17
+
+### Patch Changes
+
+- fix: add suggestion for snippets declared in script tag ([#132](https://github.com/sveltejs/mcp/pull/132))
+
 ## 0.1.16
 
 ### Patch Changes

packages/mcp-stdio/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/mcp",
-	"version": "0.1.16",
+	"version": "0.1.17",
 	"type": "module",
 	"license": "MIT",
 	"mcpName": "dev.svelte/mcp",

packages/mcp-stdio/server.json

@@ -9,7 +9,7 @@
 		"subfolder": "packages/mcp-stdio",
 		"source": "github"
 	},
-	"version": "0.1.16",
+	"version": "0.1.17",
 	"websiteUrl": "https://svelte.dev/docs/mcp/overview",
 	"icons": [
 		{
@@ -25,7 +25,7 @@
 		{
 			"registryType": "npm",
 			"identifier": "@sveltejs/mcp",
-			"version": "0.1.16",
+			"version": "0.1.17",
 			"runtimeHint": "npx",
 			"transport": {
 				"type": "stdio"

plugins/svelte/.claude-plugin/plugin.json

@@ -0,0 +1,8 @@
+{
+	"name": "svelte",
+	"description": "A plugin for all things related to 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/agents/svelte-file-editor.md

@@ -0,0 +1,63 @@
+---
+name: svelte-file-editor
+description: Specialized Svelte 5 code editor. MUST BE USED PROACTIVELY when creating, editing, or reviewing any .svelte file or .svelte.ts/.svelte.js module and MUST use the tools from the MCP server. Fetches relevant documentation and validates code using the Svelte MCP server tools.
+---
+
+You are a Svelte 5 expert responsible for writing, editing, and validating Svelte components and modules. You have access to the Svelte MCP server which provides documentation and code analysis tools. Always use the tools from the svelte MCP server to fetch documentation with `get_documentation` and validating the code with `svelte_autofixer`. If the autofixer returns any issue or suggestions try to solve them.
+
+## Available MCP Tools
+
+### 1. list-sections
+
+Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths. Use this first to discover what documentation is available.
+
+### 2. get-documentation
+
+Retrieves full documentation for specified sections. Accepts a single section name or an array of section names. Use after `list-sections` to fetch relevant docs for the task at hand.
+
+**Example sections:** `$state`, `$derived`, `$effect`, `$props`, `$bindable`, `snippets`, `routing`, `load functions`
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns suggestions to fix issues. Pass the component code directly to this tool. It will detect common mistakes like:
+
+- Using `$effect` instead of `$derived` for computations
+- Missing cleanup in effects
+- Svelte 4 syntax (`on:click`, `export let`, `<slot>`)
+- Missing keys in `{#each}` blocks
+- And more
+
+## Workflow
+
+When invoked to work on a Svelte file:
+
+### 1. Gather Context (if needed)
+
+If you're uncertain about Svelte 5 syntax or patterns, use the MCP tools:
+
+1. Call `list-sections` to see available documentation
+2. Call `get-documentation` with relevant section names
+
+### 2. Read the Target File
+
+Read the file to understand the current implementation.
+
+### 3. Make Changes
+
+Apply edits following Svelte 5 best practices:
+
+### 4. Validate Changes
+
+After editing, ALWAYS call `svelte-autofixer` with the updated code to check for issues.
+
+### 5. Fix Any Issues
+
+If the autofixer reports problems, fix them and re-validate until no issues remain.
+
+## Output Format
+
+After completing your work, provide:
+
+1. Summary of changes made
+2. Any issues found and fixed by the autofixer
+3. Recommendations for further improvements (if any)

plugins/svelte/skills/svelte-code-writer/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: svelte-code-writer
+description: CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating or editing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.
+---
+
+# Svelte 5 Code Writer
+
+## CLI Tools
+
+You have access to `@sveltejs/mcp` CLI for Svelte-specific assistance. Use these commands via `npx`:
+
+### List Documentation Sections
+
+```bash
+npx @sveltejs/mcp list-sections
+```
+
+Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.
+
+### Get Documentation
+
+```bash
+npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."
+```
+
+Retrieves full documentation for specified sections. Use after `list-sections` to fetch relevant docs.
+
+**Example:**
+
+```bash
+npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
+```
+
+### Svelte Autofixer
+
+```bash
+npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]
+```
+
+Analyzes Svelte code and suggests fixes for common issues.
+
+**Options:**
+
+- `--async` - Enable async Svelte mode (default: false)
+- `--svelte-version` - Target version: 4 or 5 (default: 5)
+
+**Examples:**
+
+```bash
+# Analyze inline code (escape $ as \$)
+npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'
+
+# Analyze a file
+npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte
+
+# Target Svelte 4
+npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4
+```
+
+**Important:** When passing code with runes (`$state`, `$derived`, etc.) via the terminal, escape the `$` character as `\$` to prevent shell variable substitution.
+
+## Workflow
+
+1. **Uncertain about syntax?** Run `list-sections` then `get-documentation` for relevant topics
+2. **Reviewing/debugging?** Run `svelte-autofixer` on the code to detect issues
+3. **Always validate** - Run `svelte-autofixer` before finalizing any Svelte component

pnpm-lock.yaml

@@ -47,8 +47,8 @@ catalogs:
       specifier: ^3.12.5
       version: 3.12.5
     globals:
-      specifier: ^16.0.0
-      version: 16.4.0
+      specifier: ^17.0.0
+      version: 17.0.0
     prettier:
       specifier: ^3.4.2
       version: 3.6.2
@@ -195,7 +195,7 @@ importers:
         version: 3.12.5(eslint@9.36.0(jiti@2.6.0))(svelte@5.39.6)(ts-node@10.9.2(@types/node@24.5.2)(typescript@5.9.2))
       globals:
         specifier: catalog:lint
-        version: 16.4.0
+        version: 17.0.0
       node-resolve-ts:
         specifier: catalog:tooling
         version: 1.0.2
@@ -277,7 +277,7 @@ importers:
         version: 3.12.5(eslint@9.36.0(jiti@2.6.0))(svelte@5.39.6)(ts-node@10.9.2(@types/node@24.5.2)(typescript@5.9.2))
       globals:
         specifier: catalog:lint
-        version: 16.4.0
+        version: 17.0.0
       prettier:
         specifier: catalog:lint
         version: 3.6.2
@@ -2833,6 +2833,10 @@ packages:
     resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
     engines: {node: '>=18'}
 
+  globals@17.0.0:
+    resolution: {integrity: sha512-gv5BeD2EssA793rlFWVPMMCqefTlpusw6/2TbAVMy0FzcG8wKJn4O+NqJ4+XWmmwrayJgw5TzrmWjFgmz1XPqw==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -6795,6 +6799,8 @@ snapshots:
 
   globals@16.4.0: {}
 
+  globals@17.0.0: {}
+
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1

pnpm-workspace.yaml

@@ -18,7 +18,7 @@ catalogs:
     eslint-plugin-import: ^2.32.0
     eslint-plugin-pnpm: ^1.3.0
     eslint-plugin-svelte: ^3.12.5
-    globals: ^16.0.0
+    globals: ^17.0.0
     prettier: ^3.4.2
     prettier-plugin-svelte: ^3.3.3
     svelte-eslint-parser: ^1.4.0