How to use the WebGL 3D Object agent skill

What the skill makes the agent do

When the skill is active, the agent writes the HTML, CSS and JavaScript for a single 3D object drawn on a canvas. The skill's rules call for real geometry such as IcosahedronGeometry, DodecahedronGeometry, BoxGeometry, custom BufferGeometry or a glTF mesh, viewed through a perspective camera.

The object is lit with PBR material (MeshStandardMaterial or MeshPhysicalMaterial), at least one directional light, and ambient or hemisphere fill. It moves only through transforms: subtle rotation, gentle floating and optional parallax. The generated code also handles resizing and disposes of geometry, material and renderer on teardown.

• Real geometry, lighting, highlights and edges instead of flat gradients or SVG illusions
• Tunable metalness, roughness and emissive values to match a brand mood
• Reduced-motion handling: a still frame or direct interaction only
• Cleanup code that removes event listeners, animation frames and GPU resources

Install the webgl-3d-object skill

Download the ZIP for this skill from this page and unzip it. The skill folder contains SKILL.md, which holds the instructions, plus a demo folder with index.html, PROMPT.md and source.json.

For a personal install, place the unzipped skill folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Single project: the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload

Requirements before you start

The output is not a file you drop onto a page unchanged. The skill's code imports the Three.js library as 'three', so your project must have Three.js installed and integrated with your bundler or import setup.

The target page needs a canvas element and a browser that supports WebGL. The skill's HTML uses a wrapper div with the class webgl-object-shell and a canvas with the class webgl-object-canvas and the attribute data-webgl-3d-object.

You also need a coding environment where the agent can write HTML, CSS and JavaScript.

• Three.js library, imported as 'three'
• A page with a canvas element and WebGL support in the browser
• A coding environment the agent can write files into

Trigger the skill with a natural request

Name the skill with $webgl-3d-object or describe the need in plain language. The skill's description matches requests for a faceted 3D hero object or a product-like visual with real lighting, as opposed to CSS transform effects.

Good requests say where the object goes, what it should look like and what the mood is. Mention the brand colour and whether it should be metallic, ceramic or glowing. Say if the object must sit beside foreground copy or calls to action, so the agent keeps it secondary.

• Use $webgl-3d-object to build a faceted gem-like hero object for our landing page, in a cool blue with a brand-tinted rim light.
• Use $webgl-3d-object to make a metallic product-style 3D element beside the pricing headline, with subtle floating and reduced-motion support.

Tune material, light and motion

The skill gives starting ranges you can ask the agent to apply. Premium metal uses metalness between 0.45 and 0.7 with roughness between 0.25 and 0.45. Soft ceramic uses metalness between 0.0 and 0.15 with roughness between 0.38 and 0.62. A glow-tinted tech object uses low emissive with emissiveIntensity between 0.12 and 0.35.

For faceted objects set flatShading to true. For a smooth product object set it to false. Keep ambient fill low so shadows stay visible, and use a cool rim light from behind to reveal edges.

Floating should move the object between 0.04 and 0.12 units on the Y axis. Keep rotation slow and secondary to the page content.

• Metal: metalness 0.45 to 0.7, roughness 0.25 to 0.45
• Ceramic: metalness 0.0 to 0.15, roughness 0.38 to 0.62
• Floating: 0.04 to 0.12 units on Y

Check the result

Run the page and compare it to the checklist in the skill. The object should show visible form, edges, highlights and shadows. Resize the browser window and confirm the object does not stretch. Turn on the operating system's reduced-motion setting and confirm the motion stops.

Check that the code removes its listeners, cancels the animation frame and disposes of the renderer when the cleanup function runs.

• Visible form, edges, highlights and shadows
• Camera is perspective
• Resizing does not stretch the object
• Reduced-motion preference respected
• Cleanup runs on teardown