Svelte Code Writer

This skill provides access to official Svelte tooling via MCP (Model Context Protocol). Use these tools to ensure code correctness and access up-to-date documentation.

Available MCP Tools

You have direct access to these Svelte MCP tools. Call them as tools, NOT as bash commands.

1. List Documentation Sections

Tool: mcp__svelte__list-sections

Lists all available Svelte 5 and SvelteKit documentation sections. Each section includes use cases to help identify relevant docs.

When to use: Before looking up documentation, to find the right section names.

2. Get Documentation

Tool: mcp__svelte__get-documentation

Parameters:

• •section (required): Section name(s) to retrieve. Can be a single string or array of strings.

Examples:

section: "$state"
section: ["$state", "$derived", "$effect"]
section: "routing"
section: ["form-actions", "load"]

When to use:

• •Unsure about Svelte 5 syntax
• •Need to verify runes usage
• •Looking up SvelteKit patterns (routing, load functions, etc.)
• •Checking transition/animation APIs

3. Svelte Autofixer

Tool: mcp__svelte__svelte-autofixer

Analyzes Svelte code and returns suggestions to fix issues.

Parameters:

• •code (required): The Svelte component source code
• •desired_svelte_version (required): Use 5 for Svelte 5 projects
• •filename (optional): Component filename (e.g., "Button.svelte")
• •async (optional): Set true if using async Svelte mode

When to use:

• •After writing any Svelte component
• •Before committing changes
• •When debugging reactivity issues
• •To catch Svelte 4 syntax in Svelte 5 projects

4. Playground Link Generator

Tool: mcp__svelte__playground-link

Generates a Svelte REPL playground link for code sharing.

Parameters:

• •name (required): Name for the playground
• •tailwind (required): Set true if code uses Tailwind CSS
• •files (required): Object mapping filenames to content

Example:

{
	"name": "Counter Example",
	"tailwind": true,
	"files": {
		"App.svelte": "<script>let count = $state(0);</script>\n<button onclick={() => count++}>{count}</button>"
	}
}

When to use:

• •User asks to share or preview code
• •Creating examples for documentation
• •Debugging with minimal reproduction

Recommended Workflow

When Creating a New Component

1. •Check docs if needed: Use list-sections then get-documentation for relevant topics
2. •Write the component using Svelte 5 patterns
3. •Validate: Run svelte-autofixer on the completed code
4. •Fix any issues the autofixer identifies
5. •Re-validate until no issues remain

When Editing an Existing Component

1. •Read the file to understand current implementation
2. •Make changes using Svelte 5 syntax
3. •Validate: Run svelte-autofixer on the updated code
4. •Fix issues if any are found

When Debugging

1. •Run svelte-autofixer on the problematic component
2. •Check relevant docs with get-documentation
3. •Apply fixes based on suggestions

Common Documentation Lookups

Tip: Use mcp__svelte__list-sections first to see all available sections with their use cases, then fetch the relevant ones.

Important Notes

1. •Always use Svelte 5 syntax - This project uses runes ($state, $props, etc.)
2. •Always validate before finalizing - Run autofixer on every component
3. •These are MCP tools, not CLI commands - Call them directly as tools
4. •Check package.json for version - Read it to confirm Svelte version if uncertain
5. •Autofixer returns suggestions - Review and apply fixes manually, then re-run until clean

Mandatory Validation Workflow

BEFORE marking any Svelte task complete:

1. •Run mcp__svelte__svelte-autofixer with the full component code
2. •Review suggestions returned
3. •Fix any issues identified
4. •Re-run autofixer until no issues remain
5. •Only THEN respond to the user

This is NOT optional. Skipping validation leads to broken code that frustrates users.