CommunityCoding & Developmentgithub.com

rbikbov/frontend-starter

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

What is frontend-starter?

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

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rbikbov/frontend-starter/tree/HEAD/.claude/skills/anti-slop-review

Installed? Explore more Coding & Development skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Ревью на нейрослоп

Нейрослоп — это не стиль, а утверждения, которые не подтверждаются, и код, у которого нет причины существовать. Каждая находка ниже проверяется фактом: строкой кода, выводом команды, отсутствием потребителя. Вкусовые замечания и то, что ловит линтер, сюда не входят.

Принципы.

  1. Удаление лучше дописывания. Мёртвую опцию удаляют, а не документируют; маркетинговую фразу заменяют фактом или убирают.
  2. Утверждение проверяется по коду, а не по памяти. Прежде чем назвать строку README ложной или верной, открой файл, о котором она говорит.
  3. Находка без доказательства — не находка. Если не можешь показать file:line или вывод команды — не пиши.
  4. Правки — только по просьбе. По умолчанию результат ревью — список.

1. Порядок работы

  1. Определи объём: diff (git diff main...HEAD), конкретные файлы или весь репозиторий перед публикацией.
  2. Прогони поиск из раздела 3 — он даёт кандидатов, а не находки.
  3. Каждого кандидата проверь чтением кода и отбрось ложные срабатывания.
  4. Пройди чек-лист раздела 2 по тому, что поиск не ловит: README против кода, состояния UI, абстракции.
  5. Если есть возможность запустить приложение — посмотри на страницы: шаблонные экраны и неоформленные компоненты видны сразу.
  6. Выдай отчёт в формате раздела 4.

2. Чек-лист

2.1. Остатки генераторов и шаблонов

  • Стартовые страницы и блоки генераторов: «Get started by editing», ссылки на документацию фреймворка и инструментов, utm_source=…-project, «Give us a star», блоки про облачные сервисы инструмента.
  • Шаблонные файлы: example.spec.ts, тесты, проверяющие только заголовок шаблона; SVG и картинки из шаблона в public/; README генератора.
  • Пустые заглушки: .gitkeep в папках, где уже есть файлы; пустые index.ts; папки-слои без кода.

2.2. Мёртвое и недоделанное

  • Значения конфига или ветки switch, которые бросают «not implemented» / «pending».
  • Перечисления с одним значением, которые выглядят как точка расширения (type: "graphql" | "msw", где msw не реализован).
  • Закомментированный код, TODO без причины и ссылки, неиспользуемые экспорты, зависимости в package.json, которые нигде не импортируются.
  • Скрипты в package.json, которые не запускаются (ссылаются на удалённые файлы, на несуществующие таргеты).

2.3. Документация против кода

Каждое утверждение README, ADR, комментариев и описаний коммитов проверяется:

  • Имена и пути: упомянутые файлы, команды, переменные окружения существуют (next.config.ts в тексте и next.config.js в репозитории — находка).
  • Поведение: «запросы идут напрямую», «токены не доступны JS», «защищено от open redirect» — найди код, который это делает, и проверь граничные случаи.
  • Версии и цифры: версии библиотек, время жизни токенов, покрытие.
  • Будущее в настоящем времени: то, что запланировано, описано как сделанное.
  • Ссылки и якоря в Markdown ведут туда, куда должны (якоря ломаются при правке заголовков).

