---

name: 3d-learning-game-threejs-skill description: Create per-project skills for Three.js canvas setup, TSL shader language, and HTML GUI overlays so the agent can one-shot educational 3D games.

3D Learning Game Skill For Three.js

What This Does

Google Antigravity walks through creating a nested .agents/skills folder with skill.md files for three.js canvas setup with resize and animation loops, TSL tiny shader language, and HTML GUI that sits above the canvas. Then a fresh chat asks for a 3D solar system learning game and the agent loads the right skills automatically.

What You Get

• Nested agent skills folder convention
• three.js canvas skill with resize and animation loop
• TSL tiny shader language reference skill
• HTML GUI overlay skill
• per-planet quiz and facts skill

Customize

• framework: Three.js version to target
• shader_style: TSL, GLSL, or none
• gui_position: overlay location
• game_topic: what educational subject
• interactivity: click-per-object quiz

Sample Output

The agent builds a 3D solar system where clicking a planet triggers a generated quiz and fact card, loading the canvas, shader, and GUI skills as it works.

Target Audience

Developers building interactive 3D educational apps in the browser

Source

https://youtube.com/watch?v=4mnP1lRdUm8