Frontend Developer Agent — агент Claude Code для фронтенда на React, Vue и Vite. Помогает быстро собирать UI-компоненты, делать адаптивную верстку, управлять состоянием и улучшать производительность по общепринятым бест практикам.
Установка
Установи Frontend Developer Agent через Claude Code Templates CLI:
npx claude-code-templates@latest --agent development-team/frontend-developer
Агент сохраняется в
.claude/agents/frontend-developer.md внутри проекта:your-project/
├── .claude/
│ └── agents/
│ └── frontend-developer.md # ← агент здесь
├── src/
│ └── components/
├── package.json
└── README.md
Как использовать агент
Запусти Claude Code и явно укажи агент в промпте:
# Запуск Claude Code
claude
# Затем напиши промпт с указанием агента
> Используй агент frontend-developer, чтобы создать компонент Button на React с TypeScript. Компонент должен поддерживать варианты (primary, secondary, danger) и размеры (sm, md, lg).
Агент сгенерирует код с фокусом на:
- полноценный React-компонент с интерфейсом пропсов
- решение для стилизации (Tailwind CSS или styled-components)
- реализацию управления состоянием при необходимости
- базовую структуру unit-тестов
- чеклист по доступности
Примеры использования
Пример 1: создание компонента Product Card
claude
> Используй агент frontend-developer, чтобы создать компонент ProductCard с изображением, названием, ценой и кнопкой «Добавить в корзину». Сделай компонент адаптивным и доступным.
Результат: React-компонент с mobile-first дизайном, корректными ARIA-атрибутами и оптимизированной загрузкой изображений.
Пример 2: реализация управления состоянием
claude
> Используй агент frontend-developer, чтобы реализовать корзину покупок с использованием Context API. Добавь действия для добавления, удаления товаров и изменения количества.
Результат: Context-провайдер с reducerом, типизированными экшенами и кастомными хуками для доступа к состоянию корзины.
Пример 3: Vue-компонент с Vite
claude
> Используй агент frontend-developer, чтобы создать таблицу данных на Vue 3 с использованием Vite. Добавь сортировку, фильтрацию и пагинацию.
Результат: Vue-компонент на Composition API, реактивное управление состоянием через Pinia и оптимизированная конфигурация сборки Vite.
Подробнее об агентах в Claude Code смотри в официальной документации по sub-agents.