Розробка з Claude Code

Ласкаво просимо на перше заняття курсу, де ми почнемо вивчати Claude Code як професійного AI-агента.

Це буде весела пригода на 20 хвилин 3 місяці.

Сьогодні почнемо з налаштування середовища на macOS, Linux чи Windows та інтеграції утиліти з середовищем розробки.

Перш ніж доручити AI перший рядок коду, налаштуємо периметр безпеки:

• Git baseline - безпечний стартовий стан проєкту;
• ієрархію налаштувань у теці .claude/;
• permission modes - що Claude може робити без вашого підтвердження;
• пам'ять проєкту через файл CLAUDE.md.

Матеріали курсу

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

Як ми працюємо в Zoom

Щоб заняття лишалося цілісним, питання збиратимемо в окремі блоки - так ми не втрачаємо хід пояснення.

• дві частини з перервою 10 хвилин; після кожної - блок запитань і відповідей, там можна голосом;
• по ходу заняття записуйте питання, щоб не загубити думку; чат - для коротких уточнень за поточною темою;
• наприкінці - відкритий мікрофон: великі обговорення, питання про майбутні теми і все, що не за темою заняття.

Що таке Claude Code?

Claude Code - це агент, який працює прямо у вашому проєкті:

Корисно одразу розділити дві речі: Claude Code - це агент-оболонка, а не сама модель. Оболонка дає робоче місце - термінал, доступ до файлів, цикл роботи, правила безпеки. А "думає" в цьому робочому місці підключена LLM, і її можна міняти: через хмарних провайдерів або через корпоративний llm-gateway, як на нашому курсі.

Гарна аналогія - IDE: вона не прив'язана до однієї мови, сьогодні в ній відкрито JS, завтра Java чи YAML. Так і Claude Code: робоче місце одне, а модель у ньому - питання налаштування, і трохи згодом ви самі вкажете її у settings.json.

Чим Claude Code відрізняється від звичайного чату?

На відміну від стандартного чату, Claude Code має прямий доступ до ваших файлів, терміналу та кодової бази проєкту. Замість постійного копіювання й вставляння коду вручну туди-сюди цей інструмент самостійно відкриває потрібні файли та вносить у них зміни.

Головна відмінність: Claude Code працює як повноцінний AI-агент.

Agentic loop

Claude Code найзручніше розуміти через agentic loop.

1. Ви формулюєте prompt.
2. Claude збирає контекст, якого бракує: читає потрібні файли, структуру проєкту, вивід команд.
3. Робить конкретну дію: править файл або запускає команду.
4. Перевіряє результат і порівнює його з метою prompt.
5. Завдання виконане - зупиняється й чекає наступний prompt; результату недостатньо - повертається до збору контексту й повторює цикл.

Протягом цього циклу ви не стаєте пасивним спостерігачем: можна додати контекст, перервати виконання або скерувати модель, якщо вона йде не туди.

Це і є ключова відмінність agentic-середовища від чату - інструмент не лише відповідає, а й працює всередині проєкту, а ви керуєте напрямком і перевіряєте результат.

Розробник відповідає за результат

Зміна вважається прийнятою не тоді, коли Claude її згенерував, а коли людина перевірила, що саме змінилося в коді, прогнала перевірки та взяла відповідальність за результат.

Порівнювати стару й нову версії файлів очима не доведеться: у розробці для цього є готова форма - diff, список змін, який показує:

• які рядки були видалені з файлу;
• які рядки були додані до кодової бази;
• що саме змінилося між старою й новою версією коду.

У консолі такий diff має приблизно такий вигляд:

