home / skills / sveltejs / mcp / svelte-code-writer

svelte-code-writer skill

safe

/plugins/svelte/skills/svelte-code-writer

This skill helps you edit and analyze Svelte components using MCP tooling to ensure accurate, documented, and compliant code.

npx playbooks add skill sveltejs/mcp --skill svelte-code-writer

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.9 KB

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

Overview

This skill provides CLI tools for Svelte 5 documentation lookup and automated code analysis. It must be used whenever creating or editing Svelte components (.svelte) or Svelte modules (.svelte.ts/.svelte.js) to ensure syntax correctness and up-to-date patterns. Run it inside the svelte-file-editor agent when available for best context and results.

How this skill works

The skill exposes npx commands from @sveltejs/mcp to list documentation sections, fetch targeted docs, and run the svelte-autofixer analyzer on code or files. Use list-sections to discover topics, get-documentation to retrieve full docs for those topics, and svelte-autofixer to scan code and suggest automatic fixes for common Svelte issues. When passing code with Svelte runes like $state or $derived in a shell, escape the $ as \$ to avoid variable expansion.

When to use it

Creating a new Svelte 5 component or Svelte module file
Editing existing .svelte, .svelte.ts, or .svelte.js files
Before committing changes to ensure Svelte idioms and syntax are correct
When unsure about Svelte 5 feature usage or migration details
During code review to provide automated suggestions and lint-like fixes

Best practices

Run npx @sveltejs/mcp list-sections first to find the exact docs you need
Fetch only relevant documentation sections with get-documentation to save time
Run svelte-autofixer on the specific file path rather than piping large projects, when possible
Escape $ characters (use \$) when passing inline code to the CLI to prevent shell substitution
Prefer running the skill inside the svelte-file-editor agent to include file and context awareness

Example use cases

Discover the correct usage of new Svelte 5 primitives before implementing a component
Automatically fix common migration issues when upgrading from Svelte 4 to Svelte 5
Validate .svelte and .svelte.ts files as part of a pre-commit or CI step
Quickly pull full documentation sections for teaching or code examples during development
Run svelte-autofixer on a component to surface styling, reactivity, or API misuse suggestions

FAQ

Do I need to install anything globally?

No. Use the CLI via npx (npx @sveltejs/mcp ...) so you do not need a global install.

How do I pass inline code with $state to the CLI?

Escape the dollar sign as \$ (for example: npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>').