83.3K+Download
Skip to the usage guide
shader-devby MiniMax

Shader Dev Skill.

A Claude Code and Codex skill for image work: gLSL shaders: ray marching, SDFs, fluids, particles, procedural visuals.

  • Images & Generative Art
  • Generative art
Download OpenDesignView usage guide
MiniMax-AI/skills · skills/shader-dev/SKILL.mdSKILL.md
--- name: shader-dev description: Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more. --- ## Invocation ## Skill Structure ## How to Use ## Technique Routing Table ## Technique Index ## WebGL2 Adaptation Rules
Front matter and section headings read from the upstream file on 2026-09-14 · 16,663 characters in full

01 What it does

What the shader-dev Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A single GLSL skill bundling 36 ShaderToy-compatible shader techniques for real-time visual effects: SDF geometry, ray marching and lighting, fluid, particle and physics simulation, natural phenomena (ocean, terrain, atmosphere, volumetric), procedural generation, post-processing, audio, and WebGL2 debugging.

A routing table maps each request to technique files under techniques/ holding core principles, implementation steps and complete code templates, with deeper math in reference/. It then applies WebGL2 adaptation rules when producing standalone HTML pages — gl_FragCoord.xy instead of fragCoord, a void main() wrapper for mainImage, const in place of function-call macros — inside a fixed performance budget, with quick recipes and visual debugging swaps.

What it produces

  • ShaderToy-compatible GLSL for one of 36 effect techniques, usable as the basis of a real-time visual.
  • A standalone HTML page whose canvas fills the viewport, resizes with the window, sits on a black background with no scrollbars, and exposes ShaderToy-compatible uniforms iTime, iResolution, iMouse and iFrame.
  • Multi-pass effects built on WebGL2 framebuffers with ping-pong buffers for Buffer A/B style state.
  • A finished post chain such as ACES tone mapping combined with 2x SSAA and vignette for photorealistic scenes.
See the example prompt ↗

How It Works

  1. 01
    Route the Request to a Technique

    The agent matches the user's wording against the technique routing table to pick one primary technique plus combinable ones, rather than reading all 36 files.

  2. 02
    Read the Technique File

    Each file under techniques/ is self-contained, supplying principles, ordered implementation steps and a full code template for the effect.

  3. 03
    Escalate to Reference/ for Math

    When derivations or advanced patterns are needed, the agent follows the link at the end of the technique file into the matching reference/ guide.

  4. 04
    Port ShaderToy Output to WebGL2

    For standalone HTML deliverables the WebGL2 adaptation rules are applied on top of the ShaderToy-style code before the page is written.

  5. 05
    Assemble Recipes into a Pipeline

    Quick recipes chain modules — geometry, rendering, lighting, atmosphere, post — into a complete pipeline instead of a single effect.

  6. 06
    Debug by Swapping the Output

    Output is temporarily replaced with normals, step counts, depth or SDF bands to pinpoint a fault before restoring the real color.

02 Find your fit

When to Use the shader-dev Skill

Use the shader-dev skill in Claude Code or Codex when the job is image work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Modeling 3D objects and scenes purely from math, where signed distance fields drive implicit surfaces rather than loaded meshes.
  • Fluid, smoke and ink looks that need a real solver with advection, diffusion and pressure projection across ping-pong buffers.
  • Sky and atmosphere shots needing Rayleigh/Mie scattering, god rays or a subsurface-scattering approximation.
  • Procedural audio baked into the shader itself, from oscillators and envelopes through filters to FM synthesis.
  • Stylized 2D work built on polar remapping, kaleidoscope folding and spiral coordinate systems.

Know the Boundaries

  • Not for unconstrained GPU budgets: the target environment may be headless software rendering, so iteration counts must stay low.
  • Macros are not a safe way to set loop bounds — runtime constants are expected in loops on some ES versions.
  • Terrain helpers take only XZ coordinates, so a full vec3 position must be swizzled before being passed in.

