svelte-code-writer

작성자: sveltejs

Svelte 5 문서 조회 및 코드 분석을 위한 CLI 도구로, 내장된 자동 수정 기능을 제공합니다. 세 가지 핵심 명령어로 구성됩니다: list-sections는 사용 가능한 문서를 탐색하고, get-documentation은 특정 주제의 전체 문서를 가져오며, svelte-autofixer는 코드를 분석하고 수정 제안을 합니다. Autofixer는 --svelte-version 플래그를 통해 Svelte 4 및 5를 대상으로 지정할 수 있고, --async 옵션으로 비동기 모드를 지원합니다. 인라인 코드(이스케이프된 $ 문자 포함)와 파일 경로를 모두 분석 대상으로 받아들입니다.

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

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