diff --git a/src/main/java/RefundQueue.java b/src/main/java/RefundQueue.java
index 3a7f2bc..9d41a80 100644
--- a/src/main/java/RefundQueue.java
+++ b/src/main/java/RefundQueue.java
@@ -42,7 +42,7 @@ void prioritize(RefundRequest refundRequest) {
-    if (refundRequest.isUrgent()) {
+    if (refundRequest.isUrgent() || refundRequest.amount() > 100) {
         moveToTop(refundRequest);
     }
 }

Для розробника diff - це не нудна технічна деталь, а основний спосіб побачити, що насправді сталося в проєкті. Текстова відповідь LLM може мати дуже переконливий вигляд, але саме diff показує реальний стан справ без прикрас.

Встановлення на macOS та Linux

Точок входу у Claude Code кілька - термінал, IDE, desktop і web, - але реальна робота йде через дві: CLI та IDE. Ставимо CLI - найповнофункціональнішу версію: нові функції з'являються спочатку в ній, а всі дії агента видно як є. Про IDE та її плагін поговоримо після першого запуску.

Встановлення різниться залежно від OS (macOS, Windows, Linux), а на поведінку також впливає середовище: локальний shell, WSL, SSH чи контейнер. shell - це інтерпретатор команд терміналу; від нього залежить, як Claude Code запускається і які змінні середовища бачить.

На macOS та Linux усе робиться в терміналі. Відкрийте термінал, введіть одну з команд нижче і натисніть Enter. Способів два: офіційний скрипт встановлення (найпростіший, нічого встановлювати заздалегідь не треба) або npm. Для способу через npm у системі має бути встановлений Node.js - разом із ним ставиться і сам npm. Після встановлення введіть останню команду, щоб перевірити версію і переконатися, що claude доступний.

# рекомендований офіційний спосіб: готовий бінарник
curl -fsSL https://claude.ai/install.sh | bash

# альтернатива через npm (без sudo!)
npm install -g @anthropic-ai/claude-code

# перевірити, що інструмент доступний, і його версію
claude --version

Встановлення на Windows та змінна PATH

Способів встановлення на Windows кілька, і всі робочі. Просто орієнтуйтеся на те, який термінал у вас уже налаштований для роботи.

# через Windows Package Manager
winget install Anthropic.ClaudeCode

# native PowerShell
irm https://claude.ai/install.ps1 | iex

# або через npm, якщо в системі є Node.js
npm install -g @anthropic-ai/claude-code

# усередині WSL
curl -fsSL https://claude.ai/install.sh | bash

# перевірити, що інструмент доступний, і його версію
claude --version

PATH

Основна проблема, на яку ви напевно натрапите на Windows, - це змінна PATH. Якщо шлях до виконуваного файлу Claude Code туди не потрапив, термінал просто видасть помилку, що команду claude не знайдено.

Додавання шляху до виконуваного файлу до змінної PATH якраз і розв'язує це завдання, відкриваючи доступ до утиліти з абсолютно будь-якої директорії системи.

Найпростіше попросити будь-який зручний LLM-чат згенерувати точну консольну команду для додавання теки до PATH саме під ваш термінал. Нюанс із правами: свій користувацький PATH змінюється без прав адміністратора; консоль від імені Адміністратора потрібна, лише якщо правите системний PATH для всіх користувачів.

Вхід в акаунт

Спосіб входу у всіх трохи різний: він залежить від типу підписки, від того, особистий це акаунт чи робочий, чи йде оплата через сайт або по API.

Вхід через settings.json

Інтерактивний вхід через браузер - не єдиний шлях. Ті самі параметри підключення можна задати заздалегідь у файлі налаштувань. Цей спосіб ми і будемо використовувати в курсі.

1. Знайдіть папку .claude в домашній директорії користувача: на Windows це C:\Users\<ім'я>\.claude\, на Mac/Linux - ~/.claude/. Всередині знайдіть файл settings.json. Якщо файлу немає - створіть його.
2. Додайте у файл секцію env з налаштуваннями курсу:

   {
     "env": {
       "ANTHROPIC_BASE_URL": "https://llm.javarush.com",
       "ANTHROPIC_AUTH_TOKEN": "PASTE_YOUR_COURSE_KEY_HERE",
       "ANTHROPIC_MODEL": "claude-course-fast[1m]",
       "ANTHROPIC_DEFAULT_HAIKU_MODEL":  "claude-course-fast",
       "ANTHROPIC_DEFAULT_SONNET_MODEL": "claude-course-fast[1m]",
       "ANTHROPIC_DEFAULT_OPUS_MODEL":   "claude-course-pro[1m]",
       "ANTHROPIC_DEFAULT_FABLE_MODEL":  "claude-course-max[1m]",
       "CLAUDE_CODE_ENABLE_GATEWAY_MODEL_DISCOVERY": "1"
     }
   }

   Якщо у файлі вже є інші записи - можна затерти їх повністю або додати блок "env": {...} всередину існуючого об'єкта. При додаванні важливо зберегти JSON-синтаксис: усі ключі в лапках, блоки розділені комами.

Далі запускаємо claude - але про це вже на наступному слайді.

Перший запуск та перші команди

Запустити інструмент найпростіше з терміналу. Термінал є прямо всередині IDE: відкриваєте його, переходите до теки свого проєкту й набираєте одну команду.

# запустити Claude Code в поточній теці проєкту
claude

При першому запуску Claude Code запропонує вибрати тему оформлення консолі - оберіть будь-яку. Якщо з'явиться додаткове запитання, просто натисніть Enter. Після цього має виглядати ось так:

Відкриється діалог - далі ви просто спілкуєтеся з агентом звичайними словами, як у чаті. Кілька команд починаються зі знака / та керують самою сесією. Ось ті, що знадобляться одразу:

# список усіх доступних команд - головна підказка
/help

# перевірити, чи все гаразд із середовищем
/doctor

# очистити контекст і почати розмову заново
/clear

# стиснути контекст, зберігши суть розмови
/compact

# вийти із сесії
/exit

І найважливіша клавіша першого дня - Esc: перериває поточну дію агента. Claude зупиниться, нічого не доламавши, і чекатиме уточнення. Газ ви вже бачили - це гальмо.

Окрема ремарка про подвійний Esc: це вже не стоп, а інша функція - перемотування історії розмови, про неї на третьому вебінарі. Натиснули двічі з переляку - не страшно: агент зупиниться від першого ж натискання, а випадково відкрите меню перемотування закривається тим самим Esc.

Нехай Claude Code сам складе шпаргалку

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

Створи файл commands.md з описом найпопулярніших команд Claude Code:
що робить кожна команда і коли її варто застосовувати

Агент сам створить файл прямо в проєкті та заповнить його. Це перший наочний приклад того, як Claude Code створює та редагує файли за вас - саме в цьому його суть.

Питати можна й про сам інструмент - Claude Code охоче пояснює власні команди:

Яка різниця між /clear та /compact

Навіщо відкривати Claude Code в IDE

Плагін для JetBrains IDE

У JetBrains IDE Claude Code працює через плагін Claude Code [Beta] від Anthropic PBC. Що він уміє:

• швидкий запуск: Cmd+Esc (Mac) або Ctrl+Esc (Windows/Linux) відкриває Claude Code. Є й кнопка в інтерфейсі.
• контекст із редактора: відкрита вкладка і виділений код автоматично передаються Claude - файл і рядки, на які ви зараз дивитеся, він уже бачить, без копіювання та шляхів.
• посилання на файли: Cmd+Option+K (Mac) або Alt+Ctrl+K (Windows/Linux) вставляє посилання виду @src/auth.ts#L1-99 - коли потрібно вказати на код, який зараз не відкритий.

Навіщо все це

Головне - ви бачите, що саме змінює агент, прямо в редакторі, і можете точніше ставити завдання. На практиці у пригоді стають лише кілька речей:

Команда /ide тут як швидка перевірка зв'язку з редактором. Якщо Claude Code запущено в терміналі, а ви хочете, щоб він бачив відкриту IDE, поточний файл і виділений фрагмент, введіть /ide і перевірте статус підключення. Звичка проста: спочатку переконалися, що агент справді підключений до вашого робочого вікна, і тільки тоді просіть його правити код.

• правки агента підсвічуються прямо у файлі - що додано, що видалено, - і ви вирішуєте, прийняти їх чи ні;
• потрібний файл можна підставити прямо в запит через знак @ і послатися на конкретні рядки - агенту не доводиться їх шукати, а ви заощаджуєте контекст;
• помилку чи лог із терміналу легко надіслати в запит, не копіюючи вручну.

# приклад: явно вказуємо файл і рядки прямо в запиті
Виправ форматування у @src/utils.js, рядки 10-25

Набирати шлях руками при цьому не обов'язково: хоткей плагіна ви вже бачили, а без плагіна теж можна - правий клік по рядку коду - Copy / Paste Special - Copy Reference, і в буфері готове посилання виду src/utils/slides.js:16 - просто вставте його в запит.

IDE додає до роботи головне - наочний контроль. Цикл простий:

• Claude пропонує зміну;
• ви бачите її прямо в редакторі та перевіряєте;
• Git фіксує те, що ви прийняли.

Git baseline: безпечний старт

Спокуса зрозуміла: "швидко відкрию проєкт і попрошу Claude все зробити". Притримайте її на хвилину - швидкість без порядку не пришвидшує роботу, а подовжує прибирання. Весь порядок тут - один простий ритм:

Вніс - перевірили - коміт. Знову вніс - перевірили - коміт. Кожен коміт - як збереження в грі: точка, до якої завжди можна повернутися.

Уявіть: дві години роботи, агент чотири рази вносив правки в код - і все вдало. А на п'ятий раз вийшла повна дурниця. З Git відкат - справа двох кліків: в IDE правий клік по файлу - Rollback, або одна команда в терміналі:

# повернути файл до останнього коміту - як Ctrl+Z
git restore RefundInboxService.java

Можна замість цього попросити самого агента: "поверни як було". Але він згадуватиме, як було, з пам'яті: щось забуде, щось перепише по-своєму - і витратить на це час і ваші токени.

А якщо сесія вже закрита, згадувати взагалі нічим: розмову забуто, і агент не відновить файл, а складе його заново - як йому здається правильним. Git повертає файл байт у байт, миттєво і безкоштовно.

Одна ремарка про нові файли. Правило те саме: агент створив файл, ви перевірили - одразу коміт. Тепер і в нього є точка збереження.

Щоб цей ритм працював, потрібен чистий старт - його і називають git baseline: збережений, зрозумілий стан проєкту перед сесією. На практиці це дві звички:

• починайте із закоміченого проєкту: усе ваше вже збережено - значить, усе, що з'явилося в diff після старту, зробив агент. Одразу видно, хто що змінював;
• перед стартом гляньте git status: якщо запустити агента поверх своїх незбережених правок, його зміни змішаються з вашими - потім не розібрати, де чиє.

Налаштування: хто кого перекриває

У Claude Code немає одного чарівного файлу налаштувань. Є ієрархія налаштувань: кілька джерел правил, які накладаються одне на одне. Три основні рівні:

Якщо між налаштуваннями є конфлікт, використовується пріоритетніший рівень: локальні налаштування проєкту пріоритетніші за глобальні. А команда /status показує всі активні налаштування та звідки кожне з них прийшло.

Тека .claude і шари CLAUDE.md

Тека .claude/ - не комірчина, а AI-шар проєкту: артефакти, які допомагають Claude працювати в цьому репозиторії. Це карта місцевості, а не список обов'язкових дій.

Вага в наповнення різна. Зараз реально важливий лише CLAUDE.md - головний файл, його читають. rules/, skills/, agents/, hooks/ - дорожні знаки на майбутнє (повна карта - Рівень 9). Зовнішні інструменти (MCP) підключаються окремо, через .mcp.json у корені проєкту.

А тепер про сам CLAUDE.md - він не один. Ці файли утворюють шари: одні підхоплюються завжди, інші - лише коли агент доходить до потрібної частини проєкту. Що куди класти:

Знайома трійка, правда? Та сама модель, що у settings.json: особисте, командне, локальне - тільки тепер для пам'яті проєкту, а не для налаштувань.

CLAUDE.md: пам'ять проєкту

CLAUDE.md - коротка записка поряд із кодовою базою: "як працювати тут, щоб не наробити зайвого". Це не README ("як підняти проєкт"). Хороший CLAUDE.md нудно читати - і це комплімент.

Головний фільтр: записувати те, що неочевидно з коду, але постійно впливає на роботу.

• Корисно: точні команди запуску й перевірок; неочевидні домовленості; приховані особливості (суми в копійках, soft delete); очікуваний формат відповіді; правила "не чіпати".
• Шкідливо: інструкції під одне сьогоднішнє завдання; очевидне з репозиторію ("проєкт на Next.js"); абстрактні гасла на кшталт "пиши хороший код".

Для першого проєкту достатньо такого файла:

# CLAUDE.md

## Структура
- працюємо з `index.html`
- стилі та JavaScript містяться в цьому ж файлі

## Перевірка
- відкрити `index.html` у браузері
- перевірити сторінку на широкому і вузькому екрані

## Домовленості
- зберігати поточні кольори та стиль карток
- не видаляти готові блоки без підтвердження
- після роботи перелічувати зміни та перевірки

Ключове застереження: CLAUDE.md - це context, not enforcement. "Не чіпати .env" - інструкція, не заборона. Небезпечні зони захищають ще й .gitignore, permissions та захищені шляхи.

CLAUDE.local.md, rules та auto memory

CLAUDE.md, CLAUDE.local.md, rules та auto memory легко прийняти за кілька назв того самого. Ролі різні - ось маршрут, куди що записувати:

Окремо стоїть auto memory - це те, що Claude запам'ятовує по ходу роботи сам, без вашого файлу. Тому саме з нею та з локальним файлом є дві тонкощі, про які забувають:

• Локальний не означає секретний: CLAUDE.local.md не комітиться, але Claude його читає - токенам і паролям там не місце.
• Auto memory старіє: помічник може запам'ятати застарілий факт як істину (наприклад, тимчасовий шлях /api/v0/) - пам'ять треба періодично чистити.

Permission modes: що Claude робить без вас

Permission mode - це межа того, що Claude може зробити без вашого підтвердження.

Перемикають режим не проханням у чаті "будь обережний", а вручну: у CLI та JetBrains - клавішами Shift+Tab, у VS Code та Desktop - селектором режиму поряд із полем введення. Поточний режим видно в рядку стану.

Режим bypassPermissions вмикається окремо - його не видаси випадковим натисканням, а auto не ввімкнеться без явної згоди.

Коротко про кожен режим:

• Plan та Default - перший лише читає й планує, другий питає перед кожною правкою і командою.
• Auto-Accept - сам застосовує правки файлів без питань. Зручний для швидкості та економії лімітів, коли ви все одно перевірите git diff опісля.
• Auto Mode - робить майже все сам, але кожну дію перевіряє окремий запобіжник-класифікатор.
• YOLO bypassPermissions, він же прапор --dangerously-skip-permissions - від You Only Live Once, "живеш лише раз"; на сленгу - режим "тисни й молися". Пропускає всі перевірки. Небезпечний, але хороший для одноразових завдань в ізольованому середовищі: контейнері чи VM. На робочому проєкті - ні.

Принцип вибору: що незрозуміліше завдання, чутливіша зона й дорожчий відкат, то суворіший режим. Сумніваєтеся - беріть суворіше.

Демо - є лише ідея

А тепер давайте зберемо невеликий проєкт і подивимось, як це працює.

CLAWD Wisdom: сторінкою плаває піксельний маскот, ми звемо його CLAWD, а клік у будь-якому місці видає одну підказку про Claude Code. Свій варіант ми вже зібрали, щоб перевірити ідею - він лежить ось тут. Можна відкрити зараз, а можна зачекати і порівняти наприкінці.

І це поки що справді лише ідея: ні файлів, ні структури, ні рішень. Агент їх не вгадає, тому перший крок - не код, а рамка: що за продукт, чим ми обмежені, чого робити не можна. Решту добираємо запитаннями, а не здогадками.

Перша третина шляху проходить до єдиного рядка коду: сказали ідею, відповіли на запитання, отримали план. Далі все крутиться по колу - крок, погляд у браузер, одна правка і знову погляд. Саме це ми зараз і зробимо.

Кажемо простими словами

Хочу сторінку з піксельним маскотом. За курсором він слідує,
а коли мишу не чіпають - плаває екраном сам.
Клік у будь-якому місці показує коротку підказку про Claude Code,
а на сторінці видно, скільки підказок людина вже відкрила.
Стек простий: index.html, styles.css і js поруч, без збірки.

Проєкту поки немає. Постав мені запитання, яких тобі бракує,
і запропонуй план. Код поки не пиши.

Агент запитує, ми відповідаємо - і зʼявляються план та CLAUDE.md з правилами. Файлів сайту досі немає.

Не пиши код. Спершу збери рамку проєкту.

Ідея: односторінковий сайт CLAWD Wisdom. Сторінкою рухається піксельний
маскот Claude Code: за курсором він слідує, а без рухів миші плаває
сам. Клік у будь-якому місці показує одну коротку підказку про роботу
з Claude Code.

1. Постав мені запитання, без відповідей на які план буде вгадуванням.
2. Створи CLAUDE.md і запиши правила проєкту:
   - тільки index.html, styles.css і JavaScript у js/;
   - без npm, збірки, фреймворків і backend;
   - без зовнішніх шрифтів і мережевих запитів;
   - уся анімація - transform усередині одного animation loop;
   - classic scripts з defer і один namespace на весь застосунок,
     без inline-стилів та inline-скриптів;
   - рядки інтерфейсу англійською, підказки українською.
3. Запропонуй план із трьох кроків, де після кожного є видимий
   результат у браузері.
4. Скажи, який permission mode радиш на цю роботу і чому.

Файли сайту поки не створюй.

Демо - перша версія

Рамка записана, план є - будуємо. Беремо перший крок плану: сторінка із заголовком і маскот, який рухається. Формулювання знову людське, без жодного числа.

Кажемо простими словами

Збери перший крок плану: заголовок "One click, one wisdom."
по центру екрана і піксельний маскот, який плаває сам
і пливе за курсором.

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

Оформлення придумай сам. Потім відкрий результат у браузері
і покажи, що вийшло.

Дивіться на екран: маскот пливе за курсором, а варто прибрати руку з миші - відпливає сам. Про кольори, шрифт і тіні я не сказав ані слова.

А рухається він спочатку дерев'яно: доїжджає ривком і розвертається на місці. Живість дають три дрібниці - гальмування біля цілі, нахил із запізненням і легке похитування. Ось їх і уточнюємо числами, другим prompt.

Маскота малювати не потрібно - файл лежить тут. Завантажили, поклали в теку проєкту, а підключить його агент.

Файл clawd.svg я поклав у теку assets/. Підключи його на сторінку.

- маскот - img завширшки 180 px, position: fixed, top: 0, left: 0;
- pointer-events: none, щоб він ніколи не перехоплював кліки;
- will-change: transform і мʼяка тінь через filter: drop-shadow;
- заголовок "One click, one wisdom." по центру екрана,
  не в шапці, і один рядок підпису під ним;
- під підписом лічильник відкритих підказок, поки нульовий.

Оформлення придумай сам: світлий фон, теракотовий акцент,
велика серифна подача заголовка.

Тепер оживи маскота. Весь рух - одним transform
усередині requestAnimationFrame.

- рухай тільки transform, ніколи left і top;
- змінюється завжди ціль, а позиція наздоганяє її згладжуванням -
  тоді перемикання режимів не дає ривка;
- pointermove ставить ціль у позицію курсора;
- якщо вказівником не рухали 2.5 секунди, ціль їде сама:
  x = 0.5W + sin(t * 0.5) * 0.28W, y = 0.42H + sin(t * 0.9) * 0.16H,
  де t - час у секундах, W і H - розміри вікна;
- позиція наздоганяє ціль на 0.045 шляху за кадр при 60 FPS,
  коефіцієнт перерахуй за фактичним delta time;
- якщо горизонтальна швидкість більша за 0.4 px за кадр, віддзеркалюй
  маскота через scaleX, щоб він дивився за ходом руху;
- нахил бери з вертикальної швидкості, межа 18 градусів,
  згладжуй до цілі на 0.08 за кадр;
- додай похитування sin(час / 700) * 4 px по Y.

Один animation loop, delta time обмеж зверху, при схованій
вкладці цикл спиняй. Відкрий у браузері і покажи результат.

Демо - вміст і доведення

Сторінка жива, але мовчить. Другий крок плану - вміст: тридцять підказок і показ по кліку. Тут варто зловити очима, що агент вигадує вміст сам, а отже його треба перевіряти: назви команд він звіряє з документацією, а не бере з голови.

Кажемо простими словами

Додай 30 коротких підказок про Claude Code і показуй одну
по кліку - там, де я клацнув. Кожна підказка - один рядок
не довший за 140 символів. Команди звір із документацією,
нічого не вигадуй.

Поспіль та сама підказка випадати не повинна.
Під заголовком покажи, скільки підказок я вже відкрив.

Далі доведення, і воно йде по одній правці за раз. Після кожної дивимось результат у браузері: тоді видно, яка саме правка що зламала, і відкочувати треба тільки її.

Хай підказка зникає через 20 секунд, і одночасно
їх буде не більше трьох.

Додай підказки.

1. Створи js/data.js з масивом із 30 підказок про роботу з Claude Code:
   - поля запису: id, kind ("command", "tip" або "fact"), text;
   - text не довший за 140 символів, один рядок, без markdown;
   - 15 команд, 10 прийомів роботи, 5 фактів;
   - назви команд, прапорців і режимів звір з офіційною
     документацією, не вигадуй їх.
2. Клік у будь-якому місці сторінки показує одну підказку в точці кліку.
3. Порядок - мішок: індекси перемішані, на кожен клік знімається один,
   мішок спорожнів - перемішай заново.
4. Клік по посиланню, кнопці або полю введення підказку не показує.
5. Координати підказки затисни, щоб текст не виїжджав за край екрана.
6. Під підписом тримай два числа: скільки підказок відкрито
   і скільки лишилось у мішку.

Відкрий у браузері і зроби пʼять кліків: підказки мають бути різними.

Доводимо по одній правці за раз. Після кожного пункту спиняйся,
я дивлюсь результат у браузері.

1. Підказка живе 20 секунд, потім зникає сама.
2. Одночасно не більше трьох підказок: четвертий клік
   прибирає найстарішу достроково.
3. Появу і зникнення роби CSS-переходом, а не через JavaScript.
4. Пробіл і Enter показують підказку без миші, кілька поспіль
   стають сходинкою, а не одна на одну.
5. Контейнер підказок працює як aria-live="polite".
6. Підказка не ширша за 280 px і не зʼявляється ближче 160 px до краю екрана.
7. На ширині 320 px маскот 120 px, підказка вужча, горизонтальної
   прокрутки немає.
8. При prefers-reduced-motion маскот не літає екраном.

Практика CLAWD YOLO

CLAWD YOLO - браузерний генератор піксельного маскота Claude Code. Користувач обирає емодзі-настрій - 😛, 😁, 😪 і т.д. І CLAWD повторює його обличчям та позою. Далі бере готову палітру, домальовує пікселі за бажанням і завантажує результат: прозорий PNG, SVG, аватар для профілю або стікер у месенджер.

Формула: ідея → мінімальна версія → референси → збірка → перевірка → ітерації.

Спершу подумайте самі

Prompt - потім. Спершу дайте відповідь собі:

• головне завдання - що генератор робить;
• що людина обирає, змінює і забирає;
• які функції обовʼязкові в першій версії;
• який мінімальний сценарій доводить ідею;
• що йде в наступні ітерації.

На все одразу відповіді може не бути - це нормально, решту проговорите з агентом.

Як працювати над проєктом

1. Мінімум: короткий ланцюжок, який уже працює.
2. Референси: схожі генератори, розберіть з агентом.
3. Вибір: забирайте сильне, зайве відкидайте.
4. Ітерації: крок, перевірка в браузері, далі.

Ділимо так:

• перша версія - настрій, палітра, preview, прозорий PNG;
• далі по одній - 16 настроїв, редактор пікселів, SVG і стікери, збереження, доступність з клавіатури.

Створи статичний вебзастосунок CLAWD YOLO -
інтерактивний генератор піксельного маскота.

Мета
Користувач обирає емоцію і палітру, змінює розмір пікселя
і фон, за потреби редагує клітинки, а потім експортує
готового маскота. Результат має працювати локально без встановлення.

Стек і структура
- тільки index.html, styles.css і JavaScript у теці js/;
- без npm, framework, transpilation, build, backend і зовнішніх API;
- без мережевих запитів після відкриття сторінки;
- застосунок відкривається напряму через index.html і зі static hosting;
- підключи classic scripts з defer у порядку:
  js/data.js, js/core.js, js/exporters.js, js/app.js;
- використовуй один namespace window.ClawdLab, не створюй зайвих globals;
- не розміщуй CSS і JavaScript inline в index.html.

Дані емоцій
- створи рівно 16 варіантів: Normal, Happy, Surprised, Wink,
  Dancing, Sleeping, Cool, Angry, Looking down, Pointing right,
  Raising arm, In love, Sad, Laughing, Thinking і Party;
- у кожного варіанта мають бути унікальні id, label, short label,
  відповідний emoji, width і власна pixel-grid;
- більшість grid мають розмір 13x11, Looking down - 13x12,
  Pointing right - 17x11, Raising arm - 13x13;
- дозволені tokens: "." - порожньо, B - body, S - shadow,
  D - dark, W - white;
- довжина кожного рядка мусить збігатися з width;
- декоративні emoji ховай від screen reader.

Палітри і кольори
- створи рівно 8 палітр з каналами body, shadow, dark, background:
  Claude: #CD7B5A, #CA7356, #1A1A1A, #000000;
  Mint: #A8DADC, #7BBFC2, #1D3557, #F1FAEE;
  Berry: #C77DFF, #A55FDF, #240046, #F8F0FF;
  Ocean: #48CAE4, #2FA8C2, #03045E, #CAF0F8;
  Lime: #A7C957, #85A43C, #1A2E05, #F0F8E8;
  Coral: #FF6B6B, #D94F4F, #2B2D42, #FFF3F3;
  Mono: #CCCCCC, #999999, #111111, #F5F5F5;
  Night: #5C6BC0, #3E4DA0, #E8EAF6, #1A237E;
- дозволь вручну змінювати body, shadow, dark і background;
- колір background показуй лише при увімкненому фоні;
- перше вмикання прозорого background встановлює #000000.

Preview і розмір
- малюй справжній bitmap у canvas і вимкни image smoothing;
- default state: Normal, розмір 24 px, фон вимкнено;
- розмір логічного пікселя: від 8 до 48 px з кроком 4;
- зміна емоції, палітри, ручного кольору, розміру або фону
  одразу оновлює основний preview без перезавантаження;
- варіанти різної ширини не обрізаються і вміщуються в контейнер;
- поруч показуй grid size, pixel size, output size і STOCK/CUSTOM.

Pixel Editor
- інструменти: Erase, Body, Shadow, Dark і White;
- підтримай click, mouse drag, touch або pointer drag;
- з клавіатури працюють Arrow keys, Enter, Space і shortcuts
  E, B, S, D, W для вибору інструмента;
- editor працює з окремим draft;
- незбережений draft НЕ змінює основний preview;
- Save Grid активний лише при змінах, записує custom grid,
  оновлює preview і показує marker біля зміненої емоції;
- Reset активний, тільки якщо є що скидати, і повертає
  вбудовану grid лише для обраної емоції;
- малювання окремих клітинок не пише localStorage на кожен move.

Зберігання
- використовуй key mascot_custom_grids_v1;
- зберігай payload з version: 1 і обʼєктом grids;
- валідуй кожну grid окремо перед застосуванням;
- пошкоджений JSON або невалідний запис не ламають застосунок;
- якщо localStorage недоступний, застосунок продовжує працювати,
  але повідомляє користувачу, що зберегти зміни не вдалося;
- custom grids відновлюються після reload.

Експорт
- Copy SVG копіює SVG у clipboard;
- Download SVG завантажує mascot-{expressionId}.svg;
- Download PNG створює mascot-{expressionId}.png у масштабі 8x;
- Sticker PNG завжди має прозорий зовнішній фон і білу
  піксельну обводку, ігнорує користувацький background
  і завантажується як mascot-{expressionId}-sticker.png;
- для sticker використовуй фіксований розмір логічного пікселя 16 px;
- білу обводку будуй квадратною дилатацією alpha mask
  з радіусом 9 bitmap px;
- додай зовнішній прозорий padding 11 px з кожного боку;
- підсумковий розмір sticker: width = gridWidth * 16 + 22,
  height = gridHeight * 16 + 22;
- Copy HTML створює div-grid з однією клітинкою на видимий pixel;
- Copy CSS створює box-shadow лише для непрозорих клітинок;
- White token зберігається у SVG, PNG, sticker, HTML і CSS;
- усі exporters використовують одну resolved grid і поточні colors;
- background додається лише коли він увімкнений;
- тимчасові Blob URL звільняй після download.

Інтерфейс і accessibility
- зроби оригінальний сучасний pixel-art інтерфейс;
- desktop layout адаптується до 768 px і 320 px без page overflow;
- внутрішній horizontal scroll дозволений лише редактору;
- усі дії реалізуй через button, input і label;
- selected buttons використовують aria-pressed;
- editor toggle використовує aria-expanded;
- editor cells мають row, column і color label;
- toast працює як live region;
- колір не має бути єдиною ознакою selected state;
- додай помітні focus states і prefers-reduced-motion.

План перевірки
- перевір, що створено 16 expressions і 8 palettes;
- Normal при pixel size 24 дає canvas 312x264;
- Normal PNG 8x має розмір 2496x2112;
- Normal sticker має розмір 230x198;
- Looking down дає 312x288, Pointing right - 408x264,
  Raising arm - 312x312;
- editor Normal містить 143 клітинки;
- draft не змінює preview до Save;
- Save переживає reload, Reset не зачіпає інші емоції;
- Copy SVG, Download SVG, Download PNG, Sticker PNG,
  Copy HTML і Copy CSS працюють;
- інтерфейс працює з mouse, touch і keyboard;
- у console немає помилок у happy path;
- усі відносні ресурси існують, duplicate id відсутні;
- кожен JavaScript-файл проходить syntax check.

Порядок роботи
1. Спершу покажи короткий план, state model і структуру файлів.
2. Якщо вимоги не конфліктують, реалізуй проєкт повністю.
3. Відкрий результат у браузері і пройди весь план перевірки.
4. Виправ знайдені помилки і лише потім повідом про готовність.
5. У фіналі перелічи створені файли, виконані перевірки
   і обмеження, які лишились.

Практика CLAWD Runner

Зібрати з Claude Code нескінченний раннер: дорога не закінчується, перешкоди йдуть назустріч, завдання - протриматись якомога довше. Орієнтир з механіки - Dinosaur Game, та сама гра з Chrome, яка зʼявляється, коли зник інтернет.

Ідея

Адаптація має бути своєю: замість динозавра біжить піксельний маскот CLAWD, а цифрові перешкоди і terminal-теми формують власний візуальний світ.

Як виглядає проєкт

• Забіг: маскот біжить сам, ви лише стрибаєте і пригинаєтесь, а швидкість весь час зростає.
• Зіткнення: врізався - забіг закінчився, а restart стартує новий без перезавантаження сторінки.
• Азарт: найкращий результат висить поруч із рахунком, і його хочеться перебити.
• Стек: той самий - index.html, styles.css і JavaScript поруч.

Як працювати

1. Вивчіть оригінальну механіку і вирішіть, що повторюєте, а що змінюєте під CLAWD.
2. Спершу зберіть MVP: біг, стрибок, obstacle, collision, score і restart.
3. Потім додайте duck, зростання складності, touch, pause, адаптивність і перевірку.

Коли базова версія грається - додавайте своє. Хай CLAWD збиває летючих качок або відкриває портал, який на три секунди затягує все, що трапляється по дорозі. Усе в руках вашої фантазії.

Створи статичну браузерну гру CLAWD Runner -
самостійну pixel-art адаптацію Dinosaur Game.

Мета
Гравець керує піксельним маскотом CLAWD. Маскот автоматично
біжить, перестрибує наземні перешкоди і пригинається під
летючими. Score росте разом із дистанцією, швидкість поступово
збільшується, а зіткнення завершує поточний забіг.

Оригінальність
- використовуй Dinosaur Game лише як референс ігрової механіки;
- не копіюй вихідний код, sprite sheet, error page, логотипи,
  графіку або точний інтерфейс Google Chrome;
- створи власний візуальний світ CLAWD у terminal-тематиці;
- усі sprites і obstacles опиши власними pixel-grids.

Стек і структура
- тільки index.html, styles.css і JavaScript у теці js/;
- без npm, framework, TypeScript, build, backend і зовнішніх API;
- без мережевих запитів і сторонніх ігрових рушіїв;
- не розміщуй CSS і JavaScript inline в index.html;
- створи js/data.js, js/game.js, js/renderer.js і js/app.js;
- підключи classic scripts з defer у цьому ж порядку;
- використовуй один namespace window.ClawdRunner;
- застосунок працює зі static hosting і показує ігрову сцену
  при прямому відкритті index.html.

Персонаж
- замість динозавра використовуй упізнаваного маскота CLAWD;
- створи states idle, runA, runB, jump, duckA, duckB, hit
  і celebrate;
- кожен state зберігається як власна pixel-grid;
- tokens: "." - transparent, B - body, S - shadow,
  D - dark detail, W - white detail;
- використовуй теракотову палітру CLAWD;
- runA/runB і duckA/duckB утворюють двокадрові анімації;
- прозорі краї sprite не входять у hitbox.

Перешкоди і світ
- створи bug-small, error-stack і context-cloud;
- перші два obstacle розташовані на землі;
- context-cloud летить над землею і зʼявляється після 300 points;
- не використовуй кактуси, птеродактиля і логотип Chrome;
- лінія землі нагадує доріжку з code blocks;
- кожні 500 points перемикай світлу і темну terminal-тему;
- зміна теми не впливає на physics і collision.

Стани гри
- ready: CLAWD чекає старту, score дорівнює 00000;
- running: світ рухається, score росте, obstacles створюються;
- paused: physics, score, animation і spawn зупинені;
- gameOver: рух зупинено, видно score, best і Restart;
- restart створює новий забіг без перезавантаження сторінки;
- при blur або visibilitychange активний забіг ставиться на паузу.

Керування
- Space, ArrowUp і W запускають гру або виконують jump;
- ArrowDown і S вмикають duck, а в повітрі прискорюють падіння;
- P і Escape ставлять гру на паузу або продовжують її;
- Enter і Space перезапускають гру після collision;
- утримання клавіші не створює серію автоматичних jumps;
- tap/click по Canvas запускає гру і виконує jump;
- на touch-екрані є окремі кнопки Jump і Duck;
- відпускання Duck повертає звичайний біг.

Physics і ігровий цикл
- використовуй requestAnimationFrame і delta time;
- logical Canvas має розмір 960x300, ground Y дорівнює 240;
- стартова швидкість: 340 px/s, максимальна: 700 px/s;
- gravity: 2300 px/s2, jump velocity: -820 px/s;
- score росте зі швидкістю 10 points/s;
- обмежуй завеликий delta time після повернення до вкладки;
- physics не має залежати від refresh rate дисплея;
- новий jump дозволений лише після приземлення.

Spawn і складність
- перший obstacle зʼявляється не раніше ніж через 1.5 секунди;
- між obstacles завжди лишається прохідна дистанція;
- враховуй поточну швидкість при розрахунку наступного spawn;
- не створюй неможливі комбінації;
- один obstacle type не повторюється більше двох разів поспіль;
- до 100 points використовуй bug-small;
- після 100 points додай error-stack;
- після 300 points додай context-cloud;
- кожні 100 points трохи збільшуй швидкість;
- після maximum speed забіг триває без прискорення.

Collision
- використовуй прямокутні hitboxes з внутрішніми offsets;
- hitbox CLAWD трохи менший за видимий sprite;
- duck state реально зменшує висоту hitbox;
- розмір Canvas на екрані не змінює collision coordinates;
- одна collision-функція працює з усіма obstacles;
- додай вимкнений за замовчуванням debug mode для hitboxes.

Score і зберігання
- показуй SCORE, BEST і SPEED;
- score росте лише у стані running;
- best score зберігай під key clawd_runner_best_v1;
- перевіряй збережене значення перед використанням;
- пошкоджений або недоступний localStorage не ламає гру;
- перевіряй відновлення best score через localhost
  або static hosting, не покладайся на file URL.

Canvas і rendering
- малюй ігрову сцену через Canvas 2D;
- враховуй devicePixelRatio і вимкни image smoothing;
- logical coordinates лишаються 960x300 на будь-якому екрані;
- порядок: background, decoration, ground, obstacles, CLAWD;
- HUD і кнопки лишаються HTML-елементами;
- видаляй obstacles після виходу за ліву межу;
- не створюй DOM-елемент на кожен ігровий обʼєкт;
- update game state відокремлений від rendering.

Responsive і accessibility
- перевір ширини 320, 768 і 1440 px;
- не допускай page-level horizontal overflow;
- Canvas зберігає пропорції і різкий pixel-art;
- touch buttons мають область щонайменше 44x44 px;
- усі дії доступні через справжні button;
- у Pause змінюються текст і aria-pressed;
- status, game over і новий рекорд оголошуються через live region;
- focus state помітний;
- prefers-reduced-motion вимикає decorative transitions і flash;
- Canvas має зрозумілий aria-label.

План перевірки
- ready state видно після завантаження, console чиста;
- гра запускається через keyboard, button і touch;
- run animation, jump, duck і hit візуально різняться;
- наземні obstacles проходяться jump;
- context-cloud проходиться duck;
- collision переводить гру в gameOver;
- pause зупиняє physics, spawn і score;
- restart працює без reload і не створює другий animation loop;
- швидкість росте, але комбінації лишаються прохідними;
- score не росте в paused і gameOver;
- best score відновлюється після reload на static hosting;
- resize не скидає забіг і не ламає collision;
- після десяти restart не накопичуються event listeners;
- кожен JavaScript-файл проходить node --check;
- усі відносні ресурси існують, duplicate id відсутні;
- у грі немає коду, графіки і брендингу Chrome.

Порядок роботи
1. Вивчи поточну теку і покажи короткий план.
2. Опиши state model, physics і структуру файлів.
3. Спершу реалізуй MVP: run, jump, obstacle, collision,
   score, gameOver і restart.
4. Перевір MVP у браузері і виправ базові помилки.
5. Додай duck, difficulty, touch, pause і accessibility.
6. Пройди весь план перевірки і виправ знайдені проблеми.
7. У фіналі перелічи файли, виконані перевірки
   і обмеження, що лишились.

Практика - деплой "у мережу"

Для тих, хто хоче довести до кінця: зробіть свої симуляції доступними за посиланням - задеплойте їх на безкоштовний хостинг, щоб відкривались у будь-кого, а не тільки у вас локально.

Куди можна безкоштовно деплоїти

• itch.io - профільний майданчик для браузерних ігор та інтерактиву, приймає HTML5-збірку;
• GitHub Pages - статичний хостинг прямо з репозиторію;
• Netlify або Vercel - деплой перетягуванням теки або з git.

Якщо виникають питання, як задеплоїти на обраний сервіс - поставте питання агенту, він підкаже.

Симуляція відкривається за публічним URL у режимі інкогніто, без локального сервера, і працює з телефона.