В этой подборке я собрал 50 промптов под разные задачи frontend, которые могут быть полезны каждому разработчику. 1. Генерация стартовой разметки страниц и компонентов При создании нового проекта всегда нужно начинать с нуля. Писать шапку, контейнеры, меню, подвал. Это повторяется десятки раз и занимает лишнее время. Нейросети легко создают готовый каркас страницы или отдельного компонента, который остаётся лишь наполнить контентом. Промпт: Ты — старший фронтенд-разработчик. Нужно создать React-компонент <Header> со следующими требованиями:- Слева логотип (изображение <img>, alt="Company logo").- Справа горизонтальное меню с пунктами: Home, Services, Blog, About, Contact.- Верстка на TailwindCSS, с использованием flexbox.- На мобильных устройствах (<768px) меню скрывается и заменяется на бургер-иконку.- Код должен быть семантическим и доступным: используйте <nav>, aria-label, role="navigation".- Стили оформите с помощью utility-классов, без кастомного CSS. Выведи только готовый код компонента. 2. Быстрое прототипирование интерфейсов Прототип помогает быстро проверить идею и показать заказчику, как будет выглядеть сайт. Обычно на это уходит много времени, но нейросеть способна за считанные минуты собрать базовый макет лендинга или приложения. Промпт: Сгенерируй прототип лендинга в виде React-компонента с использованием TailwindCSS.Структура страницы:1) Hero-секция с заголовком, описанием и кнопкой CTA.2) Секция с тремя карточками преимуществ (иконка, заголовок, текст).3) Блок отзывов (3 отзыва, аватарка + имя + текст).4) Footer с навигацией и копирайтом.Требования:- Используй семантические теги: <header>, <main>, <section>, <footer>.- Добавь aria-атрибуты для доступности.- Код должен быть адаптивным.Выведи итоговый JSX без комментариев. 3. Адаптивная верстка под разные устройства Сайт должен одинаково хорошо выглядеть и на смартфоне, и на ноутбуке. Для этого пишутся медиазапросы или используется grid/flex. Нейросети могут сразу предложить готовый адаптивный код без лишних правок. Промпт: Создай CSS с использованием CSS Grid для блока карточек:- На мобильных устройствах (<640px) карточки должны располагаться в один столбец.- На планшетах (641px–1024px) — в два столбца.- На десктопах (>1024px) — в три столбца.Требования:- Код должен быть компактным.- Используй современные практики (gap вместо margin).- Выведи только CSS, без объяснений. 4. Семантическая разметка для SEO и доступности Сайты становятся понятнее поисковикам и людям с ограниченными возможностями, если в коде используются правильные теги и атрибуты. Нейросети умеют преобразовывать «сырую» разметку в семантическую. Просто отправьте свой код в нейросеть вместе с промптом ниже Промпт: Возьми следующий HTML-код и преобразуй его в семантический:- Используй <header>, <main>, <section>, <footer>.- Добавь aria-label, role и alt там, где это нужно.- Сохрани структуру, но исправь неправильные теги.- Оптимизируй для SEO: заголовки должны идти по порядку H1 → H2 → H3.Выведи итоговый HTML без комментариев. 5. Перевод дизайн-системы в код Дизайнеры работают с токенами: цвета, размеры, шрифты. Чтобы код и дизайн совпадали, эти значения нужно перенести в проект. Нейросеть может автоматически превратить список токенов в конфиг Tailwind или SCSS-переменные. Промпт: У меня есть дизайн-токены:- primary: #1E40AF- secondary: #9333EA- background: #F3F4F6- text: #111827- border-radius: 8px- font-family: Inter, sans-serifСконвертируй их в Tailwind config:- Настрой цвета через extend.colors.- Добавь borderRadius.- Задай шрифты через extend.fontFamily.- Сохрани структуру кода JSON-объекта, как в tailwind.config.js.Выведи только код конфига. 6. Конвертация стилей из одного подхода в другой Иногда проект переезжает с SCSS на Tailwind или наоборот. Переписывать вручную сотни строк стилей — скучно и долго. Нейросеть способна быстро перевести стили в нужный формат, сохраняя внешний вид. Промпт: Конвертируй следующий SCSS в Tailwind utility-классы.Требования:- Сохрани визуальный вид на 100%.- Используй только утилиты Tailwind (без кастомного CSS).- Выведи готовый JSX-код с классами Tailwind, без комментариев.SCSS:.card { background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 16px;} 7. Генерация utility-классов и сниппетов Вместо того чтобы каждый раз копировать одинаковые стили для кнопок или карточек, можно создать переиспользуемые классы. Нейросеть умеет быстро генерировать такие сниппеты по описанию. Промпт: Создай кастомный Tailwind plugin с utility-классом .card-glow:- Белый фон, скругление 12px.- Мягкая тень: rgba(0,0,0,0.15), blur 12px.- Padding 20px.- Ховер-эффект: лёгкое свечение #9333EA.Выведи готовый JS-код плагина для tailwind.config.js. 8. Создание UI-состояний: hover, focus, disabled Любая кнопка или ссылка должна реагировать на действия пользователя. Обычно разработчики прописывают эти состояния вручную, но нейросеть может сделать всё за один шаг. Промпт: Напиши CSS для кнопки:- Базовое состояние: синий фон (#1E40AF), белый текст, padding 12px 20px.- Hover: более тёмный фон (#1E3A8A).- Focus: outline с голубым свечением #3B82F6.- Disabled: серый фон (#9CA3AF), курсор not-allowed.Выведи готовый CSS-код в виде класса .btn-primary. 9. Состояния Skeleton / Loading / Error Когда данные ещё загружаются, пользователю лучше показать «скелет» страницы или ошибку, чем белый экран. Нейросеть может автоматически сгенерировать такие компоненты. Промпт: Создай React-компонент <UserListSkeleton>:- Отображает 5 скелетон-карточек пользователей.- Использует div с анимацией shimmer (linear-gradient).- Каждая карточка: аватар (круглый блок 48px) + три линии текста разной длины.- Используй Tailwind классы.Выведи только JSX-компонент. 10. Оптимизация SVG-иконок SVG часто содержат лишние атрибуты и стили. Нейросеть умеет автоматически их чистить и даже объединять в спрайт, чтобы сайт грузился быстрее. Промпт: Оптимизируй этот SVG:- Удали лишние атрибуты (fill="none", inline styles и т.д.).- Минимизируй код.- Преобразуй в спрайт-формат <symbol>.- Добавь id="icon-user".Выведи итоговый оптимизированный SVG.[Вставь SVG-код сюда] 11. Медиазапросы для адаптивности Чтобы сайт был удобен на всех устройствах, нужны медиазапросы. Их часто приходится писать вручную, а нейросеть может предложить готовый рабочий вариант. Промпт: Напиши CSS для адаптивной сетки:- Контейнер шириной 1200px, центрированный.- При ширине экрана <768px элементы должны занимать 100%.- При ширине >768px — 2 элемента в строку.- При ширине >1200px — 4 элемента в строку.Используй grid layout.Выведи только CSS. 12. Исправление CSS-конфликтов Когда на странице стили начинают конфликтовать, искать проблему вручную бывает трудно. Нейросеть может быстро подсказать, где ошибка и как её исправить. Просто отправьте свои стили в нейросеть вместе с промптом ниже Промпт: Проанализируй этот CSS и объясни:1) Почему стиль .btn-primary не применяется к кнопке.2) Какие свойства перекрывают друг друга.3) Предложи исправленный код.CSS:.btn-primary { background: #1E40AF; color: white;}button { background: gray !important;} 13. Миграция стилей на другой подход Если проект меняет технологию (например, переходит на styled-components), ручное переписывание CSS превращается в рутину. Нейросеть может сделать это автоматически если отправить ей свой код и промпт. Промпт: Перепиши следующий CSS в styled-components (React):- Сохрани внешний вид на 100%.- Используй синтаксис ES6 и шаблонные строки.- Компонент должен называться StyledCard.CSS:.card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.1)} 14. Создание JS-утилит В каждом проекте нужны debounce, throttle, memoize и прочие функции. Обычно их копируют из прошлых проектов, но нейросеть может быстро сгенерировать современную версию. Промпт: Напиши функцию debounce на JavaScript:- Функция принимает callback и delay.- Поддерживает метод cancel() для сброса таймера.- Работает в React (правильно сохраняет ссылки).- Выведи полный код с JSDoc-аннотацией. 15. Переписывание async/await и промисов Код должен быть читаемым. Иногда нужно переписать промисы в async/await или наоборот. Нейросеть делает это мгновенно. Скидывайте ей код и промпт Промпт: Перепиши следующий код на async/await:- Сохрани обработку ошибок через try/catch.- Сделай код максимально читаемым.- Используй const для переменных.Код:fetch('/api/users') .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)); 16. Создание форм с валидацией Формы встречаются в любом проекте. Регистрация, авторизация, обратная связь. Ручное написание полей, масок и валидации — очень утомительная работа. Нейросеть может сразу сгенерировать готовый компонент с обработкой ошибок. Промпт: Сгенерируй React-компонент <LoginForm> с использованием React Hook Form:- Поля: email, password.- Валидация: - email — обязательное поле, проверка на корректный формат. - password — минимум 6 символов.- Ошибки отображаются под каждым полем (красный текст).- Кнопка "Login" блокируется, если форма невалидна.- Используй Tailwind для стилей.Выведи полный JSX-код. 17. Генерация мок-данных Часто бэкенд ещё не готов, а фронтенду нужны данные для тестов. Вручную генерировать JSON неудобно. Нейросеть создаёт реалистичные мок-данные мгновенно. Промпт: Сгенерируй JSON с 20 объектами пользователей:- id (число от 1 до 20),- name (реалистичные имена),- email (валидные адреса),- avatar (ссылка на случайную картинку, например https://i.pravatar.cc/150?img=номер).Выведи только JSON, без комментариев. 18. REST/GraphQL клиенты Работа с API — одна из самых частых задач. Обычно нужно писать обёртки для запросов вручную, что долго и скучно. Нейросеть может по схеме Swagger или GraphQL SDL сразу сгенерировать хуки и клиенты. Промпт: На основе Swagger-эндпоинта:GET /api/users → возвращает массив объектов { id, name, email }.Сгенерируй React Query hook:- useUsersQuery, который получает список пользователей.- Обрабатывай состояния loading, error, success.- Выведи пример использования в компоненте.- Код должен быть на TypeScript. 19. Storybook stories Для документирования компонентов используют Storybook. Но писать stories вручную на каждый компонент — однообразно. Нейросеть может сама сгенерировать шаблон stories по коду компонента. Промпт: Создай Storybook stories для компонента <Button>:- Варианты: primary, secondary.- Размеры: small, medium, large.- Поддержка onClick action.- Используй TypeScript и CSF3 формат.Выведи полный код stories. 20. Unit-тесты Юнит-тесты помогают избежать багов, но писать их вручную долго и скучно. Нейросеть может по функции или компоненту сгенерировать базовые тесты. Промпт: Напиши Jest-тесты для функции formatDate(dateString):- Проверка: корректно форматирует дату "2025-09-03" в "03.09.2025".- Проверка: работает с разными форматами ISO.- Проверка: выбрасывает ошибку при неверной строке.Выведи только тесты на TypeScript. 21. E2E-тесты для пользовательских сценариев Помимо unit-тестов нужны end-to-end проверки - логин, регистрация, добавление товара в корзину. Ручное написание тестов в Cypress или Playwright занимает часы. Нейросеть создаёт их быстрее. Промпт: Сгенерируй тест для Playwright:Сценарий: пользователь логинится.1) Переходит на /login.2) Вводит email "test@example.com".3) Вводит пароль "123456".4) Нажимает кнопку "Login".Выведи только код теста на TypeScript. 22. Рефакторинг «раздутых» компонентов Со временем один компонент может разрастись на сотни строк. Его нужно разделить на более мелкие части. Нейросеть помогает это сделать, не меняя логику. Промпт: Раздели следующий React-компонент на три отдельных:- FormContainer,- InputField,- SubmitButton.Сохрани логику и props.Выведи итоговый код на TypeScript.[Вставь код сюда] 23. Оптимизация перерисовок в React Частая проблема — лишние ререндеры компонентов. Обычно разработчики оптимизируют через React.memo, useMemo и useCallback. Нейросеть может сама подсказать, где их использовать. Промпт: Проанализируй следующий React-компонент:1) Определи, какие функции и значения стоит мемоизировать.2) Перепиши код с использованием React.memo, useMemo и useCallback.3) Объясни, как это уменьшит количество перерисовок.[Вставь код сюда] 24. Lazy-loading и code-splitting Чтобы ускорить загрузку сайта, большие компоненты нужно подгружать по требованию. Нейросеть умеет автоматически переписать код под lazy-loading. Промпт: Перепиши импорт React-компонентов на динамический (lazy + Suspense).Требования:- Используй React.lazy и Suspense.- Добавь fallback <Loader />.- Сохрани корректный порядок загрузки.Выведи итоговый код на TypeScript. 25. Генерация конфигов сборки Настройка Webpack, Vite или Rollup занимает много времени. Нейросети могут быстро предложить рабочий конфиг под проект. Промпт: Сгенерируй конфигурацию для Vite проекта:- React + TypeScript.- Tailwind CSS.- ESLint + Prettier.- Alias: @ → ./src.- Поддержка импортов SVG как React-компонентов.Выведи итоговый vite.config.ts. 26. Настройка линтеров и форматтеров (ESLint, Prettier, Stylelint) Чтобы код был единообразным, проекту нужны линтеры и форматтеры. Ручная настройка плагинов и правил — скучная рутина. Нейросети собирают рабочий конфиг под ваш стек за минуты. Промпт: Собери конфигурацию для монорепо (pnpm) с приложением React+TS:- ESLint: @typescript-eslint, react, react-hooks, import, jsx-a11y.- Prettier: интеграция с ESLint (eslint-config-prettier, eslint-plugin-prettier).- Игнор: node_modules, dist, .next, coverage.- Отдельные overrides для *.ts, *.tsx, *.test.ts(x).- Строгие правила: no-explicit-any (warn), no-unused-vars (error), import/order (groups).- Отдай файлы: .eslintrc.cjs, .prettierrc, .eslintignore — в одном ответе, как три отдельных блока кода.Выведи только код файлов. 27. Автоматическая правка типовых ошибок линтера После включения линтера часто нужно править сотни одинаковых замечаний. Нейросеть подсказывает, какие правила включить для автофикса и как безопасно применить изменения. Промпт: Проанализируй этот фрагмент кода и предложи патч с автофиксом:- Приведи импорт к правилу import/order (builtin → external → internal).- Замени var/let на const там, где возможно.- Удали неиспользуемые импорты и переменные.- Приведи кавычки к одинарным, добавь точку с запятой.Верни diff в формате unified patch (---/+++), без объяснений.[Вставь код здесь] 28. Конвертация JS ↔ TS, вывод типов, d.ts Проекты часто начинают на JS и постепенно переходят на TS. Нейросеть ускоряет миграцию: расставляет типы, генерирует интерфейсы и декларации. Промпт: Преобразуй следующий JavaScript в TypeScript:- Добавь строгие типы функциям, параметрам и возвратам.- Выдели повторяющиеся структуры в интерфейсы/типы.- Экспортируй публичные типы из index.ts.- Сгенерируй .d.ts только для публичного API пакета.Верни:1) Итоговый *.ts код,2) index.ts с реэкспортами,3) index.d.ts с публичными типами.[Вставь JS-код] 29. Документирование публичного API компонентов Компоненты должны иметь чётко описанные пропсы и события. Нейросеть вытягивает из кода список пропсов, их типы и значения по умолчанию — и превращает это в понятную таблицу. Промпт: Проанализируй React-компонент и сгенерируй таблицу API:- Колонки: Prop | Type | Default | Required | Description.- Извлеки JSDoc/TSdoc описания.- Отметь депрекейты и внутренние пропы (internal).- Выведи таблицу в Markdown.[Вставь код компонента] 30. Автогенерация документации (MDX, API-таблицы) Документация часто отстаёт от кода. Нейросети умеют выпускать MDX-страницы с примерами, сниппетами и live-демо на основе вашего компонента. Промпт: Сгенерируй MDX-страницу документации для компонента <Button>:- Секции: Overview, Installation, Usage, Props (таблица), Variants, Accessibility, Examples.- Примеры кода на TSX (Ready-to-copy).- Добавь live-дему через <Playground/> (предположи хелпер).- Стиль заголовков: h2/h3, короткие описания.Верни один MDX-файл без пояснений.[Вставь код компонента/пропс-типов] 31. Подсказки по доступности (A11y) Доступность — обязательная часть интерфейсов: контраст, фокус, aria-атрибуты. Нейросеть сканирует разметку и предлагает конкретные улучшения с примерами. Промпт: Проведи аудит доступности для HTML-страницы:- Найди проблемы с контрастом, фокусом, aria-атрибутами, заголовками.- Предложи исправления в виде PR-патча (unified diff).- Для каждой правки кратко поясни "почему" по WCAG 2.1 (уровень AA).Верни сначала краткий чек-лист (Markdown), затем diff.[Вставь HTML/JSX] 32. Локализация. Извлечение строк и ключей Чтобы перевести интерфейс, текст нужно вынести в словари. Нейросеть автоматически находит хардкоженные строки, предлагает ключи и заменяет их на i18n-вызовы. Промпт: Извлеки пользовательские строки из React-кода в i18n словари:- Генерируй ключи в формате `page.section.label`.- Сформируй en.json и ru.json (значения: en — оригинал, ru — авто-перевод).- В коде замени строки на t('...').- Верни: 1) патч с изменениями кода (diff), 2) en.json, 3) ru.json.[Вставь код] 33. Перевод UI-текста с учётом контекста и плурализации Машинный перевод без контекста часто ошибается. Нейросеть может учитывать роли, род, множественное число и форматирование чисел/дат. Промпт: Переведи набор UI-строк на ru, de, es с учётом контекста:- Формат: ICU MessageFormat (плурализация, вставки переменных).- Сохрани placeholders {count}, {name}, {date}.- Укажи комментарии для переводчика (developer notes).Верни JSON для каждой локали.[Вставь список исходных строк (en)] 34. Микрокопирайт: подписи, плейсхолдеры, ошибки Короткие тексты в интерфейсе сильно влияют на конверсию: плейсхолдеры, тексты ошибок, тултипы. Нейросеть быстро подбирает дружелюбные формулировки в стиле бренда. Промпт: Сгенерируй микро-копирайт для формы регистрации:- Тон: дружелюбный, уверенный, без жаргона.- Поля: Name, Email, Password.- Нужны: плейсхолдер, helper text, сообщения валидации (по 2 варианта).- Добавь короткие пустые состояния (Empty state) и тексты успешных действий.Верни таблицу в Markdown: Field | Placeholder | Helper | Validation (2x) | Success | Empty. 35. Метатеги, Open Graph, структурированные данные Чтобы страницы хорошо выглядели в поиске и соцсетях, нужны правильные метатеги и JSON-LD. Нейросеть собирает всё по шаблону с подстановкой данных. Промпт: Сгенерируй SEO-блок для Next.js страницы блога:- <title>, <meta name="description">, Open Graph (og:title, og:description, og:image, og:type, og:url), Twitter Cards.- JSON-LD типа Article: headline, author, datePublished, dateModified, image, mainEntityOfPage.- Получай значения из объекта:{ title, description, url, image, authorName, publishedAt, updatedAt}- Верни компонент HeadSeo(props) на TypeScript (React/Next 13+), без лишних комментариев. 36. Чек-листы и фиксы веб-производительности (LCP, CLS, INP) Производительность влияет на конверсию и SEO. Часто нужно быстро понять, что тормозит страницу: крупные изображения, блокирующие скрипты, нестабильная вёрстка. Нейросеть по метрикам подсказывает приоритеты и даёт готовые шаги улучшений. Промпт: У меня есть метрики Web Vitals:- LCP: 3.4s (целевой <2.5s)- CLS: 0.18 (целевой <0.1)- INP: 260ms (целевой <200ms)Технологии: Next.js 14, React 18, Tailwind, Vercel.Составь план оптимизации (таблица Markdown):- Проблема | Симптом | Приоритет (High/Medium/Low) | Решение (конкретные шаги) | Оценка эффекта (примерно).Добавь кодовые примеры (lazy, preconnect, preload, priority images, font-display).Дай короткий чек-лист для CI (автоматические проверки Lighthouse/Pa11y) 37. Поиск блокирующих ресурсов и критический CSS Большие CSS-файлы и шрифты тормозят первый рендер. Нейросеть помогает извлечь критические стили, отложить остальное и настроить загрузку шрифтов без скачков макета. Промпт: Подготовь план внедрения Critical CSS и оптимизации шрифтов:- Извлечение Critical CSS для home и product страниц (Next.js app router).- Отложенная загрузка остального CSS (media, preload, rel=preload/stylesheet).- Стратегия шрифтов: self-hosted WOFF2, font-display: swap, preconnect к CDN, fallback stack.- Пример кода: внедрение critical CSS в <head> и динамическая подгрузка остального.Верни: 1) пошаговый план, 2) фрагменты кода (TSX), 3) чек-лист регрессий CLS. 38. Оптимизация изображений: размеры, форматы, srcset/picture Изображения — главный источник «веса». Нейросети быстро составляют стратегии: когда использовать AVIF/WebP, как резать размеры, как писать srcset и sizes, где уместен <picture>. Промпт: Сформируй гайд по оптимизации изображений для e-commerce:- Компонент <ProductImage> на Next.js <Image/>: варианты размеров и приоритеты.- AVIF/WebP для современных браузеров, fallback JPEG.- Примеры srcset/sizes для карточек (grid) и для hero.- Политика кэширования и контроль качества (эффективные q-профили).Верни: рекомендации + готовые TSX-сниппеты. 39. Автогенерация маршрутов и навигации из файловой структуры Когда страниц много, вручную поддерживать роуты и меню неудобно. Нейросеть может пройтись по структуре файлов и собрать карту сайта и навигацию автоматически. Промпт: На вход: список путей страниц (files):- /app/(public)/page.tsx- /app/blog/[slug]/page.tsx- /app/pricing/page.tsx- /app/docs/[...slug]/page.tsxЗадача:1) Сгенерируй sitemap JSON (title, path, isDynamic, children).2) Построй навигационное меню для header/footer (чистые пути, человекочитаемые названия).3) Верни TS-утилиту getNavigation() и пример использования в Layout.Без лишних объяснений — только код и итоговые структуры. 40. Быстрые таблицы с фильтрами и пагинацией Админки и кабинеты полны таблиц с сортировкой, поиском и пагинацией. Нейросеть за минуту создаёт заготовку на базе готовой таблицы и хуков. Промпт: Сгенерируй компонент <UserTable> (React+TS):- Колонки: Name, Email, Role, CreatedAt.- Функции: текстовый поиск по Name/Email, сортировка по каждому столбцу, пагинация (10 на страницу).- Заготовка для серверной подгрузки (onQueryChange).- Tailwind стили, пустые состояния и состояние загрузки.Верни полный TSX-код + типы. 41. Генерация диаграмм/графиков по ТЗ Дэшборды требуют диаграммы. Нейросеть превращает описание данных в конфиги для Recharts/Chart.js и добавляет подписанные оси, форматирование чисел, ховеры. Промпт: Создай компонент <SalesChart> на Recharts (React+TS):- Тип: комбинированный график (бар + линия).- Данные: месяц (MMM), revenue (USD), orders (шт.).- Оси с форматтерами (валюта, целые числа), tooltip, легенда.- Адаптивный контейнер, доступные подписи (aria-label).Выведи TSX-компонент с мок-данными и пропсами. 42. Обвязка для веб-аналитики: карта событий → код События аналитики часто внедряются хаотично. Нейросеть помогает описать события единообразно (имя, параметры, где вызывается) и генерирует вызовы в коде. Промпт: На вход: карта событий (Markdown таблица)Event | Params | Triggerclick_signup | {source:string} | CTA в Heroview_product | {id:string, price:number} | Открытие карточкиadd_to_cart | {id:string, qty:number} | Кнопка в карточкеЗадача:1) Сгенерируй типобезопасный analytics.ts (TypeScript) с функциями логирования.2) Примеры вызовов в компонентах (React).3) Поддержка Google Analytics и dataLayer (расширяемая архитектура).Верни только код файлов. 43. Скрипты CI/CD: lint → test → build → preview Чтобы качество было стабильным, пайплайн должен автоматически проверять линт, тесты, сборку и развёртывать превью. Нейросеть быстро выдаёт готовые конфиги. Промпт: Сгенерируй GitHub Actions workflow .github/workflows/ci.yml:- Триггеры: PR к main, push в main.- Jobs: install (pnpm), lint (ESLint), test (Vitest с coverage), build (Vite), preview deploy (Vercel).- Кэширование pnpm и node_modules.- Артефакты: coverage report, build.Верни только YAML. 44. Автосоздание README для пакетов и библиотек Новый пакет требует README: установка, примеры, API, лицензия. Нейросеть собирает понятный, структурированный README в одном стиле. Промпт Сгенерируй README.md для npm-пакета "@acme/ui-button":- Разделы: Intro, Features (bullet), Installation, Quick Start (TSX пример), Props (таблица), Theming, Accessibility, Troubleshooting, Changelog, License.- Тон: кратко и по делу, примеры копируемые.- Добавь бейджи npm/version/size.Верни один Markdown-файл. 45. Code review подсказки: запахи, дубли, потенциальные баги Перед слиянием кода полезно быстро увидеть риски: дублирование, лишние перерисовки, утечки, анти-паттерны. Нейросеть делает «вторую пару глаз» и предлагает точечные фиксы. Промпт: Проанализируй PR-дифф (React+TS) и составь обзор:- Найди участки: дублирование логики, сложные эффекты, незащищённые async операции, неконтролируемые инпуты, возможные memory leaks.- Дай конкретные правки с примерами кода (до/после).- В конце — чек-лист для автора (5–10 пунктов).Верни: Summary (Markdown) + секция Suggestions с нумерованными пунктами.[Вставь unified diff] 46. Миграции между версиями фреймворков (React/Vue/Next/Nuxt) При обновлении фреймворка часто меняются API, конфиги и лучшие практики. Нейросеть помогает составить пошаговый план миграции, переписать устаревший код и поймать подводные камни до релиза. Промпт: Подготовь план миграции проекта:Текущий стек: Next.js 12 (pages router), React 17, SWR, SCSS.Цель: Next.js 14 (app router), React 18, React Server Components, Turbopack, Tailwind.Задачи:1) По шагам (batched PRs): инфраструктура, сборка, маршрутизация, стили, данные.2) Маппинг API: getServerSideProps/getStaticProps → RSC/Route Handlers/Fetch cache.3) Перепиши примеры страниц (index, blog/[slug]) с app router (layout.tsx, page.tsx).4) Замените SCSS на Tailwind (пример рефакторинга).5) Перенеси SWR-клиентские запросы в server components, где уместно.6) Дай чек-лист регрессий и метрик (Lighthouse, Web Vitals, bundle size).Верни:- Markdown-план (по спринтам),- Примеры кода до/после (TS/TSX),- Список риск-факторов с митигациями. 47. Шорткаты и сниппеты для повторяющихся паттернов Повторяющиеся куски кода — формы, модалки, таблицы — удобнее хранить как сниппеты. Нейросеть быстро собирает библиотеку шаблонов под ваш стиль кода и инструменты. Промпт: Сгенерируй набор сниппетов для VS Code (json) под префиксом `acme-*`:Нужны:- React+TS компонент (с use client, пропсы типизированы).- Хук useFetch<T>(url): abort, error, loading, memoized value.- Модалка <Dialog> (headless, управляемый open/onOpenChange).- Таблица с сортировкой и пагинацией (см. react-table или простая реализация).- Тест шаблон (Vitest + Testing Library) для компонента.Требования:- Каждый сниппет: prefix, body[], description.- В body без табов — используйте \t, плейсхолдеры $1, $2...Верни один JSON с ключами-именами сниппетов. 48. Конвертация дизайна в HTML-письма с инлайновым CSS E-mail вёрстка — отдельный мир с особыми правилами. Нейросеть помогает превратить макет в совместимое HTML-письмо с инлайновым CSS и fallbacks для Outlook. Промпт: Собери адаптивное HTML-письмо (transactional: "Order Confirmed"):Секции:- Header с логотипом,- Hero-текст,- Таблица заказа (3 товара: image, name, qty, price),- Итоги (subtotal, shipping, total),- CTA "View Order",- Footer (контакты, соцсети).Требования:- Табличная верстка, max-width 600px, mobile-first.- Инлайновый CSS (стили прямо в тегах).- Совместимость с Outlook (VML для кнопки), Gmail, iOS Mail.- ALT для изображений, web-safe fonts.- Тёмная тема: не нарушает контраст.Верни один HTML-файл, без внешних ресурсов и без комментариев. 49. Lighthouse-/A11y-/Performance-репорты по логам Периодические отчёты помогают отслеживать качество. Нейросеть берёт логи Lighthouse/AXE и превращает их в понятный отчёт: что сломалось, почему и как исправить в следующем спринте. Промпт: На вход: JSON-отчёты Lighthouse (desktop+mobile) и AXE (a11y) за 3 итерации.Задача:1) Сформируй сводную таблицу (Markdown): Итерация | Perf | A11y | Best Practices | SEO | LCP | CLS | INP.2) Выдели регрессии и улучшения (дельты, стрелки).3) Дай TOP-10 проблем и роадмап фиксов (2 недели) с оценкой эффекта.4) Приложи diff-конфиг для CI, чтобы падал PR, если метрики ниже порога.Верни: сводную таблицу, список проблем с приоритетами, YAML-фрагмент для CI.[Вставь JSON-логи] 50. Интерактивные прототипы и песочницы (CodeSandbox/StackBlitz Чтобы быстро показать идею команде или заказчику, удобно собрать демо в песочнице. Нейросеть генерирует проектную структуру, зависимости и стартовый код под вашу задачу. Промпт: Подготовь минимальный проект для StackBlitz (React+TS+Vite+Tailwind):- package.json: scripts (dev, build, preview), зависимости.- vite.config.ts с alias @ → /src.- tailwind.config.ts + postcss.config.cjs.- src/: main.tsx, App.tsx, components/Button.tsx, pages/Home.tsx.- Тема Tailwind: кастомные цвета brand.- На главной: Hero, три карточки, CTA; роутинг с react-router.Верни архивную структуру (дерево) + содержимое файлов в отдельных блоках кода (без пояснений).