skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-qa-release

Verify and release Three.js browser games with automated QA, canvas inspection, and production build checks.

1|Updated Aug 20, 2023
Search Tags:#playwright#visual regression#webgl#game release#threejs#qa testing#canvas inspection
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-qa-release-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-qa-release
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/threejs-qa-release
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-qa-release-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, pngjs, and includes scripts (resource) and references (resource) components.

What problem does it solve? Shipping a Three.js browser game without structured QA leads to blank canvases, broken mobile controls, untested production builds, and debug UI leaking to players. This Skill enforces a repeatable playtest, visual verification, and release workflow so games are proven playable and shippable before deployment. ## Core Features & Use Cases - Automated Canvas Inspection: A bundled Playwright script captures desktop and mobile screenshots, samples canvas pixels for nonblank output, computes color entropy and edge density metrics, and checks render budgets against tier limits. - Structured QA Checklists: Reference checklists cover playtest QA, visual verification, mobile/responsive checks, bot playtests, visual regression harnesses, and production release gates. - Bot Playtesting: Scripted input runs measure objective progression, input responsiveness, softlock windows, and fail/retry paths to prove the game actually plays. - Use Case: Before publishing a Three.js endless runner to GitHub Pages, run the full workflow to verify the production build under the correct base path, capture desktop and mobile active-play screenshots, run the bot playtest for gameplay metrics, and produce a release risk report. ## Quick Start Ask the AI to use the threejs-qa-release skill to run full QA and prepare this Three.js game for release on a static host.

Frequently Asked Questions about threejs-qa-release

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I QA test a Three.js browser game before release?▼

Run the structured QA workflow: build the project, start a dev or preview server, capture console and page errors, verify nonblank canvas pixels, take desktop and mobile screenshots, and exercise the main input, objective, and fail/retry paths. The bundled inspector script automates canvas measurement.

How to verify a WebGL canvas is rendering correctly with Playwright?▼

Use the inspect-threejs-canvas.mjs script, which screenshots the canvas, samples pixels for variance and alpha coverage, and computes metrics like color entropy, edge density, and luminance contrast. It exits nonzero on blank canvases or console errors.

Why are Playwright headless FPS numbers wrong for WebGL games?▼

Playwright's default headless shell lacks a GPU backend and falls back to SwiftShader software rendering, making FPS readings invalid. Launch with channel 'chromium' for real GPU rendering, and check the gpu block in the inspector report for softwareRendered flags.

Can I automate gameplay testing for a Three.js game?▼

Yes, bot playtests drive the game with scripted input through Playwright and measure frames advanced, distance travelled, score progression, and softlock windows. The game must expose __THREE_GAME_TEST_HOOKS__ with seed and setState functions for reproducible runs.

When should I add visual regression testing to a Three.js game?▼

Add screenshot baselines when the game targets premium or release-ready quality, has regressed UI layouts, or must prove generated assets appear in gameplay. Skip them for exploratory prototypes or non-deterministic scenes, but always record the skip reason.

What release checks does a Three.js game need before static hosting deployment?▼

Verify the production build passes, preview the built output, confirm the Vite base path matches the host, gate debug UI and test hooks, review bundle size and large assets, and ensure no API keys appear in client code or built files.

Related Skills

Explore More Software Engineering Skills→
OpusGameLabsOpusGameLabs
307

game-qa

Automate visual regression, gameplay verification, and performance testing for browser games.

Official
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
openaiopenai
5.3k

game-playtest

Test browser games through automated playtests, screenshot review, and structured issue reporting.

Official
Intermediate
bmad-code-orgbmad-code-org
212

gds-test-framework

Scaffold engine-specific test directories, configs, and sample tests for Unity, Unreal, or Godot.

Official
Intermediate