Блок 1 Практика

Понимание вашей кодовой базы — Практика

Прямая речь: “Всё на этой практической странице построено так, чтобы вы могли повторять за мной строка за строкой. Когда вы видите блок с командой или промптом, можете копировать его прямо в терминал или сессию Claude, если я явно не скажу, что это справочный материал. По ходу дела сравнивайте свой результат с моим на экране, чтобы ловить ошибки рано, а не копить их.”

Продолжительность: ~20 минут Результат: Сгенерированный файл CLAUDE.md и глубокое понимание архитектуры ai-coderrank, полученное через разговорное исследование Пререквизиты: Блок 0 пройден, Claude Code установлен и аутентифицирован

Шаг 1: Запуск Claude Code в проекте

Убедитесь, что вы в директории ai-coderrank, и запустите сессию:

cd ai-coderrank
claude

Вы должны увидеть промпт Claude Code. Если вы завершили Блок 0, это должно быть знакомо.

Шаг 2: Генерация CLAUDE.md с помощью /init

Это первый момент “вау”. Введите:

/init

Наблюдайте, что происходит. Claude:

  1. Просканирует всю структуру проекта
  2. Прочитает ключевые файлы: package.json, tsconfig.json, Dockerfile и др.
  3. Проанализирует расположение директорий
  4. Сгенерирует файл CLAUDE.md в корне проекта

Это занимает 15-30 секунд в зависимости от размера проекта. Для ai-coderrank должно быть быстро.

Прямая речь: “Следите за вызовами инструментов, прокручивающимися в терминале. Это момент, когда люди обычно понимают, что Claude Code — это не просто более красивый чат-бокс. Он читает package.json, tsconfig, Dockerfile и манифесты, чтобы собрать рабочую модель репозитория. Результат, который вы должны ожидать — архитектурный обзор быстрее, чем вы получили бы за десять минут ручного кликанья.”

Шаг 3: Обзор сгенерированного CLAUDE.md

Когда /init завершится, попросите Claude показать, что он сгенерировал:

Show me the CLAUDE.md file you just created

Альтернативно, вы можете прочитать его сами в другом терминале:

cat CLAUDE.md

На что обратить внимание в сгенерированном CLAUDE.md:

  • Правильно ли определён стек технологий (Next.js 14, React 18, TypeScript, Tailwind)?
  • Упомянута ли библиотека для графиков (Recharts)?
  • Документирована ли структура проекта?
  • Перечислены ли полезные команды (dev, build, test, lint)?
  • Упомянуты ли конфигурации Docker и Kubernetes?

Прямая речь: “Этот автоматически сгенерированный CLAUDE.md — хороший черновик, а не священный артефакт. Я хочу, чтобы вы относились к нему как к живой памяти проекта, которая со временем становится точнее. Сегодняшний результат — крепкий базовый документ; позже мы обогатим его соглашениями команды, типичными подводными камнями и контекстом деплоя.”

Шаг 4: Попросите Claude объяснить архитектуру

Теперь используем Claude как персонального гида по архитектуре. Начните широко:

Explain the overall architecture of this project. What are the main layers and how do they connect?

Claude прочитает исходные файлы и даст структурированный разбор. Следите за вызовами инструментов — вы увидите, как он читает файлы из src/app/, src/components/ и API-роутов.

Продолжите более конкретными вопросами:

What API routes does this project have and what does each one do?

Наблюдайте, как Claude использует Glob для поиска файлов роутов, затем Read для изучения каждого из них. Он должен определить API-эндпоинты и объяснить данные, которые они обслуживают.

Прямая речь: “Остановитесь здесь и посмотрите на цепочку инструментов, потому что это скрытый двигатель агента. Claude связывает Glob и Read, чтобы ответить на реальный вопрос о вашей кодовой базе. Результат, который я хочу — чтобы вы перестали думать категориями магии и начали видеть рабочий процесс: найти, изучить, рассуждать, ответить.”

Шаг 5: Исследование структуры компонентов

Погрузитесь во фронтенд:

