AIKraft/AI/Войти
AIKraft/Skills/react-dev

react-dev

Навык для создания React-компонентов на TypeScript, типизации хуков и обработки событий. Применяется при работе с React 18-19, Server Components, TanStack Router и React Router.

softaworks official Разработка ★ 2.5k

Что делает навык

Навык обеспечивает типобезопасную разработку React-компонентов на TypeScript, включая типизацию хуков, событий и обобщённых компонентов. Он поддерживает современные паттерны React 18-19, Server Components, TanStack Router и React Router v7.

Когда применять

  • Создание типизированных React-компонентов с использованием ComponentPropsWithoutRef и дискриминированных объединений для variant-пропсов.
  • Типизация пользовательских хуков с использованием as const для кортежных возвращаемых значений и явного указания типов для useState/useRef.
  • Реализация Server Components с асинхронным получением данных и Server Actions ('use server') в React 19.
  • Настройка типобезопасного роутинга с использованием TanStack Router (Zod) или React Router v7 (Framework Mode).
  • Обработка событий с использованием специфичных типов событий (MouseEvent, FormEvent и др.) вместо any.

Как работает

  1. Определять пропсы компонентов, расширяя нативные элементы через ComponentPropsWithoutRef и используя ReactNode для детейлов.
  2. Применять специфичные типы событий для обработчиков (например, React.MouseEvent<HTMLButtonElement>) и явные типы для useState (unions/null).
  3. В React 19 использовать ref как обычный пропс вместо forwardRef, а useActionState вместо deprecated useFormState.
  4. Для обобщённых компонентов использовать generics с ключами keyof T и ограничением типов (extends) для безопасности.
  5. В Server Components использовать асинхронные функции и 'use server' для мутаций, передавая промисы в клиентские компоненты для unwrap через use().

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

Создай типизированный React-компонент Button с variant-пропсами, используя дискриминированное объединение и ComponentPropsWithoutRef.
Напиши пользовательский хук useToggle с типизацией кортежа возврата через as const и обработчиком событий клавиатуры.
Реализуй Server Component с асинхронным получением данных пользователя и передачей промиса в клиентский компонент через use().

Описание составлено по SKILL.md навыка, сверено 07.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «react-dev» из репозитория: # https://github.com/softaworks/agent-toolkit
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r react-dev/ ~/.claude/skills/react-dev/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.