К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

svelte-code-writer — скилл для Claude Code: что делает

Скилл ищет официальную документацию Svelte 5 и проверяет компоненты через autofixer. Пригодится при написании и правке файлов .svelte или .svelte.ts.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-code
Открыть на GitHub

Что делает svelte-code-writer

Скилл вызывает утилиты пакета @sveltejs/mcp через npx. С помощью команды list-sections агент получает перечень доступных глав документации Svelte 5 и SvelteKit, а затем запрашивает нужный текст через get-documentation. Это даёт точные примеры по рунам прямо во время генерации кода.

Для проверки разметки и логики запускается svelte-autofixer. Утилита разбирает файл или фрагмент кода, находит частые ошибки и даёт готовые рекомендации. Анализатор изначально настроен на Svelte 5. Если передать флаг --svelte-version 4 или точный номер из package.json, он включит правила под конкретный релиз. Флаг --async активирует асинхронный режим.

При передаче кода в терминал символ доллара в рунах нужно экранировать как \$. Если этого не сделать, командная оболочка воспримет $state или $derived как системную переменную и подставит пустоту.

Какие задачи решает

  • проверить компонент утилитой autofixer перед сохранением
  • загрузить документацию по рунам $state и $derived
  • получить список разделов справки Svelte 5 и SvelteKit
  • настроить анализ синтаксиса под Svelte 4 через --svelte-version

Примеры запросов агенту

  • Проверь файл `./src/lib/Component.svelte` через svelte-autofixer и исправь ошибки
  • Найди в документации разделы про `$state` и покажи примеры использования
  • Запусти `list-sections` и покажи доступные темы документации по SvelteKit

Как установить svelte-code-writer

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/svelte-code-writer/

Из того же набора2

Весь набор →

Похожие

react18-dep-compatibility официальный github Проверяет минимальные версии зависимостей для React 18.3.1 и React 19. Пригодится при обновлении React и разборе peer dependency конфликтов. GitHub Copilot 764установок react-19 prowler-cloud Скилл для работы с React 19 и React Compiler: без ручной мемоизации, серверные компоненты первыми, ref как проп. Claude Code CX Codex Cursor +1 671установок react18-batching-patterns официальный github Находит и устраняет регрессии автоматического батчинга в классовых компонентах React 18. Помогает исправить баги после обновления с React 17. GitHub Copilot 754установок react18-legacy-context официальный github Скилл переводит legacy context в React на createContext и помогает синхронно обновить provider и всех consumers. Нужен для миграции class components. GitHub Copilot 745установок react18-lifecycle-patterns официальный github Переводит устаревшие методы жизненного цикла классовых компонентов на стандарт React 18.3.1. Пригодится при подготовке легаси-кода к React 19. GitHub Copilot 743установок wp-block-development WordPress Скилл для Claude Code, Codex и Cursor: агент ведёт блок Gutenberg от block.json до миграций, не ломая сохранённую разметку. Claude Code CX Codex Cursor +1 5 500установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о svelte-code-writer

Как установить svelte-code-writer в Claude Code?

Выполните команду npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-code в терминале проекта.

Что делает скилл svelte-code-writer?

Он обращается к CLI-инструментам @sveltejs/mcp, чтобы скачивать документацию Svelte 5 и проверять код компонентов перед сохранением.

Можно ли проверять проекты на Svelte 4?

Да, для этого утилите svelte-autofixer передают аргумент --svelte-version 4 или точную версию из package.json.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой