shadertoy — Claude Code skill: what it does, how to install
Provides GLSL ES conventions and math patterns for writing Shadertoy shaders. Useful when building WebGL visuals, generative art, or ray marching scenes.
npx skills add bfollington/terma --skill shadertoy -a claude-codeWhat shadertoy does
The skill supplies GLSL ES syntax rules and Shadertoy environment variables like iResolution, iTime, and texture channels iChannel0 through iChannel3. It centers shader generation around the standard mainImage entry point and normalized coordinate setups.
It provides standard building blocks for procedural graphics: cosine color palettes, 2D pseudo-random hash functions, coordinate rotations, and sphere-tracing ray marchers with surface normal calculations. It also covers multi-pass buffer setups for temporal blending.
WebGL compilation will fail if shaders break strict GLSL ES rules: floating-point numbers cannot have an f suffix, saturate() must be replaced with clamp(), and functions like sqrt or pow need protected non-negative inputs.
What it helps with
- generate
mainImageshader scaffolding with centered UV coordinates - implement ray marching loops for 3D procedural geometries
- create cosine-based color palettes and noise functions in GLSL
- set up multi-pass rendering buffers with temporal feedback
- fix WebGL compilation errors caused by desktop GLSL habits
Example prompts for the agent
- Write a Shadertoy shader using ray marching to render an animated sphere.
- Generate a cosine color palette with a smooth animated gradient.
- Set up a two-pass shader buffer pipeline with temporal blending.
How to install shadertoy
1Skills CLI (Vercel)
npx skills add bfollington/terma --skill shadertoy -a claude-code2Manually: put the files in place
~/.claude/skills/shadertoy/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/shadertoy/
1Skills CLI (Vercel)
npx skills add bfollington/terma --skill shadertoy -a codex2Manually: put the files in place
.agents/skills/shadertoy/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add bfollington/terma --skill shadertoy -a cursor2Manually: put the files in place
.cursor/skills/shadertoy/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install bfollington/terma shadertoy2Manually: put the files in place
.github/skills/shadertoy/SKILL.md1Skills CLI (Vercel)
npx skills add bfollington/terma --skill shadertoy -a gemini-cli2Platform CLI
gemini skills install https://github.com/bfollington/terma --path plugins/tsal/skills/shadertoyManually: put the files in place
.devin/skills/shadertoy/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add bfollington/terma --skill shadertoy -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about shadertoy
How to install shadertoy in Claude Code?
Run npx skills add bfollington/terma --skill shadertoy -a claude-code in your terminal.
What does the shadertoy skill do?
It provides GLSL ES guidelines, Shadertoy input references, and real-time graphics formulas for generating WebGL fragment shaders.
Which GLSL ES syntax issues does this skill address?
It prevents invalid f float suffixes, substitutes saturate() with clamp(), and enforces guards against negative values in sqrt or pow.
