How do I install the Webgl Experience skill?

Run npx skillmds@latest add nexu-io/webgl-experience in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Webgl Experience safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Webgl Experience?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Webgl Experience free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Webgl Experience?

Nexu (@nexu-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Webgl Experience by nexu-io — Agent Skill

Name: Webgl Experience
Rating: 4.5 (4 reviews)
Author: Nexu

Webgl Experience

A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.

Nexu Updated Sep 9, 2026

File contents

WebGL Experience Skill

Produce a single self-contained index.html that renders a real-time WebGL (or WebGL2) visual full-screen, with a clean typographic overlay on top.

Why this is a powered artifact

OpenDesign detects getContext('webgl2') / new Worker / SharedArrayBuffer and renders this file in powered preview — a cross-origin-isolated iframe with allow-same-origin. That means real Web Workers, SharedArrayBuffer, WASM, and the full GPU pipeline are available. You do not need to work around the opaque sandbox. Prefer webgl2 for modern features; fall back to webgl when the effect allows.

Resource map

webgl-experience/
├── SKILL.md      ← you're reading this
└── example.html  ← a working WebGL2 aurora-field reference (READ FIRST)

Workflow

Step 0 — Read the reference

Read example.html end to end. Note the shape: one full-viewport <canvas>, a fragment-shader draw loop on a fullscreen triangle, a DPR-aware resize, and a requestAnimationFrame tick. The overlay (kicker → h1 → sub) is pure HTML/CSS layered above the canvas via z-index.

Step 1 — Choose the visual

Pick ONE technique that fits the brief:

Fragment-shader field (default): domain-warped fbm noise, flow fields, plasma, gradients. Cheapest, always 60fps.
Raymarched scene: SDF spheres/boxes with soft shadows for a 3D hero.
Instanced geometry: thousands of points/quads driven by a vertex shader.
Post-processed image: sample a data-URI texture and distort/dither it.

Step 2 — Build `index.html`

Keep it one file, zero external requests (inline the shader source; embed any texture as a data: URI). Powered mode allows CDN loads, but self-contained previews are faster and portable.
Always: alpha:false, DPR clamped to 2, viewport on resize, and a guard that shows a graceful message if the context is null.
Compile shaders with error logging (getShaderInfoLog) so a typo fails loudly, not silently black.

Step 3 — Overlay + brand

Map the two :root-level accent colors to the active DESIGN.md when one is present; otherwise use a restrained dark palette with a single vivid accent (the reference uses lime #63fe13).
Headline ≤ 14ch, one supporting line. Never cover the whole canvas — the visual is the hero.

Step 4 — Self-review (P0)

Renders continuously at ~60fps; the FPS badge updates.
No WebGL console errors; getError() clean after first frame.
Resizes crisply on window resize (no stretching / blur).
Readable overlay contrast over the brightest frame.
Degrades to a message (not a blank page) if webgl2 is unavailable.

---name: webgl-experiencedescription: A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.--- # WebGL Experience Skill Produce a single self-contained `index.html` that renders a real-time WebGL (or WebGL2) visual full-screen, with a clean typographic overlay on top. ## Why this is a powered artifact OpenDesign detects `getContext('webgl2')` / `new Worker` / `SharedArrayBuffer` and renders this file in **powered preview** — a cross-origin-isolated iframe with `allow-same-origin`. That means real Web Workers, `SharedArrayBuffer`, WASM, and the full GPU pipeline are available. You do **not** need to work around the opaque sandbox. Prefer `webgl2` for modern features; fall back to `webgl` when the effect allows. ## Resource map ``` webgl-experience/ ├── SKILL.md ← you're reading this └── example.html ← a working WebGL2 aurora-field reference (READ FIRST) ``` ## Workflow ### Step 0 — Read the reference Read `example.html` end to end. Note the shape: one full-viewport `<canvas>`, a fragment-shader draw loop on a fullscreen triangle, a DPR-aware resize, and a `requestAnimationFrame` tick. The overlay (`kicker` → `h1` → `sub`) is pure HTML/CSS layered above the canvas via `z-index`. ### Step 1 — Choose the visual Pick ONE technique that fits the brief: - **Fragment-shader field** (default): domain-warped fbm noise, flow fields, plasma, gradients. Cheapest, always 60fps. - **Raymarched scene**: SDF spheres/boxes with soft shadows for a 3D hero. - **Instanced geometry**: thousands of points/quads driven by a vertex shader. - **Post-processed image**: sample a data-URI texture and distort/dither it. ### Step 2 — Build `index.html` - Keep it **one file, zero external requests** (inline the shader source; embed any texture as a `data:` URI). Powered mode allows CDN loads, but self-contained previews are faster and portable. - Always: `alpha:false`, DPR clamped to 2, `viewport` on resize, and a guard that shows a graceful message if the context is null. - Compile shaders with error logging (`getShaderInfoLog`) so a typo fails loudly, not silently black. ### Step 3 — Overlay + brand - Map the two `:root`-level accent colors to the active DESIGN.md when one is present; otherwise use a restrained dark palette with a single vivid accent (the reference uses lime `#63fe13`). - Headline ≤ 14ch, one supporting line. Never cover the whole canvas — the visual is the hero. ### Step 4 — Self-review (P0) - [ ] Renders continuously at ~60fps; the FPS badge updates. - [ ] No WebGL console errors; `getError()` clean after first frame. - [ ] Resizes crisply on window resize (no stretching / blur). - [ ] Readable overlay contrast over the brightest frame. - [ ] Degrades to a message (not a blank page) if `webgl2` is unavailable.

Frequently asked questions