Все промпты курса

Вся последовательность промптов из шагов 1-7 в одном месте. Можно пройти проект "с нуля" за 30-40 минут, используя только эту страницу. Каждый промпт - копипаст в Claude Code, без правок.

Шаг 1. Подготовка окружения

Этот шаг почти весь руками, потому что Claude Code должен запускаться уже в папке проекта. Но CLAUDE.md можно попросить сгенерировать.

Сначала в терминале:

mkdir todo-ai && cd todo-ai
git init
mkdir backend frontend
python3 -m venv venv
source venv/bin/activate

Затем откройте Claude Code в этой папке и:

Сгенерируй для текущей пустой папки три файла:

1. CLAUDE.md - правила для меня и для тебя.
   Проект: ToDo с AI-категоризацией через Claude API.
   Стек: FastAPI (async) + SQLAlchemy 2.0 + SQLite на бэке,
   Vite + React 19 + TypeScript + Tailwind 4 + TanStack Query на фронте,
   Anthropic Claude Haiku 4.5 для категоризации задач, Docker для деплоя.
   Структура: backend/, frontend/, infra/, test/.
   Категории задач: work, personal, learning, health, other.
   Если Anthropic API недоступен - категория other, не падаем.

2. .gitignore - стандартный для Python + Node + SQLite (*.db).
   Включи venv/, node_modules/, .env, *.pyc, dist/, .DS_Store.

3. README.md - минимальный: название, описание (одна строка), стек, заглушка "Запуск - см. шаги в /docs/".

Первый коммит сделаю сам.

После генерации:

git add .
git commit -m "step 1: setup project structure and CLAUDE.md"

Шаг 2. FastAPI + SQLite

Создай FastAPI приложение в backend/ со следующим:

- SQLAlchemy 2.0 + SQLite, async-режим (aiosqlite)
- Модель Task: id (int, PK, autoincrement), title (str, до 200 символов),
  category (str, default "other"), done (bool, default false),
  created_at (datetime, server_default=now())
- Pydantic v2 схемы для запросов/ответов:
  TaskCreate (title), TaskUpdate (title?, category?, done?), TaskRead (все поля)
- CRUD endpoints:
  GET /api/tasks - список, сортировка по created_at desc
  POST /api/tasks - создать (только title в теле)
  PATCH /api/tasks/{id} - частичное обновление
  DELETE /api/tasks/{id} - удалить
- CORS middleware: разрешить http://localhost:5173
- Структура: app/main.py, app/db.py, app/models.py, app/schemas.py, app/routers/tasks.py
- requirements.txt со всеми зависимостями
- Базовый pytest-сетап в tests/ с conftest.py (фикстура async client + тестовая БД in-memory)
- Один smoke-тест: POST /api/tasks с валидным title возвращает 201
- Запиши команды запуска в README.md в корне проекта

Используй современный async-стиль FastAPI: lifespan вместо on_event,
AsyncSession, async def роуты, async фикстуры в pytest.

После запуска и проверки:

git add .
git commit -m "step 2: FastAPI backend with SQLite, CRUD for tasks"

Шаг 3. React + Vite + Tailwind

Создай frontend во frontend/ на Vite + React 19 + TypeScript + Tailwind 4 + TanStack Query.

Стек:
- Vite (без SWC, обычный esbuild)
- React 19, TypeScript 5
- Tailwind CSS 4 (через @tailwindcss/vite плагин)
- @tanstack/react-query 5 для fetch и кеша
- Без UI-библиотек - всё на кастомных компонентах с Tailwind

UI:
- Главная страница - список задач
- Инлайн-добавление сверху: input + Enter создаёт задачу через POST /api/tasks
- Каждая задача - строка с чекбоксом, заголовком, бейджем категории, кнопкой удалить
- Dark theme: фон bg-zinc-950, текст zinc-100
- Акценты эмеральд: emerald-400 для активных элементов, emerald-500 для кнопок
- Минимализм, без скругления больше rounded-lg, без теней
- Адаптив под мобилу

Backend живёт на http://localhost:8000.
Сделай util fetchApi с базовым URL и обработкой ошибок.
Используй QueryClient с дефолтным staleTime 30 сек.

