Skip to main content
skill CX Codex

threejs-qa-release — Claude Code skill: QA for games

Checks Three.js browser games before release, covering gameplay, responsive views, builds and visual evidence. Use it after gameplay changes or before publishing.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-qa-release -a claude-code
Open on GitHub

What threejs-qa-release does

This skill runs a QA pass for a Three.js game: it builds and typechecks the project, collects browser errors, checks that canvas pixels are not blank, and captures active play. It covers input, objective progress, failure and retry, then checks HUD fit, safe areas and touch targets on target viewports.

For visual checks, it includes scripts/inspect-threejs-canvas.mjs. The script reads viewport and state pairs from artifacts/evidence.json, captures them, and reports pixel metrics, errors, screenshots and report paths. Blank canvas output or errors exit with a non-zero code, so that is a release blocker worth fixing before reporting a pass.

The release pass reviews package scripts, Vite configuration, base paths and public assets before checking a production build on a static server. For release-ready gameplay claims, it runs the bot in tests/bot-playtest.template.ts and records its metrics alongside residual risks.

What it helps with

  • test the gameplay loop from input through retry
  • detect blank or visually flat canvas output
  • capture active play on mobile and desktop viewports
  • check a production build and static-hosting base path
  • record bot-playtest metrics and release risks

Example prompts for the agent

  • Run a full pre-release QA pass for this Three.js game and prepare an evidence report with unresolved risks.
  • Define the required states in artifacts/evidence.json and run scripts/inspect-threejs-canvas.mjs.
  • Review the production build, Vite base path, and debug UI gating before release.

How to install threejs-qa-release

1Skills CLI (Vercel)

npx skills add majidmanzarpour/threejs-game-skills --skill threejs-qa-release -a claude-code

2Manually: put the files in place

~/.claude/skills/threejs-qa-release/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/threejs-qa-release/

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

Questions about threejs-qa-release

How do I install threejs-qa-release in Claude Code?

Run npx skills add majidmanzarpour/threejs-game-skills --skill threejs-qa-release -a claude-code, then run npx skills add majidmanzarpour/threejs-game-skills --skill threejs-qa-release -a claude-code again. The skill file is at ~/.claude/skills/threejs-qa-release/SKILL.md.

What does threejs-qa-release do?

It checks a Three.js browser game before release, including gameplay, browser errors, responsive layouts, builds and visual captures. It also guides an evidence report with release risks.

What is required to inspect the canvas?

Run the inspector from the game project after its npm dependencies are installed. Declare viewport and state pairs in artifacts/evidence.json with a fresh run ID before the pass.

Source text

SKILL.md · MIT
---
name: threejs-qa-release
description: "Verify and release Three.js browser games: playtest QA, automated bot playtests, mobile and responsive checks, production builds, static-hosting base paths, debug gating, bundle review, screenshots, visual regression baselines, canvas-pixel inspection with measured metrics, and release risk reports."
---

# Three.js QA Release

Prove the game works the way a player will meet it, then prepare a shippable build with its known risks.

Resolve `<this-skill-dir>` and local references from the actual loaded skill file; resolve sibling skills beside it before using runner-discovered alternatives. Run the inspector from the game project with its npm dependencies installed.

## References

| File | Read it when |
| --- | --- |
| `references/release-checks.md` | mobile verification, production release, performance evidence, or release-failure traps |
| `references/visual-test-harness.md` | screenshot baselines, visual regression, UI or generated-asset regression protection |
| `references/playtest-bot.md` | release-ready gameplay claims, difficulty and fairness checks, or a loop never driven by scripted input |

## QA pass

For a complete game use the full pass below. For narrow edits select checks covering the affected behavior, states, and target viewports. Reuse valid specialist evidence from the same code revision; the lead owns one consolidated pass. Repeat only after relevant changes, failures, or unresolved concerns. An explicit desktop-only scope does not require adding mobile gameplay.