Walk me through the main React components. What does each one render and how do they compose together?

Затем уточните по конкретному визуальному компоненту:

How do the charts work? What data do they receive and how is it visualized?

Claude должен определить использование Recharts и объяснить поток данных от API-роутов к компонентам графиков.

Шаг 6: Исследование механизма переключения тем

Это отличный пример отслеживания фичи через несколько файлов:

How does the theme switching mechanism work? Trace the flow from the UI toggle to the CSS changes.

Обычно Claude:

  1. Ищет код, связанный с темой, по всей кодовой базе (Grep)
  2. Находит компонент переключателя тем (Read)
  3. Отслеживает управление состоянием или контекст-провайдер
  4. Показывает, как CSS-переменные или классы Tailwind меняются в зависимости от темы

Прямая речь: “Вот где Claude Code начинает отрабатывать свою стоимость. Один вопрос, несколько файлов и связный ответ, охватывающий компонент переключателя, провайдер и CSS-переменные. Ожидаемый результат — вы можете отследить фичу от начала до конца, не прыгая вручную по импортам пять минут.”

Шаг 7: Попробуйте прямую команду

Теперь переключимся с разговорного режима на прямой. Вместо открытых вопросов дайте Claude конкретную задачу:

Find all files that contain "TODO" or "FIXME" comments

Затем попробуйте:

List every external npm dependency and its version from package.json

И:

Show me the Dockerfile and explain each stage of the multi-stage build

Заметьте разницу в стиле ответов. Прямые вопросы получают сфокусированные, точные ответы. Открытые вопросы получают более широкие, исследовательские ответы. Полезно и то, и другое.

Шаг 8: Проверьте понимание Claude

Интересное упражнение — устройте Claude викторину по тому, что он узнал:

If I wanted to add a new AI model to the comparison dashboard, which files would I need to modify? Walk me through the steps.

Это заставляет Claude синтезировать всё, что он знает о модели данных, API-роутах и фронтенд-компонентах, в практический ответ. Он должен дать вам чёткий, упорядоченный список файлов и необходимых изменений.

Прямая речь: “Такие вопросы на рассуждение — это то, что отличает инструмент от простого поиска. Claude не просто находит файлы; он строит план реализации на основе прочитанного. Результат, на который я хочу обратить ваше внимание — практическое руководство, а не просто факты о кодовой базе.”

Шаг 9: Проверка расхода контекста и выход

Давайте посмотрим, сколько контекста потребило это исследование:

/cost

Обратите внимание на количество токенов. Исследование кодовой базы — одна из самых ресурсоёмких операций с точки зрения токенов, потому что Claude читает много файлов. Это нормально и ожидаемо.

Теперь выйдите:

/exit

Что произошло?

За примерно 20 минут вы прошли от “я никогда не видел эту кодовую базу” до понимания:

  1. Структуры проекта — где что находится и почему
  2. Архитектуры — как фронтенд-компоненты связаны с API-роутами
  3. Потока данных — как данные о моделях перемещаются от бэкенда к графикам
  4. Системы тем — полное отслеживание фичи через несколько файлов
  5. Инфраструктуры — Docker-сборки, K8s-манифесты, конфигурация CI

Вы также сгенерировали CLAUDE.md, который сделает каждую будущую сессию Claude Code умнее в отношении этого конкретного проекта.

В этом суперсила. Не написание кода (это будет дальше) — а понимание кода. Любой опытный инженер скажет: самое сложное — не написать исправление, а знать, куда смотреть. Claude Code сократил этот процесс с дней до минут.

Дополнительная практика

Если хотите дополнительно попрактиковаться перед Блоком 2, попробуйте эти упражнения:

  • Попросите Claude сравнить конфигурации Docker для разработки и продакшена
  • Попросите его объяснить рабочий процесс GitHub Actions пошагово
  • Попросите его найти потенциальные проблемы безопасности в кодовой базе
  • Попросите его описать настройку тестирования и какие виды тестов существуют

Готовы проверить себя?

Пройти квиз →