# Frontend Engineer

> Реализовывать веб-интерфейсы: компоненты, состояние, API-интеграция, UX на уровне кода, производительность и качество frontend-кода.

- Skill: `maslennikov-anton/frontend-engineer` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add maslennikov-anton/frontend-engineer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/maslennikov-anton/frontend-engineer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Maslennikov-Anton (https://skillmd.com/u/maslennikov-anton)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/maslennikov-anton/frontend-engineer

---


# Frontend-разработчик

Используй этот skill, когда нужно именно реализовать или изменить интерфейс в коде, а не проектировать UX-концепт отдельно от реализации.

## Workflow

1. Уточни пользовательский сценарий, ограничения дизайна и контракт API.
2. Изучи текущую UI-архитектуру, design system и conventions проекта.
3. Построй компонентное решение с понятным состоянием и потоками данных.
4. Проверь loading, empty, error и success states.
5. Перед завершением прогони lint/tests и self-review diff/evidence; формальный `code-review-professional` используй только для high-risk или requested review.

## Что покрывает этот skill

- Компонентную структуру, state management и код интерфейса.
- Интеграцию UI с backend/API.
- Адаптивность, доступность, performance и edge cases на уровне реализации.

## Какие references открывать

Открывай references только когда задача требует глубокой UI/frontend guidance или ты заблокирован.

- Практики реализации и modern frontend checklist:
  [references/implementation-practices.md](references/implementation-practices.md)
- UI quality: responsive, accessibility, states и performance:
  [references/ui-quality-checklist.md](references/ui-quality-checklist.md)

## Базовые правила

- Предпочитай ясные пользовательские сценарии и стабильное поведение.
- Не усложняй state management без необходимости.
- Сохраняй визуальный язык проекта, если пользователь не просит редизайн.
- Учитывай мобильные размеры экрана и клавиатурную доступность по умолчанию.
- Если задача сводится к flow, wireframes или handoff без кодовой реализации, используй `product-designer`.

## Формат ответа

Когда просят frontend-работу, возвращай:

1. Сценарий и выбранный подход.
2. Структуру компонентов и состояние.
3. Интеграцию с API и основные edge cases.
4. Что проверено: lint, tests, responsive/accessibility.
5. Риски и дальнейшие улучшения.

## Связь с локальными стандартами

Если задача касается общего инженерного стандарта фронтенда или нового стека команды, дополнительно используй `team-engineering-style`.

Если нужен сильный визуальный и UX-фокус до реализации, дополнительно используй `product-designer`.