К основному содержанию
скилл CX Codex

typescript-react-reviewer — скилл для Claude Code: ревью React 19

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

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

Что делает typescript-react-reviewer

Скилл разбирает код по трём уровням приоритета. Критичные проблемы блокируют мерж: производное состояние в useEffect, забытая очистка эффекта, мутация состояния через .push() или .splice(), условные вызовы хуков, key={index} в динамических списках, any без обоснования. Отдельно ловятся ошибки React 19: useFormStatus в том же компоненте, что и <form>, всегда возвращает false, а промис, созданный внутри рендера для use(), даёт бесконечный цикл.

Внутри — таблицы с паттернами и разбором, почему каждый из них ломает приложение, плюс справочные документы: references/react19-patterns.md про новые хуки и границы Server/Client Components, references/antipatterns.md с каталогом антипаттернов и исправлениями, references/checklist.md для полного прохода по коду. Есть краткий гид по выбору стейт-менеджера: серверные данные — TanStack Query, простой глобальный UI-стейт — Zustand, локальный — useState/useReducer.

Скилл советует включить в tsconfig.json флаги strict, noUncheckedIndexedAccess, noImplicitReturns и exactOptionalPropertyTypes. Без noUncheckedIndexedAccess обращение arr[i] не проверяется на undefined, и часть красных флагов по типам пройдёт мимо ревью. Ставится одной командой через npx skills add, файл скилла ложится в каталог платформы.

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

  • найти антипаттерны React в присланном PR
  • отловить производное состояние, спрятанное в useEffect
  • проверить типизацию и найти необоснованные any
  • разобрать ошибки новых хуков React 19
  • оценить, где живёт состояние и не дублируется ли серверное в локальном

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

  • сделай ревью этого компонента на TypeScript и React 19
  • проверь PR на антипаттерны хуков и мутации состояния
  • пройди по чек-листу ревью и оцени, где стоит хранить это состояние

Как установить typescript-react-reviewer

1Через Skills CLI (Vercel)

npx skills add dotneet/claude-code-marketplace --skill typescript-react-reviewer -a claude-code

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

~/.claude/skills/typescript-react-reviewer/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о typescript-react-reviewer

Как установить typescript-react-reviewer в Claude?

Выполните npx skills add dotneet/claude-code-marketplace --skill typescript-react-reviewer -a claude-code. После этого скилл окажется в ~/.claude/skills/typescript-react-reviewer/SKILL.md.

Что делает typescript-react-reviewer?

Проверяет код на TypeScript и React 19 по уровням приоритета: критичные проблемы, которые блокируют мерж, проблемы высокого приоритета и замечания по архитектуре. Отдельно разбирает ошибки хуков React 19 и типизацию.

Какие платформы поддерживаются?

Кроме Claude есть установка для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для Copilot команда другая: gh skill install dotneet/claude-code-marketplace typescript-react-reviewer.

Похожие скиллы

Всё по теме «Код-ревью и рефакторинг» →
typescript-react-patterns agent-skills Скилл с 33 правилами типизации React на TypeScript: пропсы, хуки, события, refs, дженерики и контекст. Пригодится, когда агент пишет компоненты и лезет в типы. CX Codex +1 1 100установок react-code-review giuseppe-trisciuoglio Скилл проверяет React-компоненты и хуки перед мержем: архитектура, зависимости в useEffect, доступность, типы. Полезен, когда правки уже готовы и нужен разбор по серьёзности. CX Codex +1 4 300установок react-best-practices mastra-ai 27 правил производительности и качества React-кода, упорядоченных по приоритету: от устранения водопадов запросов до типизации. CX Codex +1 2 800установок narrow-react-prop-types humanlayer Скилл сужает типы пропсов React-компонента до контракта, который реально используется в живом коде, и заставляет сторис и тесты подстроиться под него. CX Codex +1 1 300установок react-flow-code-review existential-birds Проверяет код на @xyflow/react по чек-листу: антипаттерны, лишние ре-рендеры, типы. Пригодится, когда граф тормозит или ноды пересоздаются. CX Codex +1 319установок typescript-nodejs-nextjs-react-ui-css-cursorrules- PatrickJS Правило для Cursor задаёт стиль кода на TypeScript, Next.js App Router, React и Tailwind. Пригодится, если агент пишет компоненты иначе, чем вы привыкли. ★ 41 011звёзд репо

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

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

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