develop-web-game — скилл для Claude Code: игры и установка
Скилл задаёт цикл разработки и проверки веб-игр на HTML и JavaScript. Пригодится, когда вы добавляете механику и хотите проверять её в браузере после каждого существенного изменения.
npx claude-code-templates@latest --skill creative-design/develop-web-gameЧто делает develop-web-game
Скилл предлагает разбивать работу над игрой на небольшие изменения и проверять каждое через Playwright. Скрипт запускает браузерные действия, а разработчик изучает снимки экрана, текстовое состояние игры и ошибки консоли. Затем исправляет проблему и повторяет проверку.
Для тестового цикла нужны доступный playwright, один canvas и функция window.render_game_to_text, которая возвращает состояние игры в JSON. Также предусмотрены window.advanceTime(ms), файл действий action_payloads.json и скрипт web_game_playwright_client.js. Без playwright запуск тестового скрипта не сработает.
Скилл предлагает вести progress.md, проверять управление и игровые переходы, а перед новым сценарием сбрасывать состояние. Снимки нужно открывать и осматривать; одного факта их создания недостаточно. Для проверки игры на экране функция текстового состояния должна отражать те же данные, что видны игроку.
Какие задачи решает
- проверить новую игровую механику в браузере
- сопоставить состояние игры с изображением на экране
- найти новые ошибки в консоли после изменения
- проверить цепочку действий от ввода до игрового результата
- повторно пройти тесты после исправления
Примеры запросов агенту
- Добавь прыжок персонажу и проверь его в браузере через Playwright.
- Проверь, что сбор ключа открывает дверь и состояние игры обновляется.
- Найди новые ошибки консоли после изменения меню и повтори проверку.
Как установить develop-web-game
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/develop-web-game2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill develop-web-game -a claude-code3Вручную: положить файлы
~/.claude/skills/develop-web-game/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/develop-web-game/
Вручную: положить файлы
.agents/skills/develop-web-game/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/develop-web-game/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates develop-web-game2Вручную: положить файлы
.github/skills/develop-web-game/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/develop-web-gameВручную: положить файлы
.devin/skills/develop-web-game/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о develop-web-game
Как установить develop-web-game в Claude Code?
Запустите npx claude-code-templates@latest --skill creative-design/develop-web-game. Это способ установки из каталога шаблонов.
Что делает develop-web-game?
Скилл задаёт порядок разработки и проверки веб-игр: небольшое изменение, запуск теста через Playwright, осмотр снимков и текстового состояния, исправление найденных проблем.
Что нужно для работы тестового цикла?
Нужен доступный playwright. Игра также должна предоставлять canvas и функцию window.render_game_to_text; для надёжного продвижения времени предусмотрен хук window.advanceTime(ms).
