NEW BOT Телеграм, страница

Не запускай --dangerously-skip-permissions в домашней директории.

😁14

4.08K views17:10

Можно разрабатывать приложения на React, Vue и Vite быстрее с помощью Frontend Developer Agent для Claude Code

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.

1👍14🤯5

4.55K views05:11