Svelte Code Writer
Create, edit, or analyze Svelte 5 and SvelteKit components with official docs lookup and autofixer CLI instead of guessing runes syntax.
Overview
Svelte Code Writer is an agent skill for the Build phase that looks up Svelte 5 docs and runs the Svelte autofixer CLI whenever you touch .svelte or Svelte module files.
Install
npx skills add https://github.com/sveltejs/ai-tools --skill svelte-code-writerWhat is this skill?
- Mandatory for any create/edit/analyze pass on .svelte or .svelte.ts/.svelte.js files
- npx @sveltejs/mcp list-sections and get-documentation for Svelte 5 and SvelteKit docs
- svelte-autofixer CLI with --async and --svelte-version 4|5 targeting
- Documented workflow: list sections first, then fetch comma-separated section keys
- Recommended execution inside svelte-file-editor agent when available
- 3 CLI command families: list-sections, get-documentation, svelte-autofixer
Adoption & trust: 5.4k installs on skills.sh; 266 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are editing Svelte 5 components but the agent hallucinates runes APIs or Kit patterns without grounded documentation.
Who is it for?
Indie devs building with Svelte 5 or SvelteKit who want doc-backed edits and analysis on every component change.
Skip if: Non-Svelte stacks, backend-only API work, or repos with no .svelte files where MCP doc pulls add noise.
When should I use this skill?
MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js).
What do I get? / Deliverables
Component and module changes are validated against fetched Svelte 5/SvelteKit sections and autofixer suggestions before you commit UI work.
- Doc-backed component edits
- Autofixer analysis output for inline or file paths
Recommended Skills
Journey fit
How it compares
Official Svelte MCP CLI integration for components—not a generic React or Vue coding skill.
Common Questions / FAQ
Who is svelte-code-writer for?
Builders using Svelte 5 or SvelteKit who want agents to pull real documentation and run autofixer on components instead of guessing syntax.
When should I use svelte-code-writer?
Use it in Build whenever you create, edit, or analyze any .svelte file or .svelte.ts/.svelte.js module—the skill marks this as mandatory for those paths.
Is svelte-code-writer safe to install?
It invokes npx and network calls to @sveltejs/mcp; check the Security Audits panel on this page and restrict shell/network in untrusted environments.
SKILL.md
READMESKILL.md - Svelte Code Writer
# 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