Матрица компетенций: React
Hard skills
Skill Passport — Frontend
JS/TypeScriptСамостоятельно реализует фичу по спецификации без пошаговой декомпозиции. Объясняет порядок выполнения микро- и макрозадач (например, почему `Promise.resolve().then()` выполнится раньше `setTimeout(fn, 0)`). В TypeScript пишет generics для переиспользуемых функций/компонентов, включает strict mode и устраняет ошибки типов без `as any`.
HTML/CSSСамостоятельно переводит дизайн-макет (Figma) в адаптивную вёрстку без готовых CSS-примеров, использует CSS-переменные и один из подходов к организации стилей (БЭМ / CSS Modules / utility-first) — может объяснить, почему выбран именно он для этого проекта. Собирает сложный двумерный layout на CSS Grid, не сводя всё к flexbox.
State managementСамостоятельно выбирает и внедряет решение для состояния под конкретную фичу без готового шаблона; различает client state и server state на практике — например, использует библиотеку кеширования запросов (React Query/TanStack Query, Pinia Colada и аналоги) вместо ручного хранения серверных данных в глобальном сторе.
Производительность/оптимизацияСамостоятельно находит причину лишней перерисовки компонента через профилировщик (React DevTools Profiler / Vue Devtools / Angular DevTools) и объясняет её словами, а не только исправляет. Точечно применяет мемоизацию (useMemo/useCallback/React.memo, computed в Vue, OnPush в Angular) там, где она даёт эффект, а не механически везде. Настраивает lazy loading и code splitting по маршрутам.
Тестирование (Jest/RTL)Самостоятельно пишет тест на компонент через Testing Library, обращаясь к элементам как пользователь (`getByRole`, `getByText`), а не к деталям реализации (не через CSS-класс или внутренний state). Пишет моки для внешних зависимостей (API-запросы, таймеры) и покрывает граничные случаи (пустой список, ошибка сети) без готового шаблона теста.
Сборщики (Webpack/Vite)Самостоятельно настраивает алиасы путей и добавляет плагин под конкретную задачу (например, импорт SVG как React/Vue-компонента, сжатие изображений при сборке), настраивает code splitting по точкам входа. Может объяснить разницу в подходе Webpack и Vite к dev-серверу (bundling заранее vs. нативные ES-модули + esbuild на лету) и когда это влияет на скорость разработки.
Кроссбраузерность/адаптивностьСамостоятельно проектирует адаптивную вёрстку (mobile-first или desktop-first — осознанный выбор под проект) с несколькими breakpoint без готового макета под каждый. Диагностирует и исправляет конкретный кроссбраузерный баг (например, разное поведение `gap` во flexbox в Safari, различия в обработке touch-событий на iOS), объясняя причину, а не подбирая фикс наугад.
Accessibility (a11y)Самостоятельно обеспечивает доступность интерактивного компонента без готового чек-листа: управление с клавиатуры (Tab/Enter/Escape), видимый фокус, ARIA-атрибуты там, где семантики HTML недостаточно (например, `aria-expanded` для раскрывающегося списка). Проверяет компонент автоматическим инструментом (axe/Lighthouse) и устраняет находки уровня WCAG AA — например, недостаточный контраст текста.
React (направление)Самостоятельно реализует фичу из нескольких взаимодействующих компонентов без готовой архитектуры, выносит переиспользуемую логику в собственные кастомные хуки. Корректно управляет массивом зависимостей `useEffect` — не создаёт бесконечный цикл ре-рендеров и не пропускает нужную зависимость. Использует React Context точечно и может объяснить, в каком случае он избыточен и лучше подошла бы библиотека состояния.
Soft skills
Skill Passport — Автономность и глубина
Автономность и масштаб задачОписывает случай, когда самостоятельно довёл фичу или модуль от постановки задачи до результата в проде без пошагового контроля — включая случаи, когда сам принимал технические решения по ходу работы, а не только выполнял готовый план. Называет конкретную зону ответственности (что именно делал и за что отвечал), а не общую фразу «участвовал в проекте».
Глубина технических решенийНазывает минимум два реально рассмотренных варианта и объясняет, почему выбрал один из них — аргумент привязан к конкретным деталям своей задачи (объём данных, срок, ограничение инфраструктуры), а не общая теория без применения к ситуации.