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

browser-game-r3f

Build browser mini-games with React Three Fiber and Rapier physics.

Updated Aug 21, 2026
Search Tags:#game development#vite#three.js#react-three-fiber#rapier#browser games#pnpm monorepo
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill browser-game-r3f-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-game-r3f
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/software-development/browser-game-r3f
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill browser-game-r3f-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/rapier, vite, framer-motion, tailwindcss, esbuild, and includes references (resource) components.

What problem does it solve? Building browser-based 3D and 2D mini-games involves tricky scaffolding (pnpm monorepos, Vite, physics integration) and environment pitfalls (headless WebGL failures, Windows dev-server lockups) that repeatedly derail development. This Skill provides proven patterns, working code, and a verification workflow for shipping games with React Three Fiber and Rapier. ## Core Features & Use Cases - Monorepo Scaffolding: pnpm workspace layout with a hub launcher shell, per-game packages, and shared utilities (InputManager, AudioSynth, SeededRandom), including the critical pnpm filter-name and packageManager gotchas. - R3F + Rapier Game Patterns: Character controllers, kinematic moving platforms, collision handling via userData, and physics setup with correct frameloop configuration. - Headless QA Workflow: A substitute verification stack (per-game tsc, vite build route-wiring checks, esbuild-bundled Node unit tests) for environments where Playwright's software GL loses the WebGL context. - Use Case: Build a game arcade hub with a platformer, a maze game, and an idle game, each lazy-loaded as a route, with procedural audio, deterministic maze generation, and a verified production build. ## Quick Start Use the browser-game-r3f skill to scaffold a pnpm monorepo game arcade with an R3F platformer using Rapier physics and wire it into the hub launcher.

Frequently Asked Questions about browser-game-r3f

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

FAQPage Schema
How do I build a browser game with React Three Fiber and Rapier physics?▼

Set up a Canvas with frameloop="always", wrap the scene in a Physics component with gravity, and use RigidBody components for colliders. A character controller applies horizontal velocity from input and jump impulses when grounded, with lockRotations to prevent tumbling.

How to structure a pnpm monorepo for multiple browser games?▼

Use pnpm workspaces with a hub launcher package, one folder per game under games/, and a shared package for utilities like InputManager and AudioSynth. Root scripts must use pnpm --filter with the package.json name field, not the directory name.

Why does pnpm --filter fail with no projects matched?▼

The --filter flag matches the name field in the target package's package.json, not its directory name. If the hub lives in ./hub/ but is named blockverse-arcade-hub, you must run pnpm --filter blockverse-arcade-hub dev.

Can I playtest WebGL games in headless Playwright?▼

No. Playwright's bundled Chromium uses SwiftShader software GL, which loses the WebGL context after about 10 frames, silently freezing useFrame. Verify instead with per-game tsc --noEmit, a hub vite build, and esbuild-bundled Node unit tests, then delegate real-GPU playtesting to the user.

Why does my Rapier character controller crash on the first frame in React?▼

React StrictMode double-mounts in dev, so a KinematicCharacterController created in useMemo gets freed by cleanup and reused after being freed. Hold the controller in a useRef, create it in useEffect, and remove it only on true unmount.

How do I free a directory locked by a lingering Vite dev server on Windows?▼

Find the holding processes with WMIC by matching the project path in CommandLine, then kill them with taskkill /PID <pid> /F /T using single slashes, since MSYS mangles double slashes. Kill both the vite and esbuild service PIDs before running rm -rf.

Related Skills

Explore More Software Engineering Skills→
Nice-Wolf-StudioNice-Wolf-Studio
24

unity-game-loop

Generate Unity game loop architectures with ScriptableObject-driven phase and difficulty configuration.

Official
Advanced
dgkngkdgkngk

game-design

Guide game design with core loops, GDD structure, and progression systems.

Community
Intermediate
ntuan2502ntuan2502

ui-ux-pro-max-skill

Implement premium UI patterns with Tailwind CSS and Framer Motion.

Community
Advanced
519lab519lab
2

p5js

Generate interactive and generative art with p5.js.

Official
Advanced