Ctrl K

Quick Ref / Command

Engineer Kit

/ak:threejs

Three.js 3D scenes

Builds Three.js WebGL/WebGPU scenes with models, animation, physics, XR, particles, shaders, optimization, 556 searchable examples, 60 API classes, and 20 use-case templates.

Scope browser 3D

Search packaged references

Select reference level

Build minimum scene

Rule 01

Start from searchable examples and progressive references before inventing scene architecture

Rule 02

Scene, camera, renderer, canvas attachment, lighting, and loop are the minimal spine

Rule 03

Use GLTF/PBR/textures/EnvMaps and correct loaders for production model workflows

Rule 04

Optimize with instancing, LOD, batching, geometry, materials, textures, shaders, and WebGPU only after the scene behavior is clear

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

Start

Input, scope, route

1 Scope browser 3D Confirm the request is a 3D scene, game, visualization, model loader, animation, physics, XR, particle effect, shader, or rendering-performance task.
2 Search packaged references Use `python3 scripts/search.py` across examples, API, use-cases, or categories to find relevant patterns before inventing scene architecture.

Work

Agent / skill execution

3 Select reference level Load fundamentals first, then loaders, textures, cameras, lights, animations, geometry, materials, interaction, controls, performance, shaders, physics, XR, or WebGPU as needed.
4 Build minimum scene Create scene, camera, renderer, canvas attachment, pixel ratio, lighting, model loading when needed, and an animation loop before adding effects.

Verify

Gate, review, validation

5 Add content and interaction Add GLTF/FBX/OBJ assets, textures, PBR materials, controls, raycasting, postprocessing, AnimationMixer, physics, XR, or WebGPU systems.
6 Optimize from references Use performance references for instancing, LOD, batching, geometry, material, texture, shader, and WebGPU compute choices.

Report, handoff, artifact

7 Verify runtime behavior Check camera framing, controls, asset loading, animation loop stability, resize behavior, WebXR/WebGPU support, and fallback states.
8 Point to live resources Use official Three.js docs, examples, editor, or community resources when current API details are needed beyond packaged guidance.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:threejs [3D scene or feature]

Arguments

[3D scene or feature] Required

3D scene or feature

Natural-language Three.js task covering the framework and version, target browsers or devices, WebGL/WebGPU fallback policy, canvas size, interaction model, asset formats, performance budget, accessibility alternatives, and expected runtime evidence. The Skill has no documented top-level modes.

/ak:threejs "Add an accessible GLTF product viewer with OrbitControls, loading and error states, WebGL fallback, keyboard alternatives, disposal on unmount, and a 60 fps target on mid-range mobile"

Shared options

--domain examples|api|use-cases|categories

Search domain

Limit the packaged search helper to examples, API summaries, use-case recommendations, or categories. It searches local CSV indexes and does not fetch live example source.

/ak:threejs "Search camera --domain api before adding a PerspectiveCamera walkthrough"

--use-case

Use-case lookup

Resolve one packaged use-case row to recommended examples. This is reference discovery only, not implementation or source download.

/ak:threejs "Find product configurator references --use-case before implementation"

--category <name>

Example category

Filter packaged examples by category such as webgpu, webxr, physics, or webgl postprocessing.

/ak:threejs "List WebGPU particle patterns --category webgpu -n 10"

--complexity low|medium|high

Complexity filter

Filter packaged examples by the bundled complexity label. The label is guidance, not a measured runtime cost.

/ak:threejs "Find high-complexity architectural visualization examples --complexity high"

-n <max_results>

Result count

Change how many packaged search matches are returned by the local helper.

/ak:threejs "Find webgl postprocessing depth of field examples -n 10"

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Accessible product viewer Recommended

/ak:threejs accessible GLTF product viewer with OrbitControls, PBR lighting, loading and error states, and WebGL fallback

Use when:: Use when a commerce or demo page needs a browser 3D model viewer with clear loading, controls, and fallback behavior.
Expected:: Searches packaged product-configurator and loader references, then maps scene, camera, renderer, GLTFLoader, PBR materials, controls, fallback, and verification steps.

WebGPU particles

/ak:threejs particle compute WebGPU visualization for a large point cloud

Use when:: Use when large point sets or effects need Three.js particle patterns, compute-oriented references, or GPU-friendly rendering.
Expected:: Uses example/category search for particles and WebGPU, then selects BufferGeometry, shader, compute, fallback, and performance patterns appropriate to the installed runtime.

XR scene with physics

/ak:threejs WebXR room walkthrough with physics collisions and controller interactions

Use when:: Use when a VR or AR browser scene needs immersive movement, collisions, controller input, or capability fallback.
Expected:: Loads physics and WebXR references, then outlines assets, lights, controls, collision boundaries, browser support checks, fallback states, and runtime verification evidence.

API/example search

/ak:threejs search PerspectiveCamera API and webgl postprocessing examples for depth of field

Use when:: Use when you need local packaged Three.js examples, API summaries, categories, or use-case recommendations before coding.
Expected:: Runs the local search workflow conceptually across examples, API, use-cases, or categories, then reports the closest packaged references and how to adapt them.

Handled Scope

WebGL and WebGPU scenes
GLTF, FBX, and OBJ model loading
PBR materials, textures, lights, and shadows
AnimationMixer, controls, raycasting, and postprocessing
Physics and WebXR experiences
Particles, custom GLSL shaders, and render performance