# shadertoy

Provides GLSL ES conventions and math patterns for writing Shadertoy shaders. Useful when building WebGL visuals, generative art, or ray marching scenes.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1500 installs · ★ 52
- Author: bfollington
- License: CC-BY-SA-4.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/bfollington/terma/tree/HEAD/plugins/tsal/skills/shadertoy/SKILL.md
- Updated: 2026-08-30
- HTML: https://affpapa.org/en/nevibecode/skills/shadertoy

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add bfollington/terma --skill shadertoy -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/shadertoy/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/shadertoy/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add bfollington/terma --skill shadertoy -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/shadertoy/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add bfollington/terma --skill shadertoy -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/shadertoy/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bfollington/terma shadertoy
```

2. **Manually: put the files in place**
- File: `.github/skills/shadertoy/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add bfollington/terma --skill shadertoy -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/bfollington/terma --path plugins/tsal/skills/shadertoy
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/shadertoy/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add bfollington/terma --skill shadertoy -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/bfollington/terma/tree/HEAD/plugins/tsal/skills/shadertoy/SKILL.md

## When to use it
- generate `mainImage` shader 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
- 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.

## Similar
- [shader-dev](https://affpapa.org/en/nevibecode/skills/minimax-ai-shader-dev.md) — skill · 2500 installs
- [threejs-shaders](https://affpapa.org/en/nevibecode/skills/threejs-shaders.md) — skill · 15600 installs
- [pixijs-custom-rendering](https://affpapa.org/en/nevibecode/skills/pixijs-custom-rendering.md) — skill · 5700 installs
- [shader-glsl](https://affpapa.org/en/nevibecode/skills/shader-glsl.md) — skill · 1400 installs
- [threejs](https://affpapa.org/en/nevibecode/skills/mrgoonie-threejs.md) — skill · 1200 installs
- [webgl](https://affpapa.org/en/nevibecode/skills/webgl.md) — skill · 555 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md