skills.rest
scomofo
scomofoCOMMUNITY
Explore all skills by this author →
GitHub

building-games

Build playable browser games with canvas, three.js, and React Three Fiber.

Updated Sep 17, 2026
Search Tags:#canvas#three.js#game loop#game physics#react three fiber#web audio#browser game
One-click install
npx skills add https://github.com/scomofo/midi-stage2 --skill building-games-scomofo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-games
Source: https://github.com/scomofo/midi-stage2/tree/main/.grok/skills/building-games
Command: npx skills add https://github.com/scomofo/midi-stage2 --skill building-games-scomofo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Generated browser games often ship broken: inverted steering controls, sideways 3D models, frame-rate-dependent movement, silent audio on mobile, and blank canvases in production builds. This Skill provides the correctness rules and per-genre playbooks needed to produce a playable, performant game in a TanStack Start + React app. ## Core Features & Use Cases - Game loop and timing correctness: delta-time scaling, fixed-timestep physics with accumulators, and delta capping so gameplay is frame-rate independent. - 3D orientation and camera conventions: right-handed +Y-up rules, mesh-faces-+Z vs camera-looks-−Z guidance, and camera/movement agreement checks that prevent the classic backwards or sideways bugs. - Performance, assets, audio, and save: draw-call budgets, GPU resource disposal, object pooling, Web Audio unlock on first gesture, localStorage saves with migrations, and game-feel juice. - Per-genre playbooks and engine references: FPS, platformer, racing, match-3/tetris, voxel, tower defense, and more, plus deep references for three.js/R3F/rapier, Babylon.js, Phaser, ECS, AI pathfinding, and collision physics. - Use Case: Ask for a 3D racing game and get an R3F route with a Rapier character controller, correct A/D steering signs verified by a self-test, instanced track props, mobile touch controls, and a production build that renders. ## Quick Start Build a 2D platformer game with keyboard and touch controls using the building-games skill.

Frequently Asked Questions about building-games

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

FAQPage Schema
How do I build a 3D browser game with React Three Fiber?▼

Create a route with a <Canvas> component, use useFrame as the game loop with delta-time scaling, and add drei helpers like PointerLockControls and useKeyboardControls. Install three, @react-three/fiber, @react-three/drei, and @react-three/rapier since they are not preinstalled.

Why are my A and D steering controls inverted in my vehicle game?▼

Inverted steering happens when KeyA maps to a negative steer value combined with a positive yaw rate. With the chase-camera basis forward = (-sin(yaw), 0, -cos(yaw)), KeyA must set steer to +1 so yaw increases and the vehicle turns left.

Should I use three.js, Babylon.js, or Phaser for a browser game?▼

Use three.js via React Three Fiber for 3D games inside a React app, Babylon.js when you want an integrated engine with built-in physics and GUI, and Phaser or native Canvas 2D for 2D games like snake, tetris, or platformers.

Why is there no sound in my browser game on iOS?▼

Browsers block audio until a user gesture, so an AudioContext created on page load stays suspended. Create or resume the context synchronously inside the first click, touch, or keydown handler, and re-resume on visibilitychange.

How do I prevent fast objects from passing through walls?▼

Tunneling occurs when an object moves farther than a wall's thickness in one frame. Use swept AABB collision, raycasts for projectiles, substepping, or enable CCD on fast Rapier bodies, and always run physics on a fixed timestep.

Can I use generated images as 3D models or FPS viewmodels?▼

No. Generated images are flat, lack alpha in JPG format, and cannot animate, so they render as black boxes when used as meshes. Build interactive 3D elements from real geometry or glTF, and reserve image generation for 2D textures, sprites, and UI art.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

react-three-fiber-game

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

Official
Intermediate
llm011llm011
9

vercel-deploy

Deploy static websites and web applications to Vercel non-interactively.

Official
Intermediate
camillanapolescamillanapoles

game-asset-generation

Generate 2D game art assets via each::sense with consistent styling.

Community
Advanced
SummerEngineSummerEngine
66

peer-to-peer-multiplayer

Builds peer-to-peer multiplayer architecture with host-authoritative state in Summer Engine games.

Official
Advanced