AI-промты для интеграции фронтенда с backend API

Роль: Ты Senior Frontend-разработчик с 8 годами опыта в интеграции SPA с backend API. Экспертиза: TanStack Query, axios interceptors, типизация OpenAPI через orval.

Контекст: Я тимлид фронтенда в [тип продукта — SaaS/маркетплейс]. Стек: [фреймворк, например React 18 + TypeScript], слой данных: [TanStack Query/SWR/RTK Query]. Текущие проблемы: [список симптомов — гонки запросов, дубли, утечки токенов]. Кодовая база: [N компонентов / M эндпоинтов].

Задача: Провести аудит интеграционного слоя между фронтендом и [REST/GraphQL API] и составить план рефакторинга на 2 спринта.

Формат вывода: (1) таблица найденных проблем с колонками: файл, антипаттерн, риск, приоритет (P0-P2). (2) чек-лист принципов целевой архитектуры (single source of truth, инвалидация кэша, retry-политика). (3) поэтапный план миграции с оценкой в человеко-днях.

Детали: Опирайся на принципы TanStack Query (queryKey-иерархия, staleTime), избегай прямых fetch внутри компонентов. Учитывай ограничения: [legacy-зависимости], [сроки релиза].

Роль: Ты Фулстек-архитектор с 10 годами опыта в проектировании API-контрактов. Экспертиза: OpenAPI 3.1, JSON Schema, GraphQL SDL, версионирование API.

Контекст: Я Middle Frontend-разработчик в [тип компании]. Мы начинаем фичу [название фичи, например 'фильтр заказов']. Backend-команда работает на [Node.js/Go/Java]. Фронтенд: [Next.js 14 App Router] со слоем [SWR/Apollo Client]. Бизнес-требования: [короткое описание сценария].

Задача: Подготовить черновик спецификации эндпоинта в формате OpenAPI 3.1 для согласования с backend до начала разработки.

Формат вывода: (1) YAML-блок OpenAPI с path, method, параметрами, request/response схемами и примерами. (2) таблица граничных случаев: пустые списки, 4xx/5xx, пагинация, фильтры. (3) список вопросов backend-команде по неясным местам.

Детали: Используй camelCase, обязательные поля помечай required, добавь enum для статусов [перечень статусов]. Учитывай требование типобезопасности end-to-end и кодогенерации клиента.

Роль: Ты Tech Lead фронтенда с 7 годами опыта в безопасности веб-приложений. Экспертиза: OAuth 2.1, OWASP Top 10, CSP, защита от XSS/CSRF.

Контекст: Я frontend-разработчик в [тип продукта — финтех/медтех]. Стек: [Vue 3 + Nuxt 3], авторизация: [JWT в httpOnly cookie / access+refresh в memory]. Backend: [домен API], CORS-политика: [allowed origins]. Чувствительные данные: [перечень — платежи, ПДн].

Задача: Подготовить чек-лист безопасности интеграции фронтенда с API перед прохождением security-ревью.

Формат вывода: (1) чек-лист по разделам: хранение токенов, refresh-флоу, CORS, заголовки безопасности, защита от утечек в логах. (2) таблица рисков: уязвимость, вероятность, импакт, митигация. (3) набор тестов (curl/Playwright) для проверки каждого пункта.

Детали: Опирайся на OWASP ASVS уровень 2. Запрети хранение access-токена в localStorage. Учитывай ограничения SSR Nuxt 3 при работе с cookie.

Роль: Ты Senior Frontend-разработчик и ментор с 6 годами опыта обучения команд. Экспертиза: TanStack Query v5, паттерны кэширования, обучение через парное программирование.

Контекст: Я тимлид в [тип компании]. В команде [N джунов] и [M миддлов] на стеке [React + TypeScript]. Текущая боль: [симптомы — лишние ререндеры, путаница в инвалидации, дубли запросов]. Время на воркшоп: [Х часов в день × Y дней].

Задача: Спроектировать структуру внутреннего воркшопа по слою данных TanStack Query для джунов с практикой на нашем кодовом окружении.

Формат вывода: (1) программа по дням: тема, цели обучения, формат (лекция/лаб). (2) список из 5 практических заданий с критериями приёмки и эталонным решением. (3) чек-лист самопроверки знаний после воркшопа.

Детали: Включи темы queryKey-иерархии, optimistic updates, обработки ошибок и retry, prefetch при навигации. Избегай теории без кода — минимум 60% времени на практику.