Запиши команды запуска в frontend/README.md и в корневой README.md.

git add .
git commit -m "step 3: React + Vite + Tailwind frontend, basic task list"

Шаг 4. Связка фронт-бэк (типы)

Настрой генерацию TypeScript-типов из FastAPI OpenAPI-схемы:

1. Установи в frontend/ devDependency: openapi-typescript
2. Добавь в frontend/package.json скрипт:
   "types:gen": "openapi-typescript http://localhost:8000/openapi.json -o src/types/api.ts"
3. Сгенерируй типы (бэк должен быть запущен)
4. Удали ручной src/types.ts
5. Замени все импорты Task на сгенерированные типы из src/types/api.ts
6. Сделай удобные алиасы в src/types/index.ts:
   export type Task = components["schemas"]["TaskRead"]
   export type TaskCreate = components["schemas"]["TaskCreate"]
   export type TaskUpdate = components["schemas"]["TaskUpdate"]
7. Обнови fetchApi в src/lib/api.ts: типизируй на основе сгенерированных типов

Шаг 4. Состояния UI

Добавь loading, error и empty состояния в TaskList:

- loading: пока useQuery в isPending, показывай 3 skeleton-строки
  (фон zinc-900, скругление rounded-lg, animate-pulse)
- error: если isError, показывай красную плашку с текстом ошибки и кнопкой "Повторить",
  которая вызывает refetch
- empty: если data.length === 0, показывай центрированный текст
  "Задач пока нет. Добавьте первую сверху." с приглушённым цветом text-zinc-500

Для мутаций:
- POST /api/tasks: пока в isPending - инпут disabled, плейсхолдер "Добавляем..."
- PATCH: пока isPending - чекбокс показывает спиннер вместо галочки
- DELETE: пока isPending - строка с opacity-50

Используй типы из src/types вместо any.

git add .
git commit -m "step 4: openapi-typescript types, loading/error/empty states"

Шаг 5. AI-категоризация

Добавь AI-категоризацию задач в backend/.

Требования:
- Установи anthropic SDK: добавь в requirements.txt anthropic>=0.40.0 и установи
- Создай backend/app/services/categorizer.py с функцией:
    async def categorize(title: str) -> str
- Используй модель claude-haiku-4-5 через AsyncAnthropic клиент
- API-ключ берётся из env: ANTHROPIC_API_KEY
- System prompt должен быть кешируемым (cache_control: ephemeral)
- В system prompt чётко перечисли категории и критерии:
    work - рабочие задачи, встречи, отчёты, проекты, дедлайны
    personal - быт, покупки, семья, дом, личные дела
    learning - учёба, чтение, курсы, изучение технологий
    health - спорт, врачи, лекарства, питание, сон
    other - всё остальное
- User-message: только title задачи
- Ответ Claude - одно слово из списка категорий
- Парсинг: если ответ не входит в список - вернуть "other"
- Обработка ошибок: anthropic.APIError, asyncio.TimeoutError, любая другая -
  логируем через logging.warning, возвращаем "other", НЕ падаем
- Timeout 10 секунд через anthropic клиент

В POST /api/tasks:
- После создания записи в БД вызывай categorize(task.title)
- Сохраняй результат в task.category, делай commit
- Возвращай в ответе уже с категорией

Тесты:
- В tests/conftest.py добавь фикстуру monkeypatch для categorize,
  чтобы по умолчанию в тестах не звался реальный API
- Один интеграционный тест с моком: categorize мокается чтобы вернуть "work",
  POST задачи возвращает category: "work"

Обнови .env.example: добавь ANTHROPIC_API_KEY=sk-ant-...

git add .
git commit -m "step 5: AI categorization via Anthropic Claude Haiku 4.5"

Шаг 6. Тесты бэка

Расширь pytest-тесты в backend/tests/:

CRUD задач (tests/test_tasks_crud.py):
- POST с валидным title - 201, возвращается с id и created_at
- POST с пустым title - 422 (validation error)
- POST с title > 200 символов - 422
- GET /api/tasks - возвращает массив, сортировка created_at desc
- GET после нескольких POST - корректный порядок
- PATCH существующей задачи - меняет поля
- PATCH несуществующего id - 404
- DELETE существующей - 204
- DELETE несуществующей - 404
- DELETE дважды - первая 204, вторая 404

