Блок 4

Внесення змін — темна тема

Реалізуйте темну тему за допомогою інструментів Edit та Write, переглядайте зміни наживо, ітеруйте дизайн, запускайте тести та комітьте — все без виходу з терміналу.

~33 хв (8 хв презентація + 25 хв практика)
Edit Tool (surgical replacements) Write Tool (full file creation) Git Integration (commit, diff) Iterative Refinement

Час будувати

Блок 3 був кресленням. Блок 4 — будівельний майданчик.

Це блок, де Claude Code виправдовує свою назву. Ви спостерігатимете, як AI-агент відкриває файли, знаходить саме ті рядки, що потребують зміни, замінює їх хірургічно й залишає все інше недоторканим. Потім ви запустите dev-сервер, подивитесь на результат, скажете “зроби сайдбар темнішим” — і побачите, як він зробить це знову. За секунди.

Якщо ви коли-небудь робили зміну теми вручну — полювали по CSS-файлах, підбирали hex-коди, оновлювали браузер 400 разів — цей блок відчуватиметься як подорож у часі.

Що ми розглянемо

  1. Інструмент Edit — як Claude виконує точкові заміни рядків у файлах (уявіть sed, але він розуміє контекст)
  2. Інструмент Write — коли Claude створює або повністю переписує файл
  3. Жива ітерація — налаштування теми розмовою з Claude простою мовою
  4. Запуск тестів — переконатися, що зміна теми нічого не зламала
  5. Git-інтеграція — стейджинг, коміт і перегляд diff — все через Claude

Система тем в ai-coderrank

Перед редагуванням корисно знати, як частини пов’язані:

Компонент Роль
tailwind.config.ts Визначає палітру кольорів та стратегію темного режиму
Глобальний CSS (змінні) Оголошує --background, --foreground, --accent тощо
ThemeProvider React-контекст, що керує станом light/dark
scripts/switch-theme.sh Shell-скрипт для перемикання тем
Окремі компоненти Можуть мати inline-класи Tailwind, що посилаються на кольори теми

Архітектура вже налаштована для тем — CSS-змінні та ThemeProvider на місці. Нам потрібно лише визначити темну палітру та підключити її.

Як виглядають зміни

Ось попередній перегляд типу правки, яку зробить Claude. У вашому глобальному CSS може бути:

:root {
  --background: #ffffff;
  --foreground: #1a1a1a;
}

Claude додасть:

[data-theme="dark"] {
  --background: #0a0a0a;
  --foreground: #e5e5e5;
}

Він робить це за допомогою інструменту Edit — вказуючи точний рядок для пошуку та точний рядок для заміни. Жодних ігор із регексами. Жодних випадкових змін в інших файлах. Хірургічно.

Майлстоун

До кінця цього блоку: темна тема працює локально. Ви побачите її в браузері, тести проходять, коміт чистий. Це перша відчутна зміна, яку ви внесли в кодову базу за допомогою Claude Code — і далеко не остання.

Оберіть формат

Виберіть формат, який відповідає тому, як ви використовуєте блок:

Презентація

Нотатки доповідача, структура слайдів та тези для голосового супроводу цього блоку.

Практика

Готові до копіювання команди та промпти для практичної частини з демонстрацією екрана.

Квіз

Перевірте свої знання з цього блоку — 6-8 запитань.

Що ви опануєте

  • Зрозуміти, як інструмент Edit робить точкові зміни порівняно з інструментом Write, що створює повні файли
  • Реалізувати повну темну тему через конфіг Tailwind, CSS-змінні та компоненти
  • Використати ітеративне уточнення Claude для налаштування візуальних деталей — контрасту та кольору
  • Запустити тести через Claude для виявлення регресій
  • Дозволити Claude написати змістовне коміт-повідомлення та створити чистий коміт