1. Install dependencies, run build and typecheck, start the dev or preview server.
2. Open the browser target and capture console, page, and network errors.
3. Confirm non-blank, visually varied canvas pixels.
4. Capture active play on each target viewport (desktop and mobile by default), not just the title screen.
5. Exercise the main input, objective progression, fail and retry, and whatever changed most recently.
6. Check HUD text fit, safe areas, touch targets, and responsive layout.
7. When audio changed: user-gesture unlock, SFX triggers, ambience loop start and stop, pause and restart cleanup, mute and volume, decode errors.
8. Decide on a visual test harness. For premium, release-ready, UI-heavy, or generated-asset work a harness is usually worth it; say so either way.
9. Run the bot playtest (`tests/bot-playtest.template.ts` in scaffold games) for release-ready gameplay claims and report its metrics JSON.
10. When animation changed, capture a short unpaused sequence and inspect locomotion, clip transitions, feet, rig deformation, and attack/contact timing using `references/visual-test-harness.md`.

Screenshots alone do not cover gameplay changes.

## Canvas inspector

```bash
node <this-skill-dir>/scripts/inspect-threejs-canvas.mjs --manifest artifacts/evidence.json --url http://127.0.0.1:5188 --seed 42
```

Declare the pass's viewport/state pairs in `artifacts/evidence.json` first, with a fresh run ID; the format and the test-hook contract are in the director's `references/evidence-manifest.md`. One command captures every declared pair in a single browser and prints one line per capture: PASS/FAIL, GPU, pixel metrics, over-budget rows, error counts, and the report and screenshot paths. Open a report file only when its line needs more detail. Include all requested states; do not remove a failing slot to make the manifest pass. For a one-off check, `--state <name> [--mobile]` captures a single view, and omitting `--state` checks only the current view. Scaffold games have their own copy as `npm run inspect:canvas`.

The metrics are the Measured Evidence for the visual scorecard in `threejs-aaa-graphics-builder/references/visual-scorecard.md`. Over-budget rows need a documented tradeoff, and blank-canvas or error conditions exit non-zero.

## Release pass

Inspect package scripts, Vite config, base path, and public assets → gate debug UI, logging, and test helpers → run the production build and preview it on a static server → check the built output on target viewports → review bundle and large assets → document the deploy command, host assumptions, and residual risks.

## Report

Lead with the result and unresolved defects. Put the detailed commands, manifest, captures, motion evidence, controls exercised, issues fixed, and deployment notes in the project's evidence report. Include the harness decision and bot metrics when in scope. Return the artifact path to the lead; passing pixels and acknowledged state hooks do not establish aesthetic quality or successful gameplay by themselves.

© majidmanzarpour · MIT · majidmanzarpour/threejs-game-skills

Similar skills

All skills for Testing and QA →

From the same set9

threejs-3d-generator Generates 3D assets for Three.js games through the Tripo API: text or image to model, with texturing, rigging and animation, saved as GLB or FBX. CX Codex +1 3,500installs threejs-game-ui-designer Skill for designing game UIs in Three.js: HUDs, menus, pause and win screens, responsive layout for mobile and desktop. Prevents overlaps, ensures readability, and keeps UI cohesive with game style. CX Codex +1 3,300installs threejs-gameplay-systems Scaffolds and tunes playable Three.js browser games with Vite and TypeScript. Helps design core loops, handle input, camera motion, and Rapier physics. CX Codex +1 3,300installs threejs-aaa-graphics-builder A skill for upgrading Three.js games from rough prototypes to production visuals: builds materials, lighting, VFX, shaders, and evaluates scenes against a scorecard. CX Codex +1 3,200installs threejs-debug-profiler Tracks down blank canvases and runtime render bugs in Three.js browser games. Measures draw calls, shaders, and memory bottlenecks without breaking playability. CX Codex +1 3,100installs threejs-game-director A director skill for Three.js browser games: it runs the work from a playable loop to graphics, UI and browser checks by handing phases to sibling skills. CX Codex +1 3,100installs threejs-audio-generator A skill that turns ElevenLabs into game audio for Three.js: effects, loops, music and voice lines, written straight into the project. CX Codex +1 2,900installs threejs-image-generator Generates and edits 2D game assets for Three.js using Google's Gemini image API. Prepares textures, UI art, and reference images for image-to-3D pipelines. CX Codex +1 2,900installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

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