How do I install the Shader skill?

Run npx skillmds add majiayu000/shader in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Shader safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shader?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Shader free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Shader?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Shader by majiayu000 — Agent Skill

Name: Shader
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

Shader

Write GLSL fragment shaders for procedural graphics. Topics: shapes (SDF), patterns, noise (Perlin/simplex/cellular), fBm, colors (HSB/RGB), matrices, gradients, animations. Use for generative art, textures, visual effects, WebGL, Three.js shaders.

majiayu000 eb0ee1c 2 files · 4.0 KB Updated Sep 9, 2026 567 repo stars

File contents

GLSL Fragment Shaders

Write GPU-accelerated fragment shaders for procedural graphics, textures, and visual effects.

When to Use

Creating procedural textures (wood, marble, clouds, terrain)
Drawing shapes with distance fields (SDF)
Generating patterns, noise, gradients
Building visual effects and animations
Writing custom shaders for Three.js, WebGL, Processing

Core Concepts

Fragment shaders execute simultaneously on every pixel. Each thread:

Receives pixel position via gl_FragCoord
Returns color via gl_FragColor (vec4: RGBA 0.0-1.0)
Cannot communicate with other threads (stateless)

Standard Uniforms

uniform float u_time;       // Elapsed seconds
uniform vec2 u_resolution;  // Canvas size (width, height)
uniform vec2 u_mouse;       // Mouse position in pixels

Normalize coordinates: vec2 st = gl_FragCoord.xy / u_resolution;

Essential Functions

Function	Purpose	Example
`mix(a,b,t)`	Linear interpolate	`mix(red, blue, 0.5)`
`step(edge,x)`	Hard threshold	`step(0.5, st.x)`
`smoothstep(e0,e1,x)`	Smooth threshold	`smoothstep(0.2, 0.8, st.x)`
`fract(x)`	Fractional part	`fract(st * 3.0)` for tiling
`mod(x,y)`	Modulo	`mod(st.x, 0.25)`
`clamp(x,min,max)`	Constrain value	`clamp(col, 0.0, 1.0)`
`length(v)`	Vector magnitude	`length(st - 0.5)`
`distance(a,b)`	Euclidean distance	`distance(st, center)`
`dot(a,b)`	Dot product	`dot(normal, lightDir)`
`normalize(v)`	Unit vector	`normalize(direction)`
`atan(y,x)`	Angle (radians)	`atan(st.y-0.5, st.x-0.5)`
`sin/cos/pow/abs`	Math	Hardware-accelerated

Quick Patterns

Circle:

float d = distance(st, vec2(0.5));
float circle = 1.0 - smoothstep(0.2, 0.21, d);

Rectangle:

vec2 bl = step(vec2(0.1), st);
vec2 tr = step(vec2(0.1), 1.0 - st);
float rect = bl.x * bl.y * tr.x * tr.y;

Tiling:

st = fract(st * 4.0);  // 4x4 grid

Animation:

float wave = sin(st.x * 10.0 + u_time) * 0.5 + 0.5;

References (Progressive Disclosure)

Fundamentals

references/glsl-fundamentals-data-types-vectors-precision-coordinates.md
references/glsl-shaping-functions-step-smoothstep-curves-interpolation.md

Drawing

references/glsl-colors-rgb-hsb-gradients-mixing-color-spaces.md
references/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.md
references/glsl-shapes-polygon-star-polar-sdf-combinations.md

Procedural

references/glsl-patterns-tiling-fract-matrices-transformations.md
references/glsl-pattern-symmetry-truchet-domain-warping.md
references/glsl-noise-random-perlin-simplex-cellular-voronoi.md
references/glsl-cellular-voronoi-worley-noise-patterns.md
references/glsl-fbm-fractional-brownian-motion-turbulence-octaves.md
references/glsl-procedural-textures-clouds-marble-wood-terrain.md

API Reference

references/glsl-shader-builtin-functions-complete-api-reference.md

Tools

Online Editor: editor.thebookofshaders.com
glslViewer: CLI tool for running .frag files
glslCanvas: HTML embed for live shaders
ShaderToy: iTime, iResolution, iMouse uniforms

External Resources

The Book of Shaders: https://thebookofshaders.com
LYGIA Library: https://lygia.xyz (reusable shader functions)
ShaderToy: https://shadertoy.com
Inigo Quilez Articles: https://iquilezles.org/articles/

