Community生产力与协作github.com

rbikbov/frontend-starter

Процесс разработки фичи с агентом: PRD с Non-Goals → компактная спецификация → задачи по одной на коммит → read-only исследование → tracer bullet → сборка с тестом сначала → независимое ревью субагентом → проверка в браузере. Использовать, когда просят сделать фичу, экран, пользовательский сценарий или заметное изменение поведения; когда нужно написать PRD, спецификацию или разбить работу на задачи; когда работа больше одного коммита. Не использовать для опечаток и однострочных правок.

frontend-starter 是什么?

Этот навык (skill) для ИИ-агентов (например, Claude Code) задаёт строгий восьмифазовый процесс разработки фронтенд-фич, предназначенный для минимизации нестабильности и контроля объёма работ. Ключевой принцип — «чем меньше решений агент принимает сам, тем стабильнее результат». Каждая фаза завершается артефактом в `docs/features/<slug>/` и проверкой («воротами»), а для перехода к следующему этапу часто требуется подтверждение человека. Процесс включает: подготовку ветки, создание PRD с обязательными Non-Goals, написание компактной спецификации (до 150 строк), разбивку на задачи по одному коммиту, read-only исследование существующего кода, разработку tracer bullet (сквозной сценарий), сборку с тестированием сначала для логики, независимое ревью субагентом и финальную проверку в браузере. Навык особенно полезен для сложных изменений (фичи, экраны) и неприменим для исправления опечаток. Он поддерживает платформы со стеком React/Next.js и интегрируется с инструментами вроде Playwright или Chrome DevTools MCP для браузерного тестирования.

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rbikbov/frontend-starter/tree/HEAD/.claude/skills/feature-workflow

Installed? Explore more 生产力与协作 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Процесс фичи

Главный принцип: чем меньше решений агент принимает сам, тем стабильнее результат. Каждая фаза заканчивается артефактом в docs/features/<slug>/ и проверкой («воротами»). Там, где помечено, переход дальше — только после подтверждения человека.

Как писать сам код — fsd-frontend; проверка на мусор — anti-slop-review; вход и сессия — frontend-auth-session.


1. Фазы

#ФазаАртефактУтверждаетВорота
0Подготовкаветка—Рабочее дерево чистое; после установки зависимостей и миграций — /clear
1PRDprd.mdчеловекNon-Goals заполнены; критерии проверяемые; нет технических решений
2Спецификацияspec.md, до 150 строкчеловекПокрывает все критерии PRD и ничего сверх
3Задачиtasks.mdчеловекОдна задача — один коммит; первая — tracer bullet
4Исследованиежурнал в tasks.md—Только чтение; найдено, что переиспользовать
5Tracer bulletкоммит—Один сценарий проходит насквозь и виден в браузере
6Сборкакоммит на задачу—Тест сначала для логики; pnpm check зелёный
7Ревьюотчёт reviewerчеловек по находкамПодтверждённые находки исправлены
8Браузерe2e на критичный путь—Сценарии PRD проходят без ошибок в консоли

Маленькая задача (один коммит, без нового поведения для пользователя) пропускает фазы 1–3, но Non-Goals всё равно записываются в описание задачи. Пропуск фазы называется вслух, а не происходит молча.


2. PRD

Шаблон — docs/features/_template/prd.md.

  • Агент составляет черновик из запроса и спрашивает только то, без чего нельзя продолжить. Остальное — допущения в «Открытых вопросах», которые человек подтверждает при утверждении.
  • Non-Goals обязательны. Перечисли то, что агенту захочется сделать «заодно»: адаптив под новые размеры, анимации, i18n, кэширование, админку, рефакторинг соседнего кода. Без этого списка фича разрастается.
  • Критерии готовности проверяемые: «Дано / Когда / Тогда», а не «удобно» и «быстро».
  • Никаких библиотек, файлов и схем: это вопрос «что и зачем», не «как».

3. Спецификация

Шаблон — docs/features/_template/spec.md.

  • До 150 строк. Пишет агент, утверждает человек. Длинная сгенерированная спецификация хуже никакой: она забивает контекст и размывает решения.
  • Перед написанием — короткий read-only обзор затронутых слоёв: что уже есть, что переиспользовать.
  • Содержит: где живёт код (слои, слайсы), контракты данных (схемы zod, маппинг DTO), API (вход, выход, ошибки → kind), состояния UI, граничные случаи, приёмочные сценарии с уровнем теста.
  • Спецификация живёт вместе с кодом. Изменилось поведение — правится spec.md в том же коммите. Код, расходящийся со спецификацией, — дефект одного из двух.

4. Задачи

Шаблон — docs/features/_template/tasks.md.

  • Одна задача — один коммит, после которого проект собирается и проверки проходят. Если агент зашёл в тупик, откат на предыдущий коммит дешевле спора с моделью.
  • Задача помещается в одну сессию; у каждой — «готово, когда».
  • Первая задача — tracer bullet, дальше — состояния, граничные случаи, полировка.

5. Исследование (только чтение)

Перед каждой задачей, без правок файлов:

  • AGENTS.md затронутых папок;
  • существующий код, который решает похожее (rg по именам и контрактам);
  • контракты и типы, на которые задача опирается.

