# Expert React Frontend Engineer

Субагент для GitHub Copilot, который настраивает генерацию компонентов на React с новыми хуками и серверной архитектурой на TypeScript.

- субагент · `type=agent` · GitHub Copilot · ★ 40418
- Автор: github · официальный репозиторий GitHub
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/github/awesome-copilot/tree/HEAD/agents/expert-react-frontend-engineer.agent.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/agents/expert-react-frontend-engineer

## Что делает

Субагент задаёт правила разработки под React 19.2. В его фокусе находится отказ от устаревших подходов вроде классовых компонентов или избыточной ручной мемоизации. Передачу `ref` агент оформляет напрямую в пропсы без вызовов `forwardRef`, а контекст рендерит без обёртки `Provider`.

В конфигурацию заложены инструменты доступа к коду `codebase` и `search`, выполнение консольных команд через `runCommands` и запуск тестов с помощью `runTests`. Для поиска актуальных рекомендаций подключён инструмент `microsoft.docs.mcp`. За счёт этого ассистент может проверять интерфейсы и находить причины падения тестов прямо в редакторе.

Агент бесполезен в проектах со старым классовым кодом, потому что инструкции требуют исключительно функциональный стиль и обработку форм через Actions.

## Установка

### GitHub Copilot (родная платформа)

**Вручную: положить файлы**
- Файл: `.github/agents/expert-react-frontend-engineer.agent.md`

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/agents/expert-react-frontend-engineer.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию. Поле tools у Copilot перечисляет инструменты по-своему — уберите его или перепишите под Claude Code

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/expert-react-frontend-engineer.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/expert-react-frontend-engineer.md` — Cursor понимает и .claude/agents/

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/github/awesome-copilot/tree/HEAD/agents/expert-react-frontend-engineer.agent.md

## Когда брать
- перевести формы на Actions и хук useActionState
- настроить Server Components с изоляцией серверного кода
- написать тесты интерфейса через Vitest и React Testing Library
- внедрить компонент Activity для сохранения состояния экранов

## Примеры запросов агенту
- Перепиши форму профиля на Actions с оптимистичным обновлением через useOptimistic
- Сделай компонент таблицы со строгой типизацией TypeScript и поддержкой доступности
- Настрой загрузку данных через хук use и Suspense вместо useEffect

## Похожие
- [frontend-developer](https://affpapa.org/nevibecode/agents/voltagent-community-frontend-developer.md) — субагент · 40905 установок
- [ui-ux-designer](https://affpapa.org/nevibecode/agents/ui-ux-designer.md) — субагент · 27069 установок
- [fullstack-developer](https://affpapa.org/nevibecode/agents/fullstack-developer.md) — субагент · 18117 установок
- [javascript-pro](https://affpapa.org/nevibecode/agents/javascript-pro.md) — субагент · 4974 установки
- [ui-designer](https://affpapa.org/nevibecode/agents/voltagent-community-ui-designer.md) — субагент · 1979 установок
- [ui-designer](https://affpapa.org/nevibecode/agents/ui-designer.md) — субагент · 1979 установок

Из того же набора: [github/awesome-copilot](https://affpapa.org/nevibecode/by/github/awesome-copilot.md) — 861 карточка

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md