shader-dev

Trigger phrases

Phrases that activate this skill when typed to Claude Code:

• make a raymarched SDF scene
• I need a fluid simulation shader
• ShaderToy effect

What it does

shader-dev is the GLSL skill in MiniMax-AI’s skills repo — a single skill that bundles 36 ShaderToy-compatible techniques and a routing table that maps a user’s request to the right one. Ask for “a raymarched SDF scene with soft shadows” and the skill picks ray-marching + sdf-3d + lighting-model + shadow-techniques, then reads only those technique files. Ask for “fluid / smoke / ink” and it routes to fluid-simulation + multipass-buffer. The routing table is the wedge: instead of a 2,000-line monolith, it’s lazy reads of self-contained technique files.

Each technique ships in two layers. techniques/<name>.md is the implementation guide — core principles, complete copy-pasteable code template, common pitfalls. reference/<name>.md is the math derivation underneath (Cook-Torrance PBR derivation, FFT ocean math, Rayleigh/Mie scattering equations, Game-of-Life cellular automata rules). The skill reads from reference/ only when the user asks for a deeper explanation or hits a non-obvious bug.

A separate WebGL2 Adaptation Rules section converts ShaderToy’s environment (iTime, iResolution, mainImage) into a standalone HTML page that runs anywhere — useful when the user wants a deliverable they can drop on a static site, not a shadertoy.com link.

When to use it

• Building a creative-coding shader for ShaderToy — fractals, voxel scenes, fluid effects, procedural terrain, raymarched SDF compositions
• Generating a standalone WebGL2 HTML page with a GPU-driven visual (the skill ships the page scaffold)
• Adding post-processing (bloom, tone mapping, glitch, motion blur) over an existing render
• Lighting / shadow / AO work on raymarched geometry where the math gets non-trivial fast
• Multi-pass simulation work — Game of Life, reaction-diffusion, fluid solver, sand sim — where ping-pong buffers are the right primitive

When not to reach for it:

• Production game engine shaders (Unity HLSL, Unreal Material Graph) — the techniques are GLSL/ShaderToy-shaped
• Compute-shader work (CUDA, OpenCL, GPU compute) — the skill is fragment-shader-first
• 3D art pipelines that need DCC-tool integration (Blender, Houdini, Substance) rather than handwritten GLSL

Install

From MiniMax-AI/skills at skills/shader-dev/. Drop the folder into ~/.claude/skills/shader-dev/. The plugin marketplace install is claude plugin marketplace add https://github.com/MiniMax-AI/skills then claude plugin install minimax-skills — that pulls the whole MiniMax skill set, of which shader-dev is one.

What a session looks like

1. State the visual goal. “I want a raymarched scene of a glass torus on a checkerboard floor with soft shadows.”
2. Skill consults the routing table. Maps the request to ray-marching + sdf-3d + lighting-model + shadow-techniques, plus analytic-ray-tracing for the floor plane.
3. Read the technique files. Each file has a complete code template — sphere-tracing loop, SDF library, Phong/PBR lighting block, soft-shadow penumbra estimation. The agent assembles the fragment shader from those primitives.
4. WebGL2 adaptation if needed. The agent applies the adaptation rules (replace iTime / iResolution / mainImage with their WebGL2 equivalents) and emits a single HTML file with the canvas + shader inlined.
5. Reference dive on a hard step. If the lighting math doesn’t behave (Fresnel term wrong, wrong space for normals), the skill reads reference/lighting-model.md for the derivation rather than guessing.
6. Iterate visually. Operator runs the page, screenshots, asks the skill to adjust. Skill stays inside the technique boundaries — doesn’t reach for unrelated techniques unless the visual goal shifts.

The discipline that makes it work: the routing table forces a specific technique pick before any code lands. There’s no “general shader function” — every effect is one of the 36 named techniques, with the file-level boundary preventing the model from inventing GLSL idioms that drift from convention.

Receipts

TODO — to be filled in from a real session. Once the skill has been used to generate a shader end-to-end, this section will capture: which technique combination the routing table picked vs. what the visual goal actually needed, whether the WebGL2 adaptation produced a working standalone HTML page on first run, and the failure modes (most likely WebGL2 compile errors caught by the webgl-pitfalls technique, or missing RepaintBoundary-equivalent for multipass buffers).

Source and attribution

From MiniMax-AI’s skills repository, an MIT-licensed skill collection from the MiniMax open-source team.

License: MIT.

Quoting the routing-table premise verbatim: “Read the Technique Routing Table to identify which technique(s) match the user’s request — read only those files.” The lazy-read discipline is what keeps the skill usable at 36-technique scale; a flat dump of every technique into context would dwarf the actual shader the user wants.