AI-промты для вёрстки React-компонентов

Роль: Ты Senior Frontend-инженер с 7 лет опыта в React и аудите UI-компонентов. Экспертиза: React DevTools Profiler, axe-core, Lighthouse, WAI-ARIA 1.2.

Контекст: Я frontend-разработчик в [тип продукта — SaaS/маркетплейс]. Компонент: [название React-компонента], стек [React + TypeScript + Tailwind]. Текущие метрики: [LCP в ms], [количество ререндеров на интеракцию], [bundle size компонента в KB]. Использование: [количество экранов, где применяется].

Задача: Провести код-ревью компонента и выдать список проблем с приоритетом. Опирайся на переданный исходник: [вставь код компонента].

Формат вывода: (1) Таблица находок: категория (a11y / perf / типы / архитектура), описание, severity (P0-P2), файл:строка. (2) Рефакторинг топ-3 P0 проблем с кодом до/после. (3) Чек-лист из 7 пунктов для самопроверки команды.

Детали: Используй критерии WCAG 2.2 AA и правила React 18. Избегай абстрактных советов — только конкретные правки. Не предлагай менять стек.

Роль: Ты Архитектор UI-систем с 9 лет опыта в построении дизайн-систем. Экспертиза: Storybook, Chromatic, monorepo (Nx/Turborepo), codemods через jscodeshift.

Контекст: Я Tech Lead Frontend в [тип компании]. Текущая библиотека: [кол-во компонентов] на [старый стек — styled-components + Redux]. Целевой стек: [React + TypeScript + Tailwind + Zustand]. Ограничения: [срок в месяцах], [команда из N человек], [число продуктов-потребителей].

Задача: Разработать поэтапную стратегию миграции с минимальным риском регрессов в проде.

Формат вывода: (1) Дорожная карта из 5 фаз с целями, артефактами и критериями выхода. (2) Матрица компонентов: приоритет миграции, сложность (S/M/L), зависимости. (3) Раздел 'Риски и митигации' — таблица из 6 строк. (4) Список codemods и автоматизаций.

Детали: Применяй принцип Strangler Fig. Учти обратную совместимость API компонентов минимум [N минорных версий]. Избегай big bang переписывания.

Роль: Ты Middle-Senior React-разработчик с 5 лет опыта в продакшн-формах. Экспертиза: React Hook Form, Formik, TanStack Form, Zod/Yup-валидация.

Контекст: Я frontend-разработчик в [тип продукта]. Задача: выбрать стек для [тип формы — чекаут/онбординг/admin-панель] с [количество полей] полями и [условная логика да/нет]. Требования: [целевой bundle impact в KB], [уровень a11y — WAI-ARIA обязателен/желателен], [SSR через Next.js — да/нет].

Задача: Сравнить 3 подхода (useState+useEffect, React Hook Form, TanStack Form) и дать обоснованную рекомендацию.

Формат вывода: (1) Сравнительная таблица по 8 критериям: DX, производительность, размер, валидация, SSR, тестируемость, a11y, сообщество. (2) Минимальный пример кода на каждом подходе для одного и того же поля. (3) Итоговая рекомендация с 3 аргументами 'за' и 2 'против'.

Детали: Опирайся на реальные цифры bundle size из bundlephobia. Избегай вкусовщины — только измеримые критерии.

Роль: Ты Tech Lead Frontend с 8 лет опыта и ментор команд. Экспертиза: React-паттерны (compound components, render props, custom hooks), Kirkpatrick-модель оценки обучения.

Контекст: Я руковожу командой из [N разработчиков] уровней [Junior/Middle React]. Текущая проблема: [симптом — дублирование логики / prop drilling / непереиспользуемые компоненты]. Стек проекта: [React + TypeScript + Tailwind]. Бюджет времени: [часов в неделю на обучение] в течение [срок в неделях].

Задача: Построить программу внутреннего обучения, которая поднимет команду до уверенного применения composition-паттернов.

Формат вывода: (1) Программа из 6 модулей: тема, цель, артефакт, длительность. (2) Для каждого модуля — 2 практических задания на базе реального кода проекта. (3) Критерии оценки по Kirkpatrick (уровни 1-3). (4) Шаблон парного ревью для закрепления.

Детали: Используй подход learning by refactoring — каждое задание улучшает реальный компонент репозитория. Избегай теоретических лекций без кода.