2.4. Тон

  • Оценочные слова вместо фактов: premium, state-of-the-art, cutting-edge, blazing/lightning-fast, seamless, robust, powerful, modern, production-ready, enterprise-grade, «больше чем просто», «премиальный», «современный», «мощный».
  • Эмодзи в заголовках документации, в UI, в логах и сообщениях коммитов.
  • «Designed with ❤️», «Carefully crafted», бейджи ради бейджей.
  • Комментарии-пересказы («// Получаем пользователя» над getUser()), комментарии-история («// Исправлено», «// Обновлено на X»), комментарии капслоком, отметки «IMPORTANT» без объяснения.
  • Заголовки и комментарии в стиле «🚀 Production Roadmap» и «(Premium Aesthetic)».

Замена — факт: что делает, почему так, какое ограничение.

2.5. Лишние абстракции

  • Интерфейс или фабрика с одной реализацией и без фейка в тестах.
  • Слой, зона, пакет монорепо, стейт-менеджер, Storybook без потребителя или без записанной причины (ADR, раздел README).
  • Обёртки, которые только переименовывают (useAuthApi = () => useStrictContext(Ctx) без логики — допустимо; обёртка над обёрткой — нет).
  • «На будущее»: параметры, которые никто не передаёт, опции конфига с единственным значением.

2.6. Ошибки и асинхронность

  • Вид ошибки определяется по тексту сообщения (message === "unauthorized", includes("invalid password")) — без комментария-причины и тестов.
  • Проверяется только первый элемент массива ошибок (errors[0]).
  • throw { status, ... } — объект вместо Error.
  • Пустой catch, catch, возвращающий пустые данные, .catch(() => {}).
  • Общий in-flight промис, результат которого ждущие не читают (refresh токена «ждём, потом повторяем» без проверки, удался ли он).
  • error.message сервера показывается пользователю как есть.
  • Отсутствуют состояния загрузки, ошибки, пустого списка.

2.7. Безопасность и приватность

  • Персональные данные в логах: email, телефон, имя; токены; тела запросов.
  • Секреты в репозитории или в истории (git log -p), .env в индексе, секреты с префиксом NEXT_PUBLIC_.
  • Редиректы по параметру (callbackUrl, next, returnTo) без проверки, или с проверкой только startsWith("/")/!startsWith("//") — пропускает /\evil.com и управляющие символы.
  • Токены в localStorage/sessionStorage; токен в URL, который не удаляется из адресной строки после чтения.
  • dangerouslySetInnerHTML без санитайзера.

2.8. UI

  • Классы, которых нет в теме: скопированные из shadcn/ui токены (bg-card, text-muted-foreground, bg-primary) в проекте без этих токенов — компонент молча без стилей.
  • Сырые HEX и произвольные значения в компонентах при наличии токенов.
  • Состояние «поле заполнено», выставляемое в onChange: ломается от автозаполнения и reset().
  • key={index} в изменяемых списках; кнопки без type внутри форм; кнопки-иконки без aria-label.
  • SVG из макета с фильтрами (тени, свечение), обрезанными по viewBox, — видимый прямоугольник вокруг логотипа.

2.9. Тесты

  • Тесты, которые проверяют моки, а не поведение; снапшоты больших деревьев.
  • e2e против общего или продового бэкенда, меняющие данные.
  • Тесты, которые проходят только потому, что jsdom не применяет CSS (элемент «скрыт» классом, а тест его находит), и широкие селекторы (/password/i, который совпадает и с «Show password»).

2.10. Git

  • Несвязанные изменения в одном коммите; коммит «fix stuff».
  • Сгенерированные файлы и артефакты сборки в индексе (кроме осознанно закоммиченного сгенерированного API-клиента).
  • Сообщение коммита описывает не то, что в диффе.

3. Поиск кандидатов

Команды дают кандидатов. Каждое совпадение проверяется чтением кода.

# Шаблоны генераторов и маркетинг
rg -n -i "utm_source|get started by editing|give us a star|nx cloud|welcome to|carefully crafted|designed with" \
  --glob '!**/node_modules/**' --glob '!*.lock' --glob '!pnpm-lock.yaml'
rg -n -i "premium|state-of-the-art|cutting-edge|blazing|lightning|seamless|robust|enterprise-grade|production-ready|премиальн|современн|мощн" \
  --glob '!**/node_modules/**'

# Эмодзи в коде, UI и документации
rg -n --pcre2 '[\x{1F300}-\x{1FAFF}\x{2600}-\x{27BF}]' --glob '!**/node_modules/**' --glob '!*.lock'

# Недоделанное
rg -n -i "not implemented|pending implementation|todo|fixme|hack" --glob '!**/node_modules/**'

# Хрупкие ошибки
rg -n "errors\?\.\[0\]|errors\[0\]|message ===|message\.includes|\.includes\(['\"][a-z ]+['\"]\)" src app
rg -n "throw \{" src app
rg -n "catch \{\s*\}|catch \(\w*\) \{\s*\}|\.catch\(\(\) => \{\s*\}\)" src app

# Логи с персональными данными
rg -n "(logger|console)\.\w+\(.*(email|phone|password|token)" src app

# Редиректы и токены
rg -n "callbackUrl|returnTo|redirectTo|searchParams.get\(['\"]next" src app
rg -n "localStorage|sessionStorage" src app

# Классы shadcn без токенов: найди классы и сверь с @theme / tailwind-конфигом
rg -n -o "\b(bg|text|border)-(card|muted|popover|accent|primary|secondary|destructive)(-foreground)?\b" src app | sort -u

# Неиспользуемые зависимости и экспорты (если установлен knip)
pnpm dlx knip

# Секреты в истории
git log -p --all | rg -n -i "(api[_-]?key|secret|password|token)\s*[:=]\s*['\"][A-Za-z0-9_\-]{16,}"
git ls-files | rg -n "(^|/)\.env($|\.)" | rg -v "\.env\.example$"

4. Формат отчёта

Находки — по убыванию важности: безопасность и приватность → ложные утверждения в документации → баги обработки ошибок → мёртвое и недоделанное → шаблоны → тон.

<file>:<line> — <категория>
Что: <одно предложение: что не так, с фактом>
Почему важно: <последствие для пользователя, ревьюера или поддержки>
Исправление: <конкретно; чаще всего «удалить» или «заменить на факт: …»>

В конце — что проверено и не дало находок, и что не проверено (например, приложение не запускалось). Если находок нет — так и сказать, без натянутых замечаний.

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

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

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; навести порядок в молодом проекте после генератора.

Related Skills