skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

web-game-prototype

Build single-file HTML5 web games and verify them with headless and real-browser testing.

Updated Aug 21, 2026
Search Tags:#Playwright#three.js#headless testing#single-file HTML#web game#game prototype#webgl verification
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill web-game-prototype-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-game-prototype
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/web-game-prototype
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill web-game-prototype-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve? Turning a written game design spec into a working, self-contained web game often fails silently: the wrong camera perspective gets chosen, CDN dependencies break offline, and headless logic tests pass while the real game shows a blank screen. This Skill provides a disciplined workflow for building a single index.html game (vanilla JS, Canvas2D or Three.js) and proving it actually boots and renders. ## Core Features & Use Cases - Spec-driven single-file builds: Produces one self-contained index.html with locally vendored libraries (no CDN, no build step), honoring the platform/camera conventions implied by the spec (e.g., first-person 3D for a Roblox-era game). - Era/genre research: When the brief references an unverifiable original, it reconstructs era-accurate conventions via web research and labels reconstructions honestly (see references/era-research.md). - Two-stage verification: A Node headless harness (scripts/headless-harness.js) stubs the DOM and Three.js to exercise game logic, followed by mandatory real-browser verification (scripts/playwright-verify.js) that checks console errors and samples WebGL pixels to confirm the scene renders. - Use Case: A user pastes a design doc for a 2012-era Roblox zombie survival FPS and says "build it" — the Skill produces a first-person Three.js game with loot crates, weapons, and HUD, then verifies it boots with zero console errors and non-black rendered pixels. ## Quick Start Build a self-contained single-file web game from my design spec and verify it in a real browser using the web-game-prototype skill.

Frequently Asked Questions about web-game-prototype

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

FAQPage Schema
How do I build a single-file web game from a design spec?▼

Write the game as one self-contained index.html using vanilla JS with Canvas2D or Three.js, vendoring libraries locally instead of using CDNs. Match the camera and presentation implied by the spec, such as first-person 3D for a Roblox-era game, before writing any code.

How to verify a web game works without visual inspection?▼

Use a two-stage approach: a Node harness that stubs the DOM and Three.js to run update frames and assert mechanics, then a real-browser Playwright check that clicks the start overlay, confirms zero console errors, and samples WebGL pixels with readPixels to prove the scene renders.

Why does my headless game test pass but the game shows a blank screen?▼

A Node stub harness produces false passes because it cannot catch script parse errors, startup-path throws, or renders that draw nothing. Always run node --check on the extracted script and verify in a real browser with console error checks and pixel sampling.

Should I use Three.js or React Three Fiber for a browser game prototype?▼

Use vanilla Three.js in a single index.html when the deliverable must be self-contained with no build step. React Three Fiber with Rapier suits structured React projects; this Skill is the fallback when a vanilla single-file build is required.

Why does WebGL readPixels return all black in headless testing?▼

Headless browsers clear the drawing buffer after compositing, so readPixels reads black even when rendering works. Set preserveDrawingBuffer: true on the WebGLRenderer, or call renderer.render(scene, camera) synchronously before sampling.

Can a self-contained HTML game load libraries from a CDN?▼

No, CDN script tags break offline and prevent reliable headless verification. Download libraries locally with curl and reference them with relative paths so the artifact opens with no network connection.

Related Skills

Explore More Software Engineering Skills→
SummerEngineSummerEngine
66

brainstorming

Guides collaborative design dialogue to produce approved spec documents before implementation.

Official
Intermediate
JenilRevaliyaJenilRevaliya

game-design-expert

Design core gameplay loops, controls, game feel, and telemetry-driven balance for video games.

Community
Intermediate
TimelessPTimelessP
2

web-game-optimization

Optimize HTML5 canvas and WebGL games for performance, accessibility, and cross-device compatibility.

Community
Advanced
openaiopenai
5.3k

react-three-fiber-game

Build React-hosted 3D browser games using React Three Fiber and pmndrs libraries.

Official
Intermediate