SDD, frontend и мой опыт с Claude Code

Сложная тема — SDD (Spec Driven Development) и фронтэнд. Вообще, когда вам надо съесть барана, то лучше это делать по частям (ну или как там звучит эта поговорка?).

Можно ли нагенерировать кучу md-файлов, тасок, агентов, скилов? Конечно, можно. Но будет ли это оптимально работать?.. И как вообще с этим работать? Вопросики...

В общем, я решила есть этого барана по кусочкам. Потому что подумала, что просить ИИ что-то сделать в строке — прошлый век, и стоит двигаться в сторону автоматизации его работы, ну или хотя бы лежать в направлени SDD.

Исходные данные — Claude Code и уже существующий и активно разрабатывающийся проект.

Кусочек 1 — CLAUDE.md

Попросила Клода создать этот файл. Он был создан, прочитан мной, одобрен и благополучно положен в корень проекта. Большой, развесистый, содержал всю важную и не очень информацию о проекте.

Так он пролежал у меня несколько месяцев, когда я осознала, что этот файл будет читаться при выполнении каждого запроса. Тогда я подумала, что он избыточен, и попросила Клода его сжать и выбросить ненужные части. CLAUDE.md стал компактнее, а я удалила разделы о деплое и о том, что мне обычно не нужно в разработке.

Кусочек 2 — agents & skills

Хорошо бы создать своих агентов, верно? Пусть сами тесты запускают и линтеры. Поразмышляла какие мне нужны. Создала три скила:

• lint-checker (проверка линтера)
• package-updater (обновление пакетов)
• update-changelog (обновить changelog)

 И написала одного агента:

• code-reviewer (делать код-ревью)

Думаю, для начала мне должно хватить. А дальше будет понятно можно ли чем-то дополнить этот список.

Кусочек 3 — tasks

Переходим к самому интересному. Моменту, где надо самому описывать задачу, а не скидывать на ИИ. Почему это самый интересный момент? Потому что здесь, в task.md начинаешь «работу» над задачей, т. е. шаг за шагом описываешь что нужно сделать. И это достаточно увлекательно, так как обычно я работаю без предварительного плана, разбираюсь в проекте и по ходу понимаю какие части надо обновлять, какие зависимости существуют и т. п. Здесь же вначале идёт «инвестигирование» проекта с прописыванием шагов. Каждый шаг — это по сути тот запрос, который бы я написала в консоле ИИ. Только список позволяет увидеть всю поэтапность.

Вначале у меня был просто список задач, которые даже не до конца реализуют мою основную таску. Мне хотелось посмотреть как Клод справится. Как и полагается по SDD, он создал plan.md файл, в котором очень подробно расписал что и как будет делать. Перечитав его, я запустила выполняться. Прекрасно!

Дальше я хотела продолжить добавлять задачки, но не удалять список уже выполненных. В итоге родилась вот такая структура с уже выполненными ([x]), не выполненными ([ ]) и задачами, которые пока не нужно делать, но удобно держать на виду ([-]).

Пример моего промта со списком задач:

Skip all done or skipped steps, create plan for next steps implementation and then mark them as done:

- [x] in Drawer at the right side add icon button with icon 'TableView' from MUI
- [x] by clicking on this button open new CustomPopup with 'Custom parameters' title and close button
- [x] save this popup in "components/shared/popups"
- [ ] update mock "mocks/data/resources.ts", add a list of custom parameters
- [ ] 
- [ ] 
- [-] check linter
- [-] run tests
- [-] update changelog
 

Мне нравится, что здесь виден и прогресс, и планирование следующих шагов. Правда после выполнения второй интерации Клод не стал перезаписывать plan.md файл, а сразу запустил выполнение. И хотя я явно указывала только создать план, не стала его исправлять. Так как в проекте я всё равно вычитываю код и мне нужно, чтобы он был именно таким как я хочу. А чтение plan.md файла, а потом чтение самого кода занимает не только время, но и внимание. В общем, решила пока что скипать часть с plan.md.

Что ещё мне понравилось в таком списке задач — это планирование. Часто при разработке я делаю пометки чтобы не забыть проверить используемость какой-то переменной по всему проекту, или написать тесты на какую-то функцию или переименовать что-то, что пока не так важно. Обычно я пишу это списком в тетрадке или месенджерах, в общем, в совершенно не подходящих местах. Теперь появляется «официальное» место этим пунктикам — в списке предстоящих задач, которые пока не нужно выполнять. И это лучшее место! ^_^

Кусочек 4 — итеративность

Теперь поворяем предыдущий шаг, пока не выполнится вся задача. И это тот самый кусочек с косточкой, который застревает в горле и который не так-то легко переварить.

В идеале, по SDD, если ИИ делает не то, что нам нужно, нужно переписывать промт и запускать заново, пока не получится. К сожалению, так не работает во фронтэнде. Ну либо же я не готова тратить столько времени на «вылизывание» промта, в котором я чуть ли не явно напишу нужную функцию. Всё-таки иногда быстрее написать именно функцию, не так ли? Поэтому на этом шаге я всё ещё перехожу в «ручной режим» с использованием ИИшной консоли. Хотя даже так Клод не всегда предлагает рабочее решение. Потому что это фронтэнд, детка. А фронтэнд — это часто про смекалку, про найти элегантное решение в стилях, про придумывание костыля, про нахождения компромиса с оптимизацией. Собственно этим он мне и нравится)) Что не все решения можно нагуглить.

Поэтому не вижу ничего страшного, чтобы всё ещё делать какие-то вещи руками. Если это экономит не только время разработки. 

Кусочек 5 — сохранение

После второй итерации я задумалась о том, чтобы все эти файлы (agents, skills, tasks) куда-то сохранять. Всё-таки не хочется внезапно потерять наработанный флоу, ну или как минимум чтобы иметь возможность поднять его на другом компе.

Если не хранить это в текущем репозитории (а я пока не видела, чтобы так делали), можно создать другой, и коммитить файлы из папки .claude туда. Для этого удобно использовать сабмодули:

git submodule add git@github.com:MsSterh/my-project-claude.git .claude

Выводы

Я описала свой опыт работы с Claude Code и SDD. Конечно, со временем этот процесс будет меняться, так же как сейчас я постоянно обновляю файлы tasks или agents и skills, когда нахожу, что мне чего-то не хватает, или я хочу, чтобы это работало по-другому. Всё исправляется и шлифуется в процессе работы. И мне кажется, что это всё очень индивидуально и нет одного универсального и правильного подхода. У каждого будет свой способ работы с агентами в зависимости от предпочтений, привычек, проекта и самого агента. Главное — не бояться и экспериментировать!