@sveltejs/opencode 0.0.2 → 0.1.0

package/README.md

@@ -0,0 +1,75 @@
+# @sveltejs/opencode
+
+OpenCode plugin for Svelte that provides the Svelte MCP server, a specialized file editor subagent and instruction files.
+
+## Installation
+
+Add `@sveltejs/opencode` to your OpenCode config (either global or local):
+
+```json
+{
+	"$schema": "https://opencode.ai/config.json",
+	"plugin": ["@sveltejs/opencode"]
+}
+```
+
+That's it! You now have the Svelte MCP server and the file editor subagent configured automatically.
+
+## Features
+
+### Svelte MCP Server
+
+The plugin automatically configures the [Svelte MCP server](https://mcp.svelte.dev) which provides:
+
+- **list-sections** - Discover available Svelte 5 and SvelteKit documentation sections
+- **get-documentation** - Retrieve full documentation content for specific sections
+- **svelte-autofixer** - Analyze Svelte code and get issues/suggestions
+- **playground-link** - Generate Svelte Playground links with provided code
+
+### Svelte File Editor Subagent
+
+A specialized subagent (`svelte-file-editor`) that is automatically used when creating, editing, or reviewing `.svelte`, `.svelte.ts`, or `.svelte.js` files. It fetches relevant documentation and validates code using the Svelte MCP server tools.
+
+### Agent Instructions
+
+The plugin injects instructions that teach the agent how to effectively use the Svelte MCP tools.
+
+## Configuration
+
+The default configuration:
+
+```json
+{
+	"$schema": "https://raw.githubusercontent.com/sveltejs/mcp/refs/heads/main/packages/opencode/schema.json",
+	"mcp": {
+		"type": "remote",
+		"enabled": true
+	},
+	"subagent": {
+		"enabled": true
+	},
+	"instructions": {
+		"enabled": true
+	}
+}
+```
+
+### Configuration Options
+
+| Option                 | Type                    | Default    | Description                                                                      |
+| ---------------------- | ----------------------- | ---------- | -------------------------------------------------------------------------------- |
+| `mcp.type`             | `"remote"` \| `"local"` | `"remote"` | Use the remote server at `mcp.svelte.dev` or run locally via `npx @sveltejs/mcp` |
+| `mcp.enabled`          | `boolean`               | `true`     | Enable/disable the MCP server                                                    |
+| `subagent.enabled`     | `boolean`               | `true`     | Enable/disable the Svelte file editor subagent                                   |
+| `instructions.enabled` | `boolean`               | `true`     | Enable/disable agent instructions injection                                      |
+
+### Config File Location
+
+Place your configuration at one of these locations:
+
+- `~/.config/opencode/svelte.json` (global)
+- `$OPENCODE_CONFIG_DIR/svelte.json` (if `OPENCODE_CONFIG_DIR` is set, takes priority)
+
+## License
+
+MIT

package/config.ts

@@ -15,6 +15,9 @@ const default_config = {
 	instructions: {
 		enabled: true,
 	},
+	skills: {
+		enabled: true,
+	},
 };
 
 export const config_schema = v.object({
@@ -34,6 +37,11 @@ export const config_schema = v.object({
 			enabled: v.optional(v.boolean()),
 		}),
 	),
+	skills: v.optional(
+		v.object({
+			enabled: v.optional(v.boolean()),
+		}),
+	),
 });
 
 export type McpConfig = v.InferInput<typeof config_schema>;
@@ -104,6 +112,10 @@ function merge_with_defaults(user_config: Partial<McpConfig>): McpConfig {
 			...default_config.instructions,
 			...user_config.instructions,
 		},
+		skills: {
+			...default_config.skills,
+			...user_config.skills,
+		},
 	};
 }
 

package/index.ts

@@ -12,6 +12,8 @@ export const svelte_plugin: Plugin = async (ctx) => {
 			input.agent ??= {};
 			input.mcp ??= {};
 			input.instructions ??= [];
+			// @ts-expect-error -- types are wrong in the opencode package...will fix there and remove this
+			input.skills ??= [];
 			// by default we use svelte as the name for the svelte MCP server
 			let svelte_mcp_name = 'svelte';
 			// we loop over every mcp server to see if any of them is already the svelte MCP server
@@ -35,6 +37,12 @@ export const svelte_plugin: Plugin = async (ctx) => {
 				input.instructions.push(...instructions_paths.map((file) => join(instructions_dir, file)));
 			}
 
+			if (mcp_config.skills?.enabled !== false) {
+				const skills_dir = join(current_dir, 'skills');
+				// @ts-expect-error -- skills is a new opencode feature
+				input.skills.push(skills_dir);
+			}
+
 			// if the user doesn't have the MCP server already we add one based on config
 			if (!input.mcp[svelte_mcp_name] && mcp_config.mcp?.enabled !== false) {
 				if (mcp_config.mcp?.type === 'remote') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/opencode",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "type": "module",
   "license": "MIT",
   "homepage": "https://github.com/sveltejs/mcp#readme",
@@ -10,7 +10,8 @@
   "files": [
     "index.ts",
     "config.ts",
-    "instructions"
+    "instructions",
+    "skills"
   ],
   "repository": {
     "type": "git",
@@ -24,7 +25,7 @@
     "valibot": "^1.2.0"
   },
   "devDependencies": {
-    "@opencode-ai/plugin": "^1.1.21",
+    "@opencode-ai/plugin": "^1.1.44",
     "@valibot/to-json-schema": "^1.5.0",
     "@types/node": "^24.3.1"
   },

package/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