Frontend-вакансии в 2026-м пугают длиной: React, Vue, три бандлера, GraphQL, анимации, SSR, нативные оболочки, «желательно дизайн». Это вишлист. Нанимают человека, который закрывает экраны продукта: состояние, данные, ошибки, доступность, скорость списка — на конкретном стеке команды.

Ниже — карта junior / middle / senior без культа фреймворка: что реально спрашивают, что можно не учить в первый год, два примера готовности и как не соврать в skills. Резюме роли — в резюме frontend-разработчика. Вход — в как стать frontend-разработчиком.

Коротко:

  • Ядро: HTML/CSS как инструмент продукта, JavaScript/TypeScript, один фреймворк, Git, отладка в браузере.
  • Junior закрывает форму и список без сюрпризов. Middle — сложное состояние, перф, договорённость с API.
  • Senior — границы UI-системы, качество потока, влияние на продукт, не «ещё знал Svelte».
  • Не учите пять фреймворков параллельно. Второй — когда есть задача.
  • Сверяйте must с вакансиями frontend и формулировки CV — в разборе резюме.

Как отделить must от шума

Соберите пять-десять вакансий одной линии: React-кабинеты, или Vue, или сильная вёрстка. Пересечения — учёба и резюме. Разовые «WebGL / RN / три.js» — не первый год, если вы не в эту нишу.

Next.js в каждом втором объявлении не значит, что без него нет работы. Значит, уметь объяснить клиентский рендеринг vs серверный, когда столкнётесь. Не дописывайте фреймворк, которым не собирали маршруты.

Дизайн «на уровне Figma-эксперта» для разработчика редко must. Читать макет, сетку, отступы, состояния — да. Подмена дизайнера — другая вакансия.

Ещё шум: «опыт с ИИ» без экрана. Встроить чат на готовом API — не frontend-грейд. Имеет смысл, если вы закрыли стриминг ответа, состояния ошибки, отмену запроса и доступность поля ввода. Иначе это строка для генератора CV. Смотрите, есть ли задача в вакансии, а не мода заголовка.

Мобильная оболочка и React Native — отдельная линия вакансий. Не кладите их в план первого года кабинетов. Если целевые роли — админки и кабинеты B2B, глубина форм даст работу быстрее, чем «ещё и мобилка». Когда линия сменится — ядро JS/TS переедет, оболочка учится на задаче.

Ядро интерфейса

Семантика и доступность базово: фокус, клавиатура, альты, не «сайт для зрячих мышью». CSS: поток, флекс/грид, адаптив, что ломается на узком экране. JS: события, асинхронность, замыкания в том объёме, в котором вы дебажите, не билет ЕГЭ.

TypeScript на рынке CIS 2026 часто must даже для junior кабинетов. Не обязательно гений типов: нормальные пропсы, ошибки API, без any везде. Дорожная карта языка — в TypeScript roadmap, фреймворка — в React roadmap.

Сеть: что такое CORS глазами фронта, статусы, отмена запроса, повтор. Состояние загрузки, пусто, ошибка — это продукт, не украшение. Инструменты: DevTools, Git. Сборка — на уровне «понимаю, зачем bundler», не свой webpack с нуля в первый год.

Доступность не «потом, если останется время». На junior достаточно: фокус виден, форма сдаётся с клавиатуры, ошибки связаны с полями, контраст не из макета «серое на сером». Это проверяют чаще, чем знание трёх стейт-менеджеров. Middle добавляет живые регионы, фокус-ловушки в модалках, не ломает зум. Если в вакансиях вашего круга a11y нет словом — всё равно держите базу: тикеты «не нажимается» часто про фокус и перекрытие, не про «мало React».

Junior

Собрать экран по макету, форму с валидацией, список с фильтром. Не ломать состояния. Понять чужой компонент и внести правку. Тесты хотя бы на логику формы — плюс, не всегда must.

Не обязан: писать свою дизайн-систему, настраивать SSR-платформу, оптимизировать LCP как отдельная ставка, знать три стейт-менеджера. Redux «потому что в вакансии» при одном учебном магазине — ловушка на интервью. Вопросы роли — в вопросах на собеседовании frontend.

Практический критерий junior: можете сесть за чужой кабинет и за день закрыть баг «в Safari обрезается кнопка» или «после ошибки форма не сбрасывается», не переписывая приложение. Если на любое отклонение от туториала вы теряетесь — ещё не junior рынка, ещё курс. Это не стыдно, это честный план на две недели одного экрана, а не на новый интенсив.

Доказательство: одно демо со ссылкой и честным README, что не сделано. См. как описывать проекты и резюме без опыта. Мёртвая ссылка хуже отсутствия: её проверяют.

Middle

Сложное состояние: мастер-деталь, черновики, оптимистичный UI без вранья пользователю. Договор с backend: контракт ошибок, пагинация, отмена, идемпотентный сабмит. Перф списка и тяжёлых форм: мемо, виртуализация — когда измерили, не «на всякий случай».

Оптимистичный UI без отката — частая ловушка. Показали успех, сервер ответил 409, пользователь думает, что заявка есть. Middle это ловит. Junior часто оставляет спиннер и надеется. Напишите в CV, если чинили именно такие расхождения — это сильнее «работал с хуками». Замер перфа тоже: «убрали лишние ререндеры после профиля» проверяемо, «оптимизировал производительность» — нет.

Ревью чужого UI: доступность, гонки, утечки подписок. Чужой легаси: не переписать с нуля в первый месяц, а вырезать кусок безопасно. Поставка: CI своего фронта, превью, понимание, кто режет бандл. Превью на каждый PR для удалёнки важнее идеального локального стенда: так обсуждают UI без созвона.

