threejs-qa-release
majidmanzarpour/threejs-game-skills
QA and release verification for Three.js browser games with automated testing, visual regression, and risk reporting.
What is threejs-qa-release?
Comprehensive testing and release toolkit for Three.js games covering playtest QA, automated bot playtests, mobile/responsive checks, production builds, visual regression baselines, and canvas-pixel inspection with metrics. Use this when preparing a game for release or verifying changes across viewports and gameplay states.
- Automated bot playtests to verify release-ready gameplay and difficulty balance
- Mobile and responsive layout verification across target viewports
- Canvas pixel inspection with GPU metrics and performance budgets
- Visual regression testing with screenshot baselines and harness support
- Production build verification with static-hosting base path configuration
- Bundle and asset review with risk documentation
How to install threejs-qa-release
npx skills add https://github.com/majidmanzarpour/threejs-game-skills --skill threejs-qa-release- Three.js game project with npm dependencies installed
- Dev or preview server running locally
- Browser for manual testing and bot playtest execution
How to use threejs-qa-release
- 1.Install dependencies and run build/typecheck for your game project
- 2.Start the dev or preview server on localhost
- 3.Run the QA pass: capture console/network errors, verify canvas pixels, test on each target viewport (desktop and mobile)
- 4.Exercise main gameplay: input, progression, fail/retry, and recent changes
- 5.Check HUD text fit, safe areas, touch targets, and responsive layout
- 6.Run bot playtest with `tests/bot-playtest.template.ts` and capture metrics JSON
- 7.For visual changes, decide on a visual test harness and capture baseline screenshots
- 8.Run canvas inspector: `node <skill-dir>/scripts/inspect-threejs-canvas.mjs --manifest artifacts/evidence.json --url http://127.0.0.1:5188`
Use cases
- Verify a Three.js game works correctly before shipping to production
- Test gameplay changes across desktop and mobile viewports with automated bots
- Capture visual regression baselines to protect UI and generated assets from unintended changes
- Inspect canvas rendering metrics and GPU performance against budgets
- Gate debug UI and logging before production builds
- Game developers shipping Three.js browser games
- QA leads coordinating multi-viewport testing and release sign-off
- Graphics engineers validating visual changes and performance metrics
- Release managers preparing production builds and deployment documentation
threejs-qa-release FAQ
Use a harness for premium, release-ready, UI-heavy, or generated-asset work. Declare your decision either way in the evidence report.
The bot playtest verifies release-ready gameplay claims, difficulty and fairness, and exercises loops that may not be driven by scripted input.
No. Screenshots alone do not cover gameplay changes; you must also capture active play and exercise main input, progression, and fail/retry flows.
The inspector reports GPU, pixel metrics, over-budget rows, error counts, and generates both a report file and screenshot for each captured state.
Yes. Reuse valid specialist evidence from the same code revision; repeat only after relevant changes, failures, or unresolved concerns.
Full instructions (SKILL.md)
Source of truth, from majidmanzarpour/threejs-game-skills.
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.
- Install dependencies, run build and typecheck, start the dev or preview server.
- Open the browser target and capture console, page, and network errors.
- Confirm non-blank, visually varied canvas pixels.
- Capture active play on each target viewport (desktop and mobile by default), not just the title screen.
- Exercise the main input, objective progression, fail and retry, and whatever changed most recently.
- Check HUD text fit, safe areas, touch targets, and responsive layout.
- When audio changed: user-gesture unlock, SFX triggers, ambience loop start and stop, pause and restart cleanup, mute and volume, decode errors.
- 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.
- Run the bot playtest (
tests/bot-playtest.template.tsin scaffold games) for release-ready gameplay claims and report its metrics JSON. - 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
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.
Related skills
More from majidmanzarpour/threejs-game-skills and the wider catalog.

threejs-3d-generator
Generate game-ready 3D assets for Three.js via Tripo API: text-to-3D, image-to-3D, rigging, animation, and stylization.

threejs-aaa-graphics-builder
Upgrade Three.js games from prototype to AAA-quality browser graphics with procedural models, materials, shaders, and render optimization.

threejs-audio-generator
Generate, convert, and integrate game audio for Three.js with ElevenLabs—SFX, music, voice, and Web Audio playback.

threejs-debug-profiler
Debug and profile Three.js games: render bugs, asset loading, performance bottlenecks, and bundle size.

notion-cli
CLI tool to interact with Notion API, manage workers, and upload files.

effect-best-practices
Enforces Effect-TS patterns for services, errors, layers, and atoms. Use when writing code with Effect.Service, Schema.TaggedError, Layer composition, or effect-atom React components.