AI-категоризация (tests/test_categorizer.py):
- Мок anthropic.AsyncAnthropic через monkeypatch
- categorize возвращает валидную категорию из мока - результат проходит
- Мок возвращает неизвестное слово - результат "other"
- Мок бросает APIError - результат "other", не падает
- В POST /api/tasks: проверяем что категория из мока попадает в БД

Используй:
- pytest-asyncio с asyncio_mode = "auto"
- httpx.AsyncClient для интеграционных тестов
- pytest-mock и pytest-cov (добавь в requirements)

Скрипты в README:
- pytest -v
- pytest --cov=app --cov-report=html

Шаг 6. Тесты фронта

Подключи vitest + Testing Library в frontend/:

Установи devDependencies:
- vitest, @testing-library/react, @testing-library/jest-dom
- @testing-library/user-event, jsdom, @vitest/coverage-v8

Конфиг vitest.config.ts:
- environment: jsdom
- setupFiles: ./src/test/setup.ts
- coverage с провайдером v8, report: text + html

В src/test/setup.ts:
- import "@testing-library/jest-dom/vitest"

Скрипты в package.json:
- "test": "vitest"
- "test:run": "vitest run"
- "test:coverage": "vitest run --coverage"

Тесты:
1. TaskInput.test.tsx: render, ввод + Enter, очистка после успеха, disabled в isPending
2. TaskItem.test.tsx: title виден, чекбокс отражает done, клики вызывают onToggle/onDelete
3. TaskList.test.tsx: loading skeleton, error плашка, empty состояние, filled рендерит задачи

Используй QueryClientProvider в обёртке.
Мокай fetch через vi.spyOn или MSW.

git add .
git commit -m "step 6: pytest for backend, vitest for frontend, coverage > 80%"

Шаг 7. Docker и деплой

Сделай Docker-инфраструктуру для todo-ai.

Структура infra/:
- infra/backend.Dockerfile
- infra/frontend.Dockerfile
- infra/nginx.conf
- docker-compose.yml (в корне)
- .env.example (в корне)
- deploy.sh (в корне, executable)
- test/smoke.py

infra/backend.Dockerfile:
- python:3.12-slim
- pip install --no-cache-dir
- CMD: uvicorn app.main:app --host 0.0.0.0 --port 8000
- Healthcheck: curl /api/tasks

infra/frontend.Dockerfile:
- Stage 1 (builder): node:20-alpine + corepack enable + pnpm install + pnpm build
- Stage 2 (runtime): nginx:alpine, копировать dist + nginx.conf

infra/nginx.conf:
- порт 80
- location / - try_files (SPA fallback)
- location /api/ - proxy_pass http://backend:8000
- gzip, кеш статики

docker-compose.yml:
- backend: env_file .env, volume todo-data:/data, DATABASE_URL=sqlite+aiosqlite:////data/tasks.db
- frontend: ports 8080:80, depends_on backend
- volumes: todo-data

test/smoke.py (без зависимостей кроме stdlib + curl):
- аргумент base_url (default http://localhost:8080)
- GET /api/tasks - 200, JSON массив
- POST /api/tasks {"title":"smoke"} - 201, валидная категория
- GET / - 200, text/html
- DELETE созданной задачи - 204
- Цветной вывод, exit 1 при провале

deploy.sh:
#!/bin/bash
set -e
docker compose up -d --build
sleep 5
python3 test/smoke.py http://localhost:8080 || { docker compose logs; exit 1; }
echo "Deploy successful"

chmod +x deploy.sh

./deploy.sh

git add .
git commit -m "step 7: Docker deploy, smoke tests, deploy.sh"
git push

Как пользоваться этой страницей

Открыли, прошли по порядку, копипастили промпты в Claude. Если что-то непонятно в результате - возвращайтесь на страницу конкретного шага, там подробности и контекст.

Если хотите ускорить ещё больше - в самом первом промпте укажите Claude "пройди со мной все 7 шагов, начиная с первого, после каждого ожидай моего OK". Тогда он сам будет вести вас, а вы только подтверждать переходы.