Fullstack-довес: простые эндпоинты, если закрываете вертикаль. Не заменяет ядро UI. См. навыки backend и резюме fullstack.

Senior

Границы: что в дизайн-системе, что в продуктовом коде, как не размножать кнопки. Метрики клиентского опыта, договорённости с продуктом и QA. Менторство, сложные компромиссы (срок / a11y / перф).

Новый фреймворк сам по себе грейд не повышает. Повышает умение остановить вредную моду и провести миграцию без театра. Рост — в чеклисте junior→middle и материале про middle→senior. Миграция «потому что в твиттере» без выигрыша для кабинета — это риск релиза, не рост. Умение сказать «не сейчас» здесь такое же senior, как и умение провести её, когда выигрыш ясен.

Пример: форма как критерий

Ещё junior. Форма возврата: поля, валидация на клиенте, спиннер, сообщение об ошибке из mock API. Адаптив базовый. Доступность: можно отправить с клавиатуры. Серверных гонок не видел — стенд учебный.

Уже middle. Та же форма на проде: двойной клик не создаёт две заявки, уход со страницы с черновиком предупреждает, ошибка 409 с понятным текстом, фокус возвращается на поле. Список заявок не подвисает на 500 строках — измерили и срезали лишние ререндеры. Контракт с backend зафиксировали, не «как получится».

Так и описывайте опыт: сценарий, сбой, фикс. Не «верстал адаптивно». Пули — в как описать опыт.

Что можно не учить в первый год

  • Второй и третий фреймворк «для кругозора» вместо глубины одного.
  • Графика, канвас, игры — пока вы ищете кабинеты и лендинги продукта.
  • Настройка монорепы на 20 пакетов, если не работаете в такой.
  • Свой CI с нуля при готовом шаблоне команды.
  • Нейросети в skills без задачи в интерфейсе.

Английский: чтение документации и интерфейса — must почти везде; устные созвоны — по вакансии. Как качать под работу — в английском для IT. Письменный UI-копирайт на русском для CIS-кабинетов тоже навык: кривые тексты ошибок плодят тикеты.

Как класть навыки в резюме

Шапка: роль + фреймворк + язык. Skills группами, без HTML как единственной гордости на middle. Согласованность стека — в как указать стек. Общие ловушки списка — в навыках в IT-резюме.

Не копируйте вишлист вакансии. Совпадение по фактам усиливает, по лжи — тестовое закроет. Живые формулировки: каталог frontend.

Как проверять грейд на своих экранах

Возьмите последний кабинет или лендинг с формами и пройдите как злой пользователь: клавиатура без мыши, узкая ширина, медленная сеть в DevTools, двойной сабмит, пустой список, 500 от API. Запишите, что ломается. Это и есть карта дыр middle, не очередной курс по «продвинутому React».

Перед/после пули:

Было: «Верстка адаптивных интерфейсов, работа с REST API, использование хуков, оптимизация производительности».

Стало: «Форма возврата: двойной клик не плодит заявки, ошибка 409 понятным текстом, фокус на поле. Список заявок на 500 строк не подвисает — убрали лишние ререндеры после замера».

Вторая пуля проверяема на тестовом. Первая — нет. Так и выглядит переход junior→middle в файле, не через слово Middle в заголовке.

Самопроверка: объясните вслух, что происходит после onChange на вашем самом сложном поле; где состояние живёт; что будет при размонтировании; как отменяете запрос. Если «магия хука» — это ещё не middle, и это нормально чинить две недели на одном экране.

Удалёнка: письменный статус «что в превью, что не готово к релизу, какой риск a11y/перфа». Для распределённых CIS-команд это навык не слабее TypeScript. Укажите пересечение часов в резюме, шаблон — в резюме для удалённой работы.

Не раздувайте грейд вторым фреймворком. Глубина одного контура плюс честный стек проходит дальше, чем React+Vue+Angular в skills. Summary: роль, тип экранов, один факт. См. как написать summary. Затем разбор резюме.

Частые вопросы

Нужен ли TypeScript junior?

На большинстве продуктовых вакансий CIS — да хотя бы на уровне пропсов и ответов API. Чистый JS ещё жив на поддержке легаси — читайте объявление.

CSS-in-JS, Tailwind, модули — что учить?

Тот, что в целевых вакансиях и в вашем проекте. Принципы каскада и потока важнее бренда утилитарных классов.

Обязательны ли тесты?

Для middle всё чаще да на критичных формах. Junior без тестов ещё берут, если демо сильное. Не пишите «эксперт Jest» после одного туториала.

Стоит ли учить Vue, если все вокруг React?

Если ваши вакансии Vue — да. Если нет — не параллельно в первый год. Смена фреймворка на middle быстрее, чем кажется, если ядро есть.

Нужен ли Figma как навык?

Уметь снять размеры и состояния — да. Собирать дизайн-систему в Figma — нет, если вы не совмещаете роль.

Как понять, что я уже middle?

Прод, чужой код, сложное состояние, договор с API, ревью. Не срок «два года» сам по себе. Титулы компаний врут в обе стороны.

Что сделать сейчас

Выберите одну линию вакансий и выпишите must. Закройте одну дыру на своём экране: доступность формы, перф списка или честный контракт ошибок. Обновите три пули в CV языком сценария.

Сверьте файл с вакансиями frontend и прогоните через разбор резюме. Если skills длиннее, чем то, что готовы открыть в DevTools на созвоне — режьте список, не человека. На этой неделе доведите один экран до состояния: клавиатура, узкая ширина, ошибка API, двойной сабмит. Это и есть проверка грейда. Второй фреймворк не начинайте, пока этот экран не объясняется без шпаргалки. Демо и README — в карточку проекта, затем один точный отклик, не сто писем с «React/Vue/Angular».