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

Shader Dev Skill.

A skill for creating and debugging GLSL effects: ray marching, signed distance fields, fluids, particles and 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 requests to technique files with principles, implementation steps and code templates, plus deeper math in reference/. For standalone HTML, the guide adapts ShaderToy-style mainImage functions to WebGL2, sets rendering budgets and uses temporary normal, depth and step-count outputs to diagnose effects.

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.
  • Compile for the actual GLSL ES version and renderer. Loop-bound restrictions depend on that target; a macro is not inherently an unsafe or invalid loop bound.
  • Technique helpers have specific signatures. For example, a terrain helper accepting vec2 expects XZ coordinates, not an arbitrary vec3; inspect the selected helper rather than assuming every terrain API is the same.

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. Pass Real Fragment Coordinates

    In a WebGL2 wrapper, pass gl_FragCoord.xy into mainImage. The name fragCoord is valid as an explicitly declared function parameter; it is not an automatic global input.

  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

    Define a helper before calling it, or add a matching function prototype before the call. Check both argument types and return types; GLSL supports forward declarations.

  5. Precompute Fixed Values Where Appropriate

    The source recommends precomputed constants for fixed direction vectors. This is a coding preference, not a general rule that macros containing function calls are invalid; compile and validate the actual shader.

  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

    Initialize let/const state before execution reaches code that reads it. A function may be defined earlier; calling it before the referenced state is initialized is what can trigger a Temporal Dead Zone error.

  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:

  • Compile and link the shader for the target WebGL2 context; inspect the actual diagnostics rather than assuming all language constructs are unsupported.
  • Check helper argument counts and types, including vec2 versus vec3 coordinate inputs.
  • Measure render time at the requested resolution and inspect nested loop costs. The source's conservative iteration limits are guidelines, not a universal browser-freeze threshold.
  • Visualize normals, depth or step count to investigate artifacts. Normal banding can indicate an unsuitable epsilon, but confirm the cause before changing it.
  • Handle inactive or missing uniform locations. A null location may reflect optimization or a name/program mismatch; do not add artificial calculations merely to force a uniform to remain active.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

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 Shader Effect.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

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