# shader-dev

> A Claude Code skill from MiniMax-AI's skills repo that bundles 36 GLSL shader techniques — ray marching, SDFs, fluid simulation, particle systems, procedural noise, lighting, post-processing — behind a routing table that picks the right primitive for the visual effect a user describes.

**Use case**: Translate a visual-effect request into the right GLSL technique without rebuilding raymarching boilerplate every time

**Canonical URL**: https://agentcookbooks.com/skills/shader-dev/

**Topics**: claude-code, skills, design

**Trigger phrases**: "make a raymarched SDF scene", "I need a fluid simulation shader", "ShaderToy effect"

**Source**: [MiniMax-AI](https://github.com/MiniMax-AI/skills/tree/main/skills/shader-dev)

**License**: MIT

---

## What it does

`shader-dev` is the GLSL skill in [MiniMax-AI's skills repo](https://github.com/MiniMax-AI/skills) — 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](https://github.com/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](https://github.com/MiniMax-AI/skills/tree/main/skills/shader-dev), 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.