Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

svelte-code-writer — Claude Code skill: what it does, how to install

Fetches Svelte 5 documentation and analyzes components using autofixer. Useful when authoring or debugging .svelte and .svelte.ts files.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-code
Open on GitHub

What svelte-code-writer does

This skill connects to the @sveltejs/mcp CLI via npx. By running list-sections, the agent inspects the table of contents for Svelte 5 and SvelteKit documentation, then fetches targeted passages with get-documentation. This keeps code generation aligned with modern runes.

To check component syntax, it runs svelte-autofixer on a file path or inline snippet. The tool detects common pitfalls and outputs recommendations. It targets Svelte 5 by default. Passing --svelte-version 4 or an exact version from package.json switches checks to the requested release, while --async enables async mode.

Shell escaping requires extra care when testing inline snippets. The dollar character in runes like $state must be escaped as \$, otherwise the shell expands it as an empty environment variable before the CLI runs.

What it helps with

  • validate Svelte components with autofixer before finalizing edits
  • fetch official Svelte 5 documentation for runes like $state and $derived
  • browse available Svelte and SvelteKit documentation topics via list-sections
  • target Svelte 4 validation rules using the --svelte-version flag

Example prompts for the agent

  • Check `./src/lib/Component.svelte` with svelte-autofixer and fix any issues
  • Fetch documentation for `$state` and `$derived` before refactoring this file
  • Run `list-sections` to see all available SvelteKit documentation topics

How to install svelte-code-writer

1Skills CLI (Vercel)

npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-code

2Manually: put the files in place

~/.claude/skills/svelte-code-writer/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/svelte-code-writer/

From the same set2

The whole set →
svelte-core-bestpractices sveltejs A skill that tells the agent how to write Svelte components with runes: $state, $derived, events, styling. Useful as soon as the agent edits a Svelte project. Claude Code CX Codex Cursor +1 10,700installs

Similar

react18-dep-compatibility official github Checks minimum dependency versions for React 18.3.1 and React 19. Use it during React upgrades and when resolving peer dependency conflicts. GitHub Copilot 764installs react-19 prowler-cloud Skill for React 19 with React Compiler: no manual memoization, server components first, ref as a prop. Claude Code CX Codex Cursor +1 671installs react18-batching-patterns official github Diagnoses and fixes React 18 automatic batching bugs in class components. Useful when upgrading from React 17 breaks state assertions or async flows. GitHub Copilot 754installs react18-legacy-context official github This skill migrates React legacy context to createContext and coordinates the provider with every consumer. Use it for class component context migrations. GitHub Copilot 745installs react18-lifecycle-patterns official github Migrates unsafe class component lifecycle methods to React 18.3.1 patterns. Helps prepare legacy code for React 19 before breaking changes arrive. GitHub Copilot 743installs wp-block-development WordPress A WordPress skill for Claude Code, Codex and Cursor that walks an agent through Gutenberg block work, from block.json metadata down to deprecations. Claude Code CX Codex Cursor +1 5,500installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about svelte-code-writer

How to install svelte-code-writer in Claude Code?

Run npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-code in your terminal.

What does svelte-code-writer do?

It provides CLI commands via @sveltejs/mcp to look up official Svelte 5 documentation and analyze components with svelte-autofixer.

Does svelte-code-writer support Svelte 4 projects?

Yes. Pass --svelte-version 4 or the exact version string from your package.json to the autofixer command.

Source text

SKILL.md · MIT 
---
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` subagent for optimal results.
---

## 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, 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:**

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

© sveltejs · MIT · sveltejs/ai-tools

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor