TAU-HOME.COM
LOADING

Shader Skills: Procedural GLSL and Shadertoy Tooling for AI Coding Agents

An open-source toolkit providing 186 GLSL functions, a dependency bundler, and a linter to generate single-file shaders with Claude Code, Codex, Cursor, and oth

tau · October 30, 2026

#GLSL #Shadertoy #ClaudeCode #Cursor #WebGL

Shader Skills: Procedural GLSL and Shadertoy Tooling for AI Coding Agents

Shader Skills (by @gokayfem) is a graphics programming toolkit for AI coding agents. It helps developers create, debug, and refine procedural GLSL and Shadertoy shaders with Claude Code, Codex, Cursor, GitHub Copilot, and Gemini CLI.

Procedural shader render of 3D objects on a white pedestal above a checkerboard floor

Image source: https://github.com/gokayfem/shader-skills

The project addresses common limitations when AI agents write GLSL code—such as numerical inaccuracies, missing WebGL compatibility, and incorrect sign handling. It provides 186 GLSL functions across 20 modules, plus a dependency bundler and checker.

Core Features and Library Modules

Shader Skills is more than a prompt collection; it supplies an executable toolchain that agents can invoke directly.

  • Verified Graphics Building Blocks: 186 functions across 20 modules covering signed distance function (SDF) raymarching, noise, patterns, procedural terrain, water, clouds, and volumetric rendering. Every SDF is checked on the GPU for Lipschitz bounds, projection-based exactness, and inside/outside signs; curves are also compared with brute-force distance.
  • Dependency Bundler: Automatically resolves transitive dependencies when an agent references functions by name, packaging the result into a single self-contained file.
  • GLSL Linter and Checker: Inspects files for WebGL1 leftovers, missing mainImage declarations, or invalid #version lines, compiling them using glslangValidator.
  • Ready-to-Run Examples: Includes 11 executable Shadertoy examples and gallery templates for still-life scenes, terrain, and volumetric clouds.

Installation and Usage

The toolkit can be installed in Node.js 22.20+ environments using the skills CLI:

npx skills add gokayfem/shader-skills

For Claude Code marketplace integration:

claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills

Local search, bundling, and checking via Python standard library scripts:

python3 skills/shader-art-coding/scripts/glsl_tools.py search petal leaf
python3 skills/shader-art-coding/scripts/glsl_tools.py bundle skills/shader-art-coding/templates/raymarch-sdf.glsl -o /tmp/shader-skills-example.glsl
python3 skills/shader-art-coding/scripts/glsl_tools.py check /tmp/shader-skills-example.glsl

Technical Caveats and Scope

  • Target Environment Limitations: Generated shaders target WebGL2 and GLSL ES 3.00. HLSL and Unity ShaderLab formats fall outside this skill's scope.
  • Author Demonstration: In an X post, @gokayfem said Claude Opus 5.5 rebuilt a 20-second video clip as a 156 KB GLSL fragment shader with no textures or video frames.

Sources

Impact-Site-Verification: 9b3ebd10-6c45-44cf-a014-5b8c19b7b285