How to use the WebGL Experience Builder agent skill

What is an agent skill and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md file and any reference files. When you ask an AI agent for something that matches the skill's description, the agent reads those instructions and follows them. This skill covers full-screen, real-time WebGL and WebGL2 experiences such as animated shaders, 3D scenes, generative visuals and particle fields.

The output is a single self-contained index.html file. It draws the visual on the GPU, keeps the page free of external requests, and places a typographic overlay above the canvas. The result is a page you open in a browser, not a static image.

• Picks one visual technique: a fragment-shader field, a raymarched 3D scene, instanced geometry, or a post-processed image.
• Starts from example.html, a working WebGL2 aurora-field reference the agent is told to read first.
• Keeps the headline to 14 characters per line or fewer and one supporting line, so the visual stays the hero.
• Checks the result against a list: continuous animation, no WebGL console errors, crisp resizing, readable overlay contrast, and a fallback message if WebGL2 is unavailable.

How do you install the webgl-experience skill?

Download the ZIP for design-templates/webgl-experience from the project page and unzip it. The folder should contain SKILL.md and example.html. Then choose one of the following places for it.

For a personal skill available in all your projects, unzip the folder into ~/.claude/skills/. For a skill that only applies to one project, unzip it into that project's .claude/skills/ folder. In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/webgl-experience/
• Project only: .claude/skills/webgl-experience/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a natural request?

You do not need to name the skill. The agent matches your request against the skill's description and trigger words. Trigger words listed in the skill include webgl, webgl2, shader, 3d scene, generative art, gpu, raymarch, particle field, interactive canvas, and the Chinese term 着色器. The description also responds to phrases such as hero animation and real-time visual.

Be specific about the feel, the palette and the text you want on top. Mention the word WebGL or shader if you want this skill rather than a plain CSS animation.

What are some example requests?

These prompts use the trigger words from the skill. Adjust the wording and the content to suit your page.

• Make an animated WebGL hero for a coffee roastery. Headline: Roasted slowly. Dark background with a warm amber accent.
• Build a shader background for my landing page with slow flowing plasma, and a short line of text saying Ship calmer releases.
• Create a generative art page with a 3D particle field that reacts to the mouse. Keep the text minimal.
• I need a real-time visual for a music festival homepage using a raymarched scene. Headline under 14 characters per line.

What do you need before you start?

You need a modern web browser with WebGL2 support to view the output. The skill's description says the OpenDesign app is the intended way to run it, because its powered-preview mode is designed for this kind of page. The skill does not run scripts and does not use the network, so it has no install step beyond copying the files.

• A modern web browser with WebGL2 support, to view the result
• The OpenDesign app, described as the intended way to run the skill's powered preview
• No scripts are run by the skill
• No network use by the skill

What safety points should you know about?

The skill runs no scripts and makes no network calls, according to its own description. The generated index.html is designed to need zero external requests, with shader source inlined and any texture embedded as a data URI. Review the generated file as you would any HTML you did not write before publishing it.

Full-screen GPU animation can drain battery and run slowly on older or low-power devices. Motion-heavy pages can also be hard for some people to read, so do not rely on the visual alone to carry the message.

• Runs scripts: no
• Uses network: no
• Generated page is one file with no external requests by design
• Heavy GPU animation may drain battery on low-power devices

What tips get better results?

Ask for one technique and one palette. The skill is designed to pick one visual approach that fits the brief, so naming a feel helps it choose well. If you have a design system file (DESIGN.md), the skill maps its accent colors onto the overlay. Otherwise it uses a restrained dark palette with one vivid accent.

Test the output in a browser and check the frame rate, the resize behaviour and the text contrast over the brightest frames. Use the checklist in the skill as your review.

• Name the feel: calm, glitchy, 3D, particle, or generative.
• Keep your headline short; the skill targets 14 characters per line.
• If you plan to refine the code later, ask for a clean single file so it is easy to port.
• Check the page on a laptop and a phone before you ship.