Кастомные слеш-команды Claude Code

Где живут кастомные команды

Один Markdown-файл в .claude/commands становится новым пунктом слеш-меню.

1. 1

   Начните со встроенных команд

   Ввод одного слеша открывает меню команд, встроенное в Claude Code: /add-dir для дополнительных рабочих каталогов, /agents, /clear, /compact, /model, /permissions и другие. Каждая — ярлык к заготовленному действию, и этот список можно расширять — об этом остальная часть гайда.

   

2. 2

   Создайте папку commands в .claude

   Кастомные слеш-команды живут в папке commands внутри каталога .claude проекта — создайте обе, если их нет. Каждый Markdown-файл в этой папке становится одной командой, а имя команды — имя файла.

   

3. 3

   Запишите команду как Markdown-файл

   Здесь файл ui-component.md говорит Claude Code, куда складывать новые компоненты, правило именования PascalCase, какие варианты на основе цветов темы определить, а также создать тестовый файл и гонять его до полного прохождения. Синтаксис @путь подключает другой файл как контекст. Для Claude Code этот файл — просто один большой, тщательно выстроенный промпт.

   

Команда от начала до конца

Перезапустите сессию, выберите /ui-component в меню и дайте Claude собрать компонент по вашим правилам.

1. 4

   Перезапустите и найдите команду в меню

   Claude Code подхватывает новые файлы команд только при старте сессии, поэтому выйдите и запустите заново. Теперь при вводе слеша ui-component стоит первой в меню и помечена как команда проекта — выберите её и нажмите Enter.

   

2. 5

   Подтвердите действия команды

   В файле команды не сказано, какой компонент делать, поэтому Claude Code выбрал карточку и спрашивает разрешения перед mkdir, создающим каталог. Вариант 2 запоминает решение для всех mkdir в этом проекте — повторные запуски проходят без трения.

   

3. 6

   Прочтите сводку запуска, прежде чем доверять

   Через мгновение терминал отчитывается: пять вариантов с цветами темы, три размера, интерактивные состояния, девять прошедших тестов и обновление страницы предпросмотра. Эта сводка — самый быстрый способ проверить запуск, но содержимое каждого файла всё же стоит пролистать.

   

4. 7

   Предпросмотр результата в браузере

   Команда добавила новые карточки на страницу предпросмотра проекта: варианты primary, secondary, success, warning и danger в нескольких размерах, с hover-состояниями — всё из одной слеш-команды.

   

5. 8

   Проверьте тему, о которой не подумали

   У страницы предпросмотра есть переключатель тёмного режима, и сгенерированные компоненты работают и там: та же разметка перекрашивается через переменные темы, на которые указал файл команды. За это и отвечает строчка «используй цвета из переменных темы».

   

Добавляем команде аргументы

Front matter плюс $ARGUMENTS превращают одну команду в переиспользуемый генератор.

1. 9

   Опишите команду во front matter

   Правка файла начинается с front matter — блока метаданных между строками ---. description объясняет, что делает команда, argument-hint показывает формат аргументов; оба выводятся в меню и в строке ввода — больше не нужно открывать файл, чтобы вспомнить синтаксис.

   

2. 10

   Разделите $ARGUMENTS на именованные значения

   Всё, что набрано после имени команды, попадает в переменную $ARGUMENTS. Приём из видео разбирает её на именованные значения строками в стиле markdown-ссылок: [name] принимает имя компонента, [summary] — описание, и инструкции ниже используют их как плейсхолдеры.

   

3. 11

   Получайте подсказку прямо во время ввода

   После очередного перезапуска при выборе команды из меню видны оба поля front matter: description напоминает назначение команды, а призрачный текст показывает формат аргументов — имя компонента, вертикальная черта, затем описание.

   

4. 12

   Вызов команды с аргументами

   В этом вызове передаются icon как имя и «an icon component for showing icons with a circular background» как описание, разделённые вертикальной чертой. Тот же файл команды теперь создаёт именно тот компонент, который вы назвали, а не то, что выбрал бы модель.

   

5. 13

   Посмотрите созданные файлы

   Проводник показывает выгоду именованных аргументов: новая папка Icon в components/ui с Icon.tsx и тестовым файлом, в той же структуре, что и карточка раньше. Одна команда, другой ввод, неизменная структура.

   

6. 14

   Итерируйте по видимому результату

   Первая версия использовала эмодзи-иконки, автор попросил переделать — Claude Code по запросу заменил их на полноценную иконочную библиотеку, и в предпросмотре появились панели действий, индикаторы статуса и пять вариантов. Кастомная команда задаёт нижний предел качества, а ревью — верхний.

   

Продолжить