Если найденное понадобится позже — 2–3 строки в журнал tasks.md.

6. Tracer bullet

Один сценарий насквозь: маршрут → страница → фича или сущность → request() → route handler или бэкенд → результат на экране.

  • Это production-код, а не прототип: правильные слои, настоящие контракты из спецификации.
  • Сознательно без: подробной валидации, полировки состояний загрузки и ошибок, стилей, граничных случаев.
  • Бэкенд не готов — обработчик MSW или route handler, отдающий данные по контракту из спецификации; это отмечается в tasks.md.
  • Проверка — в браузере: сценарий проходит и в консоли нет ошибок.

7. Сборка

  • Логика — тест сначала: чистые функции, сторы, маппинг ответов, хуки с ветвлением. Тест должен упасть по ожидаемой причине, потом — код. Тест, написанный после кода, склонен проверять то, что код делает, а не то, что требуется.
  • Вёрстка и стили — без теста заранее: их проверяет браузер (фаза 8), критичный путь закрывается e2e.
  • После задачи: pnpm check, коммит (lint-staged проверит изменённые файлы).
  • Остановка: три неудачные попытки исправить одно и то же — стоп. Опиши человеку, что пробовал и какая гипотеза. Не подгоняй тесты под код, не отключай правила линтера, не ослабляй типы.
  • Всё, что вне задачи, — в журнал «потом», а не в этот коммит.

8. Ревью

  • Субагент reviewer (.claude/agents/reviewer.md) с чистым контекстом: передай путь к prd.md и spec.md и диапазон коммитов; diff он прочитает сам. Автор кода свои ошибки видит хуже: в его контексте — аргументы, почему решение верное.
  • Подтверждённые находки исправляются, спорные — решает человек.
  • Безопасность смотрит и человек: вход, сессии, редиректы, cookie, пользовательский ввод в HTML. Зелёные проверки этого не гарантируют: на практике открытый редирект проходил тесты, а нечитаемая страница ошибки — линтер.

9. Браузер

  • Next.js: скилл next-dev-loop с agent-browser, если установлен; иначе Playwright или Chrome DevTools MCP.
  • Пройди сценарии PRD, включая негативные: пустые данные, ошибка сети, повторная отправка. Смотри консоль и статусы запросов.
  • Для UI — светлая и тёмная тема, ширина телефона.
  • Критичный путь — e2e-тест в e2e/.
  • Готово, когда каждый критерий PRD проверен; в итоговом сообщении — список критериев и как проверен каждый.

10. Контекст

  • Состояние работы живёт в docs/features/<slug>/, а не в переписке: новую сессию начинай с чтения prd.md, spec.md, tasks.md.
  • После шумных шагов (установка, миграции, длинные логи) — /clear.
  • Параллельные эксперименты — в git worktree, не в рабочей ветке.

11. Чего не делать

  • Бесконечные уточняющие вопросы: спрашивай то, что блокирует, остальное — допущения в PRD.
  • Оркестраторы из многих агентов: достаточно исполнителя и ревьюера.
  • Спецификации и документация, которые никто не утверждал и не читает.
  • Молчаливый пропуск фаз и «заодно поправил».

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

rbikbov/frontend-starter

Creates Architecture Decision Records documenting key technical decisions with context, alternatives considered, tradeoffs, consequences, and decision owners. Use when documenting "architecture decisions", "technical choices", "design decisions", or "ADRs".

rbikbov/frontend-starter

Проверка фронтенд-кода и документации на «нейрослоп» перед коммитом, PR или публикацией репозитория: остатки генераторов, мёртвые и недоделанные опции, утверждения в README и комментариях, не подтверждённые кодом, маркетинговый тон и эмодзи, лишние абстракции, хрупкая обработка ошибок, персональные данные в логах, несуществующие классы стилей. Использовать, когда просят проверить код или репозиторий «на слоп», подготовить проект к публикации или показу, сделать ревью кода, написанного с помощью ИИ, или перед тем как закоммитить собственную большую правку.

rbikbov/frontend-starter

Авторизация и сессия во фронтенде на Next.js (App Router): где хранить токены, BFF на route handlers с HttpOnly-cookie, refresh токена без гонок, определение «не авторизован» (включая GraphQL, который отвечает 200), проверки в proxy.ts и Data Access Layer, безопасный редирект после входа, выход без утечки данных прошлого пользователя, токены в ссылках сброса пароля, формы входа и восстановления. Использовать, когда проектируешь или пишешь вход, регистрацию, восстановление пароля, защищённые страницы, API-клиент с refresh-токеном, или ревьюишь такой код.

rbikbov/frontend-starter

Старт нового фронтенд-проекта на Next.js (App Router) + TypeScript: фундамент, который закладывается до первой фичи. Использовать, когда нужно: создать проект с нуля; решить, нужны ли Next.js, монорепо, BFF, микрофронтенды; разложить FSD поверх роутинга Next; завести строгий TS, линтер границ, env-конфиг, модель ошибок и API-клиент, тесты, git-хуки, CI, каркас README; навести порядок в молодом проекте после генератора.

相关技能