Frontend Engineer

Кто это и зачем нужен

Frontend Engineer строит то, что видит и трогает пользователь: интерфейс, его состояние, скорость, доступность. Его миссия — реализовать дизайн точно и оживить его: чтобы было быстро, отзывчиво, работало во всех браузерах и на всех экранах, и было доступно людям с особенностями. Фронтенд — лицо продукта, и баг тут виден сразу.

Боль, которую он закрывает: «бэкенд работает, а пользоваться невозможно» — тормозит, разъезжается на мобильном, кнопки не нажимаются с клавиатуры. Фронтендер превращает макет и API в живой удобный интерфейс.

Что ломается без него (или при слабом): UI «как получилось», тормоза и большой бандл, недоступность, рассыпающаяся вёрстка, неконсистентные компоненты, баги состояния (то одно, то другое).

День из жизни

Утро. Берёт историю, сверяет макет (Figma) и контракт API. Разбивает на компоненты, продумывает состояние и состояния UI (loading/empty/error). Пишет тест на ключевое поведение (TDD). День. Реализует компоненты, подключает API, ловит краевые случаи. Проверяет доступность (клавиатура, фокус, контраст, aria) и производительность (лишние ререндеры, размер бандла). Прогоняет в браузере — реально кликает. Вечер. Оформляет PR, обновляет Storybook, проходит код-ревью, чинит замечания. Перед закрытием — обязательный браузерный прогон, что соседнее не сломалось.

Ключевые навыки

Hard: HTML/CSS (семантика, флекс/грид, адаптив), JS/TS, фреймворк (React/Vue/Svelte), управление состоянием, работа с API (fetch/REST/GraphQL), тестирование (Vitest/Jest + Testing Library/Playwright), доступность WCAG AA, performance (Core Web Vitals, бандл), сборка (Vite). Soft: внимание к деталям и UX, общий язык с дизайнером, аккуратность с краями, чтение чужого кода, дисциплина ревью.

Артефакты, которые пишет

• Код компонентов — чистый, по конвенциям.
• Тесты — на поведение и края.
• Storybook — каталог компонентов и состояний.
• PR — с понятным описанием изменений. Реализует по User Story и критериям приёмки; готовность — Definition of Done (включая обязательный браузерный прогон). Хендофф получает от дизайнера.

Как ИИ/вайб-кодинг усиливает роль

1. Генерация компонента. Промт: «Сгенерируй React+TS компонент <карточка товара> по этому макету <описание/скрин>: пропсы, состояния hover/disabled/loading, семантические теги, aria, Tailwind. Без лишних зависимостей.»
2. Тесты на поведение. Промт: «Напиши тесты (Testing Library) на компонент <…>: рендер, клик, состояние ошибки, доступность по клавиатуре.»
3. Аудит доступности/перфоманса. Промт: «Проверь этот компонент <код> на доступность (фокус, aria, контраст) и лишние ререндеры. Что исправить?»
4. Рефакторинг. Промт: «Отрефактори этот компонент <код>: вынеси логику в хук, убери дублирование, сохрани поведение и тесты зелёными.»
5. Объяснение незнакомого кода. Промт: «Объясни, что делает этот код <вставить>, где могут быть баги состояния и как его безопасно изменить.»

Путь развития: Junior → Middle → Senior → Lead

• Junior: верстает и собирает компоненты по макету, пишет простые тесты, работает в рамках готовой архитектуры.
• Middle: реализует фичи end-to-end на фронте, владеет состоянием и производительностью, ловит края, делает ревью.
• Senior: проектирует фронт-архитектуру модуля, задаёт стандарты, оптимизирует, наставляет, влияет на дизайн-систему.
• Lead / Frontend Lead: отвечает за фронт-архитектуру и качество на команду, технические решения, рост инженеров.

Частые ошибки и как избежать

• Забыл состояния loading/empty/error. → Проектируй все состояния UI сразу, не только happy path.
• Игнор доступности. → Клавиатура, фокус, контраст AA, aria — с самого начала, а не «потом».
• Тормоза и распухший бандл. → Следи за ререндерами, code-splitting, размером зависимостей; меряй Core Web Vitals.
• «Работает у меня». → Кросс-браузер и мобильный реально проверяй; обязательный браузерный прогон.
• Копипаст компонентов. → Переиспользуй и выноси в общие, опирайся на дизайн-систему.

Что освоить (мини-программа)

• Концепции: модель рендеринга фреймворка, управление состоянием, доступность WCAG, Core Web Vitals, семантический HTML, адаптив.
• Инструменты: React/Vue/Svelte, TypeScript, Vite, Testing Library/Playwright, ESLint/Prettier, Storybook, DevTools (Lighthouse).
• Почитать/посмотреть: MDN, web.dev (perf/a11y), документация фреймворка; скилл vercel-react-best-practices, frontend-design.

Зарплатные ориентиры (RU)

• Junior Frontend: ~70–130 тыс ₽/мес.
• Middle Frontend: ~130–250 тыс ₽/мес.
• Senior Frontend: ~250–400 тыс ₽/мес.

  Зависит от грейда, стека, города и года — проверяй актуальное.

Маппинг на агента Laskoff

Прямого mapsTo нет, реализацию ведёт агент engineer (фронтенд-специализация). В Quest engineer пишет компоненты и тесты под спеку через TDD, чинит весь класс проблемы, держит проверки зелёными. Обязательный шаг закрытия — браузерный прогон (Playwright), что соседнее не сломано. Дизайн-скиллы дома: frontend-design, web-design-guidelines.

🤖 Промт-персона

Ты — сильный Frontend Engineer (React/TS, доступность, перфоманс). Помогаешь мне реализовывать удобные, быстрые и доступные интерфейсы точно по макету и контракту API. Всегда проектируй все состояния UI (loading/empty/error/disabled), закладывай доступность (клавиатура, фокус, контраст AA, aria) и следи за производительностью (ререндеры, бандл). Пиши чистый код по конвенциям и тесты на поведение и края. Переиспользуй компоненты, опирайся на дизайн-систему. Перед «готово» напоминай про реальный браузерный прогон и кросс-браузер/мобильный. Объясняй незнакомый код и подсвечивай риски багов состояния.