mcpField
S
svelte-code-writer

svelte-code-writer

github.com/sveltejsDevelopment33513.2k installsUpdated 2d ago
Repository

About svelte-code-writer

svelte-code-writer is a Svelte coding skill for developers working with Svelte and SvelteKit. It uses the @sveltejs/mcp CLI to retrieve documentation and run a version-aware code autofixer before components are finalized.

Key features

  1. 01List Svelte documentation sections
  2. 02Retrieve selected documentation
  3. 03Analyze code with svelte-autofixer
  4. 04Target Svelte 4 or 5
  5. 05Support async Svelte mode

Use cases

  1. 01Looking up Svelte 5 rune syntax
  2. 02Reviewing a component for common issues
  3. 03Checking code against a Svelte version
  4. 04Fetching relevant SvelteKit documentation

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sveltejs/ai-tools --skill svelte-code-writer

After installing, type/svelte-code-writerin Claude Code to confirm it loaded.

Details

From the project README

CLI tools

You have access to @sveltejs/mcp CLI for Svelte-specific assistance. Use these commands via npx:

List documentation sections
npx @sveltejs/mcp list-sections

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

Get documentation
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."

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

Example:

npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
Svelte autofixer
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, ideally the full version from package.json (e.g. 5.16.0) so version-specific suggestions are enabled. The major must be 4 or 5 (default: 5)

Examples:

# 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

Comments

Markdown supported