Skip to main content
affpapa.org
RU EN
skill

develop-web-game — Claude Code skill for web games

This skill lays out a development and testing loop for HTML and JavaScript games. Use it while adding game features and checking each meaningful change in a browser.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill creative-design/develop-web-game
Open on GitHub

What develop-web-game does

The skill breaks game work into small changes, then checks each one with Playwright. A test script runs browser actions; the developer reviews screenshots, the game's text state, and console errors before making a fix and running the test again.

The loop needs an available playwright, a canvas, and a window.render_game_to_text function that returns game state as JSON. It also uses window.advanceTime(ms), an action reference file named action_payloads.json, and the web_game_playwright_client.js script. The test script cannot run without playwright.

The workflow calls for tracking work in progress.md, exercising controls and game-state transitions, and resetting state between separate scenarios. Screenshots must be opened and inspected, not merely generated. The text-state output should match what appears on screen.

What it helps with

  • test a new game mechanic in the browser
  • compare game state with what appears on screen
  • spot new console errors after a code change
  • check the full path from player input to game outcome
  • rerun checks after fixing a defect

Example prompts for the agent

  • Add a jump action for the character and test it in the browser with Playwright.
  • Check that collecting a key opens the door and updates the game state.
  • Look for new console errors after the menu change, then run the checks again.

How to install develop-web-game

1claude-code-templates

npx claude-code-templates@latest --skill creative-design/develop-web-game

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill develop-web-game -a claude-code

3Manually: put the files in place

~/.claude/skills/develop-web-game/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/develop-web-game/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about develop-web-game

How do I install develop-web-game in Claude Code?

Run npx claude-code-templates@latest --skill creative-design/develop-web-game. This installs the skill through the templates package.

What does develop-web-game do?

It guides web-game development through small changes and Playwright checks. The workflow includes reviewing screenshots, text state, and console errors before retesting fixes.

What does the test loop need?

playwright must be available. The game also needs a canvas and a window.render_game_to_text function; window.advanceTime(ms) provides a deterministic way to advance game time.

Similar skills

All skills for Game dev and 3D: Unity, Unreal, Godot, Blender →
orbit-card heygen-com Adds a 10-second 1920×1080 HyperFrames motion block where a single feature card orbits a dot sphere using exported Blender camera paths. CX Codex +1 10,000installs cad earthtojake Builds and edits parametric CAD models, exports STEP, STL, 3MF and GLB, measures geometry, and opens existing files in CAD Viewer. CX Codex +1 14,000installs step-parts earthtojake This skill searches the step.parts catalog for off-the-shelf components and pulls their STEP files, so you stop modeling placeholder geometry. CX Codex +1 11,200installs sdf earthtojake This skill authors and validates SDFormat files for models and worlds, then helps prepare them for simulator handoff. CX Codex +1 10,500installs urdf earthtojake This skill helps create, validate, and debug URDF robot descriptions. Use it when working with links, joints, geometry, meshes, or inertial data. CX Codex +1 10,500installs hatch-pet official openai Creates and packages animated pets and spritesheets for Codex. Use it to turn a character concept, reference image, or brand cues into a pet. CX Codex +1 3,300installs

From the same set495

The whole set →
log Writes a finished task's report into your tracker or notes: time spent, status, commits. Useful when the coding happens in Claude but the record lives in Linear or Obsidian. 351installs create-worktrees Pulls every open pull request through GitHub CLI and sets up a separate git worktree for each branch under ./tree/. Useful when you want several PRs checked out at once without switching branches in the main checkout. 351installs setup-ci-cd-pipeline Configures CI/CD pipelines for GitHub Actions, GitLab CI, Azure Pipelines, or Jenkins with automated testing, security gates, and deployment flows. 346installs excalidraw This skill routes Excalidraw file work to subagents so large JSON diagrams stay out of the main context. Use it for flowcharts and architecture visuals. 342installs branch-cleanup A Claude slash command that finds merged and stale branches, checks them before deletion, and tidies up both local and remote refs. 342installs pentest-checklist A skill that walks you through pentest planning: objectives, scope, environment prep, tester selection and monitoring. Useful before a security assessment. 336installs nextjs-scaffold Sets up a structured Next.js application with App Router, security headers, ESLint, and image optimization. 334installs create-database-migrations A Claude slash command that generates database migration files with versioning and rollback methods. Useful when you change a schema and don't want to hand-write up/down. 329installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor