# application-performance-frontend-developer

Субагент для сборки компонентов на React 19 и Next.js 15 с фокусом на скорость загрузки. Следит за доступностью по WCAG и метриками Core Web Vitals.

- субагент · `type=agent` · Claude Code, Codex, Cursor · ★ 41823
- Автор: Seth Hobson
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/wshobson/agents/tree/HEAD/plugins/application-performance/agents/frontend-developer.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/agents/application-performance-frontend-developer

## Что делает

Субагент специализируется на коде для React 19 и Next.js 15 App Router. Он выстраивает архитектуру клиентских и серверных компонентов, настраивает Server Actions и потоковую передачу данных через Suspense. В стек заложена работа с хуками `useActionState` и `useOptimistic`.

Субагент проверяет разметку на соответствие стандартам WCAG 2.1 и 2.2 уровня AA. Для оформления интерфейсов он использует Tailwind CSS или CSS Modules. Данные синхронизируются через TanStack Query или SWR. Также субагент готовит сценарии для React Testing Library и Playwright.

Инструкции жёстко ориентированы на стек React 19+ и Next.js 15+. В проектах со старыми версиями фреймворка предложенные серверные функции сразу вызовут ошибки сборки.

## Установка

### Claude Code (родная платформа)

1. **Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add wshobson/agents
```
В чате агента (не в терминале):
```text
/plugin install application-performance@claude-code-workflows
```

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

### Codex

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

### Cursor

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/wshobson/agents/tree/HEAD/plugins/application-performance/agents/frontend-developer.md

## Когда брать
- настроить Server Actions с оптимистичными обновлениями интерфейса
- ускорить загрузку страниц и улучшить метрики Core Web Vitals
- внедрить доступную навигацию и разметку по стандарту WCAG 2.2
- настроить сквозные тесты с помощью Playwright

## Примеры запросов агенту
- Собери форму с использованием Server Actions и хука useOptimistic для списка задач
- Оптимизируй рендеринг таблицы данных, чтобы снизить показатели LCP и CLS
- Напиши доступный компонент модального окна с поддержкой клавиатуры по стандарту WCAG

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

Из того же набора: [wshobson/agents](https://affpapa.org/nevibecode/by/wshobson/agents.md) — 508 карточек

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

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