Labsco
sveltejs logo

svelte-code-writer

★ 284

by sveltejs · part of sveltejs/ai-tools

CLI tools for Svelte 5 documentation lookup and code analysis with built-in autofixer. Three core commands: list-sections to browse available docs, get-documentation to fetch full documentation for specific topics, and svelte-autofixer to analyze code and suggest fixes Autofixer supports Svelte 4 and 5 targeting via --svelte-version flag and async mode via --async option Accepts both inline code (with escaped $ characters) and file paths for analysis Designed for use within the...

🔥🔥🔥✓ VerifiedFreeQuick setup
#git
🧰 Not standalone. This skill ships with sveltejs/ai-tools and only works together with that tool — install the tool first, then add this skill.

CLI tools for Svelte 5 documentation lookup and code analysis with built-in autofixer. Three core commands: list-sections to browse available docs, get-documentation to fetch full documentation for specific topics, and svelte-autofixer to analyze code and suggest fixes Autofixer supports Svelte 4 and 5 targeting via --svelte-version flag and async mode via --async option Accepts both inline code (with escaped $ characters) and file paths for analysis Designed for use within the...

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

name: svelte-code-writer description: CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing 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

Copy & paste — that's it
npx @sveltejs/mcp list-sections

Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.

Get Documentation

Copy & paste — that's it
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."

Retrieves full documentation for specified sections. Use after list-sections to fetch relevant docs.

Example:

Copy & paste — that's it
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"

Svelte Autofixer

Copy & paste — that's it
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:

Copy & paste — that's it
# 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