build-game-camera-controls — Claude Code skill for Three.js cameras
A skill for building and tuning Three.js game cameras: isometric framing, follow, orbit limits, occlusion, lock-on, shake and touch gestures.
npx skills add MengTo/Skills --skill build-game-camera-controls -a claude-codeWhat build-game-camera-controls does
The skill sets an order for camera work in a Three.js game. Readable gameplay first, cinematic feel second: one authoritative target, camera bounds, zoom range, collision and occlusion policy, reduced-motion behavior.
Two instruction blocks sit inside. Implement asks you to smooth position and look-at targets separately and never bind the camera straight to jittery render state. Orbit, pitch and zoom get clamped, and walls or props must not hide the player without making geometry invisible globally. Lock-on, scripted moments and shake are treated as temporary modifiers layered over the base camera. On touch, camera gesture zones stay separate from movement and action controls, with a reset framing option.
Verify lists what to test: corners, tall props, tunnels, multiple enemies, lock-on switching, pause, reduced motion, portrait and landscape. It also says to confirm camera behavior does not break targeting, UI or performance. If your game already ties the camera directly to render state, that is a reason to rewrite the binding before you start tuning feel.
What it helps with
- smooth camera follow without jitter
- clamp orbit, pitch and zoom to sane limits
- keep walls and props from hiding the player
- layer lock-on and shake as temporary modifiers
- separate touch camera gestures from movement controls
Example prompts for the agent
- Set up an isometric camera for my Three.js game, keep the player in frame
- Add a follow camera with smoothing and zoom limits
- Check the camera in a tunnel and near tall props, the player should stay visible
How to install build-game-camera-controls
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill build-game-camera-controls -a claude-code2Manually: put the files in place
~/.claude/skills/build-game-camera-controls/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/build-game-camera-controls/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill build-game-camera-controls -a codex2Manually: put the files in place
.agents/skills/build-game-camera-controls/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill build-game-camera-controls -a cursor2Manually: put the files in place
.cursor/skills/build-game-camera-controls/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills build-game-camera-controls2Manually: put the files in place
.github/skills/build-game-camera-controls/SKILL.md1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill build-game-camera-controls -a gemini-cli2Platform CLI
gemini skills install https://github.com/MengTo/Skills --path agent-skills/game-development/build-game-camera-controlsManually: put the files in place
.devin/skills/build-game-camera-controls/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add MengTo/Skills --skill build-game-camera-controls -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about build-game-camera-controls
How do I install build-game-camera-controls in Claude?
Run npx skills add MengTo/Skills --skill build-game-camera-controls -a claude-code. The skill file then lives at ~/.claude/skills/build-game-camera-controls/SKILL.md.
What does build-game-camera-controls do?
It helps implement or tune a Three.js game camera: isometric framing, follow behavior, orbit and zoom limits, occlusion, lock-on, shake and touch controls.
What does the skill tell you to verify?
Corners, tall props, tunnels, multiple enemies, lock-on switching, pause, reduced motion and both screen orientations. It also asks you to confirm the camera does not break targeting, UI or performance.
Source text
SKILL.md · MIT
--- name: build-game-camera-controls description: Implement or tune Three.js game cameras. Use for isometric framing, follow behavior, orbit/zoom limits, occlusion, lock-on, camera shake, touch camera controls, and camera regression tests. --- # Build Game Camera Controls Keep gameplay readable before making the camera cinematic. Define one authoritative target, camera bounds, zoom range, collision/occlusion policy, and reduced-motion behavior. ## Implement - Smooth position and look-at targets independently; never bind the camera directly to jittery render state. - Preserve player, immediate threat, objective, and interaction cues in frame at the intended distance. - Clamp orbit, pitch, and zoom; prevent walls or props from hiding the player without making geometry invisible globally. - Treat lock-on, scripted moments, and shake as temporary modifiers layered over the base camera. - On touch, separate camera gesture zones from movement/action controls and provide reset framing. ## Verify Test corners, tall props, tunnels, multiple enemies, lock-on switching, pause, reduced motion, portrait, and landscape. Confirm no camera behavior breaks targeting, UI, or performance.
© MengTo · MIT · MengTo/Skills