skills.rest
AmirEmad11
AmirEmad11COMMUNITY
Explore all skills by this author →
GitHub

gamestack-js

Guides building 2D and 3D games with React Three Fiber, covering controls, physics, and textures.

Updated Apr 20, 2026
Search Tags:#game development#javascript#collision detection#drei#3d games#react three fiber#keyboard controls
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill gamestack-js-amiremad11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gamestack-js
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/gamestack-js
Command: npx skills add https://github.com/AmirEmad11/instabot --skill gamestack-js-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building browser-based 2D/3D games with React Three Fiber involves many pitfalls: broken keyboard controls, incorrect camera setup, missing textures, and physics bugs. This Skill provides a consistent set of guidelines so generated games work correctly on the first attempt. ## Core Features & Use Cases - Structured Game Setup: Enforces a baseline scene with camera, lighting, terrain plane, and simple AABB collision instead of over-engineered physics. - Keyboard Controls via DREI: Provides ready-to-use KeyboardControls patterns for both reactive UI updates and game-loop usage without re-renders. - Asset Discipline: Restricts textures to the existing client/public/textures folder and provided sound files, preventing broken references to non-existent assets. - Use Case: Ask the AI to build a simple 3D driving or shooter game; the Skill ensures movement direction, camera framing, UI readability, and collision behavior all work correctly. ## Quick Start Build a simple 3D game with React Three Fiber where a player character moves with WASD keys on a flat terrain.

Frequently Asked Questions about gamestack-js

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

FAQPage Schema
How do I add keyboard controls to a React Three Fiber game?▼

Use DREI's KeyboardControls component with a key map defining actions like forward, back, left, right, and jump. Inside components, call useKeyboardControls to read state reactively or subscribe within useFrame for game-loop movement without re-renders.

How to implement collision detection in a React Three Fiber game?▼

Start with basic AABB (Axis-Aligned Bounding Box) collision using simple box geometries for all collidable objects. Keep collision response minimal and avoid full physics libraries like Cannon or Rapier unless explicitly required.

Can I use Cannon or Rapier physics with this game stack?▼

No, physics libraries like Cannon or Rapier should not be used unless mentioned by name in the requirements. The guidelines favor a simplified movement system handling only basics, skipping air resistance and input buffering.

Why does my React Three Fiber texture fail to load?▼

Texture loading fails when referencing files that do not exist in client/public/textures. Only use textures already present in that folder via useTexture, and search existing textures before generating new ones.

Why does my game flicker or crash when using Math.random in JSX?▼

Calling Math.random directly in JSX or render methods causes inconsistent values on every re-render. Pre-calculate random values outside render and manage them with useState, useEffect, or useMemo hooks.

Related Skills

Explore More Software Engineering Skills→
nicolas-riccnicolas-ricc

r3f-textures

Load and configure textures in React Three Fiber projects.

Community
Intermediate
hiktan44hiktan44

Game Designer

Designs game systems and documents them as Game Design Documents.

Community
Advanced
DRincs-ProductionsDRincs-Productions
145

pixi-vn-sound

Controls music, sound effects, and voice playback through Tone.js audio channels in Pixi'VN games.

Official
Intermediate
Helcio-NogueiraHelcio-Nogueira

game-development

Routes game development tasks to platform-specific guidance covering engines, patterns, and optimization.

Community
Intermediate