---name: shaderdescription: Write GLSL fragment shaders for procedural graphics. Topics: shapes (SDF), patterns, noise (Perlin/simplex/cellular), fBm, colors (HSB/RGB), matrices, gradients, animations. Use for generative art, textures, visual effects, WebGL, Three.js shaders.--- # GLSL Fragment Shaders Write GPU-accelerated fragment shaders for procedural graphics, textures, and visual effects. ## When to Use - Creating procedural textures (wood, marble, clouds, terrain) - Drawing shapes with distance fields (SDF) - Generating patterns, noise, gradients - Building visual effects and animations - Writing custom shaders for Three.js, WebGL, Processing ## Core Concepts Fragment shaders execute **simultaneously on every pixel**. Each thread: - Receives pixel position via `gl_FragCoord` - Returns color via `gl_FragColor` (vec4: RGBA 0.0-1.0) - Cannot communicate with other threads (stateless) ## Standard Uniforms ```glsl uniform float u_time; // Elapsed seconds uniform vec2 u_resolution; // Canvas size (width, height) uniform vec2 u_mouse; // Mouse position in pixels ``` Normalize coordinates: `vec2 st = gl_FragCoord.xy / u_resolution;` ## Essential Functions | Function | Purpose | Example | |----------|---------|---------| | `mix(a,b,t)` | Linear interpolate | `mix(red, blue, 0.5)` | | `step(edge,x)` | Hard threshold | `step(0.5, st.x)` | | `smoothstep(e0,e1,x)` | Smooth threshold | `smoothstep(0.2, 0.8, st.x)` | | `fract(x)` | Fractional part | `fract(st * 3.0)` for tiling | | `mod(x,y)` | Modulo | `mod(st.x, 0.25)` | | `clamp(x,min,max)` | Constrain value | `clamp(col, 0.0, 1.0)` | | `length(v)` | Vector magnitude | `length(st - 0.5)` | | `distance(a,b)` | Euclidean distance | `distance(st, center)` | | `dot(a,b)` | Dot product | `dot(normal, lightDir)` | | `normalize(v)` | Unit vector | `normalize(direction)` | | `atan(y,x)` | Angle (radians) | `atan(st.y-0.5, st.x-0.5)` | | `sin/cos/pow/abs` | Math | Hardware-accelerated | ## Quick Patterns **Circle:** ```glsl float d = distance(st, vec2(0.5)); float circle = 1.0 - smoothstep(0.2, 0.21, d); ``` **Rectangle:** ```glsl vec2 bl = step(vec2(0.1), st); vec2 tr = step(vec2(0.1), 1.0 - st); float rect = bl.x * bl.y * tr.x * tr.y; ``` **Tiling:** ```glsl st = fract(st * 4.0); // 4x4 grid ``` **Animation:** ```glsl float wave = sin(st.x * 10.0 + u_time) * 0.5 + 0.5; ``` ## References (Progressive Disclosure) ### Fundamentals - `references/glsl-fundamentals-data-types-vectors-precision-coordinates.md` - `references/glsl-shaping-functions-step-smoothstep-curves-interpolation.md` ### Drawing - `references/glsl-colors-rgb-hsb-gradients-mixing-color-spaces.md` - `references/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.md` - `references/glsl-shapes-polygon-star-polar-sdf-combinations.md` ### Procedural - `references/glsl-patterns-tiling-fract-matrices-transformations.md` - `references/glsl-pattern-symmetry-truchet-domain-warping.md` - `references/glsl-noise-random-perlin-simplex-cellular-voronoi.md` - `references/glsl-cellular-voronoi-worley-noise-patterns.md` - `references/glsl-fbm-fractional-brownian-motion-turbulence-octaves.md` - `references/glsl-procedural-textures-clouds-marble-wood-terrain.md` ### API Reference - `references/glsl-shader-builtin-functions-complete-api-reference.md` ## Tools - **Online Editor:** editor.thebookofshaders.com - **glslViewer:** CLI tool for running .frag files - **glslCanvas:** HTML embed for live shaders - **ShaderToy:** iTime, iResolution, iMouse uniforms ## External Resources - The Book of Shaders: https://thebookofshaders.com - LYGIA Library: https://lygia.xyz (reusable shader functions) - ShaderToy: https://shadertoy.com - Inigo Quilez Articles: https://iquilezles.org/articles/

Frequently asked questions