What to Provide

  • A plain-language effect requestThe skill is invoked as /shader-dev <request>, with the request text landing in $ARGUMENTS; phrasing it in effect terms lets the routing table match it.
  • The effect category, in the table's vocabularyThe routing table is keyed on intents like fluid/smoke/ink effects, mapping each to a primary technique and the techniques to combine it with.

03 Inside the skill

Rules the shader-dev Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Emit WebGL2 Shader Headers

    Every generated shader opens with #version 300 es, the fragment shader adds precision highp float; and declares out vec4 fragColor, with varying converted to in/out.

  2. Use gl_FragCoord.xy, Never fragCoord

    ShaderToy's fragCoord does not exist in WebGL2, so coordinate math must read gl_FragCoord.xy or the shader will not compile.

  3. Wrap mainImage in a Real Main()

    ShaderToy templates keep void mainImage(out vec4 fragColor, in vec2 fragCoord) and a standard void main() calls it with the real fragment coordinates.

  4. Declare Callees Before Callers

    GLSL has no forward declarations, so a function such as getSunDirection() must be defined above getAtmosphere() that calls it, or the code must be reordered.

  5. Never Put Function Calls in #define

    A macro such as #define SUN_DIR normalize(vec3(...)) is invalid; replace it with a const holding a pre-computed normalized value.

  6. Avoid GLSL Reserved Words as Names

    Identifiers including patch, cast, sample, filter, input, output, common, partition and active are reserved and must not be used for variables.

  7. Declare JS State at the Top

    In the HTML page, let/const variables go at the top of the script block before any function that references them, otherwise the Temporal Dead Zone throws and the canvas stays white.

  8. Stay Inside the Performance Budget

    The ray marching main loop is capped at 128 steps, volume sampling and lighting inner loops at 32, and FBM at 6 octaves, because deployment may use limited headless software rendering.

04 Put it to work

Install shader-dev in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add shader-dev to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev

Generic skills CLI form for skills/shader-dev/SKILL.md; the repository may document its own path.

Give the Skill a First Image Work Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt
create a raymarched SDF scene with soft shadows

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Check that every call matches its definition, including parameter count and types — a float fbm(vec3 p) cannot receive a vec2 uv.
  • Enforce strict type matching: scalars need explicit constructors, and a vec2 cannot be read with .z.
  • Rewrite any ternary that selects between struct values as if/else, which ESSL does not permit.
  • Count nested loop iterations per pixel against the 1000-iteration ceiling, which freezes the browser when exceeded.
  • Visualize normals as col = nor * 0.5 + 0.5 and look for banding, which means the epsilon is too large.
  • If a uniform location comes back null, the compiler optimized the uniform away — use it in a way that cannot be removed.

In OpenDesign shader-dev is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
MiniMax
Repository
github.com/MiniMax-AI/skills Branch main
Skill file
skills/shader-dev/SKILL.md Content checksum recorded at verification; commit 60aaae5
License
MIT From LICENSE; SKILL.md says “MIT”.
Repository stars
13,547 GitHub snapshot taken 2026-09-14 for the whole MiniMax-AI/skills repository, which contains 6 skills in this catalog. Not a rating or usage count for shader-dev.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. InvocationRuns as /shader-dev <request>, with the request passed through $ARGUMENTS.
  2. Skill StructureLayout of SKILL.md, per-technique guides in techniques/, and deeper reference/ files.
  3. How to UseFour steps: route, read technique files, follow reference links, apply WebGL2 rules.
  4. Technique Routing TableMaps each user intent to a primary technique plus techniques to combine.
  5. Technique IndexThe 36 techniques grouped by category, each with a one-line description.
  6. WebGL2 Adaptation RulesShaderToy to WebGL2 conversions: version, fragCoord, main wrapper, macros, pitfalls.
  7. HTML Page SetupStandalone page requirements: full
The Skill's Own Description
“Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more.”

Front-matter description from SKILL.md. The full file is about 16,663 characters. Read the full file on GitHub.

Shader Dev

Run shader-dev on a Real Image Work Task.

The shader-dev skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/MiniMax-AI/skills --skill shader-dev