Shadertoy

If you're writing GLSL fragment shaders for Shadertoy or WebGL, this gives you the patterns and reference you need without digging through documentation. It covers the Shadertoy-specific setup (mainImage, iResolution, iTime), common techniques like ray marching and distance fields, and the critical GLSL ES gotchas that cause compilation errors. The included code snippets for things like cosine color palettes, hash functions, and rotation matrices are copy-paste ready. What's useful here is the opinionated structure: it assumes you know what a shader is and jumps straight to the patterns you'll actually reuse. The multi-pass rendering section is solid if you need buffer feedback effects.

skills.sh installs: 1.5K
GitHub stars: 51
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bfollington/terma --skill shadertoy --agent claude-code

Installs into .claude/skills of the current project.

Files

Shadertoy Shader Development

Overview

Shadertoy is a platform for creating and sharing GLSL fragment shaders that run in the browser using WebGL. This skill provides comprehensive guidance for writing shaders including GLSL ES syntax, common patterns, mathematical techniques, and best practices specific to real-time procedural graphics.

When to Use This Skill

Activate this skill when:

Writing or editing .glsl shader files
Creating procedural graphics, generative art, or visual effects
Working with Shadertoy.com projects or WebGL fragment shaders
Implementing ray marching, distance fields, or procedural textures
Debugging shader code or optimizing shader performance
Need GLSL ES syntax reference or Shadertoy input variables

Core Concepts

Shader Entry Point

Every Shadertoy shader implements the mainImage function:

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // fragCoord: pixel coordinates (0 to iResolution.xy)
    // fragColor: output color (RGBA, typically alpha = 1.0)

    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(uv, 0.0, 1.0);
}