Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/kyh/vibedgames/threejsnpx skills add kyh/vibedgames --skill threejsgit clone --depth 1 https://github.com/kyh/vibedgamesWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kyh/vibedgames/threejs)<a href="https://agentmods.dev/skills/kyh/vibedgames/threejs"><img src="https://agentmods.dev/badge/skills/kyh/vibedgames/threejs.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00280 | $0.03865 |
| Opus 5 | $0.00140 | $0.01932 |
| Sonnet 5 | $0.00056 | $0.00773 |
| Haiku 4.5 | $0.00028 | $0.00386 |
Grade A, and why
threejs scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 393 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Three.js
Build performant 3D browser apps and games with Three.js using modern ES module patterns (r150+). This file covers scene setup inline; physics, controllers, gameplay architecture, and deep topics live in references/.
Core principles:
- Scene Graph First: everything added to
scenerenders. UseGroupfor hierarchical transforms (parent transforms affect children). - Primitives as building blocks: built-in geometries (Box, Sphere, Torus) cover most simple cases.
- Animation as transformation: change position/rotation/scale over time in
renderer.setAnimationLoop. - Performance through simplicity: fewer objects, fewer draw calls, reusable geometries/materials.
- A scene is not a game: gameplay needs a fixed-timestep loop, a controller driven by input, collision, and a follow camera — see the Reference Files below before building one.
Prebuilt Modules — copy the hard parts, generate the rest
modules/ holds a small set of TypeScript files for the parts of a 3D game that are hard to get right and the same across games: framerate-independent smoothing + a deterministic PRNG (math.ts), Y-up orientation-frame helpers + a grounded character controller (character-movement.ts), and a Rapier kinematic character-collision resolver (kinematic-resolver.ts). Copy these into the project rather than re-deriving them — inverted axes, framerate-dependent smoothing, and mis-wired Rapier controllers are the classic ways this goes wrong.
Everything else — camera rigs, enemy waves, pathfinding, steering, minimaps, input schemes — is not prebuilt on purpose: it differs per game and is cheap to write, so generate it live against the references below. Read modules/summary.md before pulling anything in.
Reference Files
Scene setup is inline below. Read the relevant reference before working on that area:
| When you're working on... | Read first |
|---|---|
| Character locomotion / Rapier character collision / smoothing / seeded RNG | modules/summary.md |
| Turning a scene into a playable game (fixed-timestep loop, structure) | references/gameplay-systems.md |
| Physics or collision (Rapier / cannon-es / arcade overlap) | references/physics.md |
| Movement controllers + follow/third-person camera | references/controllers-and-camera.md |
| Loading/caching/normalizing GLTF/GLB models | references/gltf-loading-guide.md |
| Game loop, state machine, object pooling, screen effects | references/game-patterns.md |
| Dropping generated GLB models / SFX into a running scene | references/generated-assets.md |
| Post-processing, shaders, instancing, env maps, color management | references/advanced-topics.md |
| Material values, shader injection (onBeforeCompile), sky, cheap tricks, z-fighting, shadow acne, texture shimmer | references/graphics-recipes.md |
| Black screen, low FPS, mobile issues, memory leaks, physics debugging | references/debugging-and-profiling.md |
| Auditing a scene you didn't write, visual-defect sweeps, React Three Fiber (R3F) | references/debugging-and-profiling.md |
What ships with it
14 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- modules/character-movement.ts 8.8 KB runs code
- modules/kinematic-resolver.ts 12 KB runs code
- modules/math.ts 2.5 KB runs code
- modules/summary.md 4.4 KB
- references/advanced-topics.md 13 KB
- references/controllers-and-camera.md 6.9 KB
- references/debugging-and-profiling.md 19 KB
- references/game-patterns.md 18 KB
- references/gameplay-systems.md 8.4 KB
- references/generated-assets.md 11 KB
- references/gltf-loading-guide.md 18 KB
- references/graphics-recipes.md 18 KB
- references/physics.md 6.5 KB
- scripts/check-canvas.mjs 12 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 393 lines · 280 tokens per session scan A 6bdb1659bc5c
threejs is a skill published in the GitHub repository kyh/vibedgames (55 stars, last pushed today), licensed MIT. It adds 280 tokens to every session and 3,865 once invoked, about $0.0014 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
trigger-config
Configure Trigger.dev projects with trigger.config.ts. Use when setting up build extensions for Prisma, Playwright, FFmpeg, Python, or customizing deployment settings.
emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
supabase
Use when doing ANY task involving Supabase: Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues, supabase-js, @supabase/ssr, RLS, schema migrations, CLI, MCP server. Includes security checklist.
react-three-fiber
Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusable abstractions. Ideal for product configurators, portfolios, games, data visualization, and…
framer-motion
Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".
p5js
Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project.