File contents Shader Craft
A unified skill covering GLSL shader techniques (ShaderToy-compatible) for real-time visual effects.
Quick Start: Generate a Standalone Shader HTML Page
Identify the technique from the routing table
Apply WebGL2 adaptation rules
Generate standalone HTML with full-screen canvas
Technique Routing Table
Effect
Technique
3D scenes from math
ray-marching + sdf-3d
Organic/warped shapes
domain-warping + procedural-noise
Fluid/smoke effects
fluid-simulation
Particles (fire, sparks)
particle-system
Ocean/water surface
water-ocean + atmospheric-scattering
Terrain/landscape
terrain-rendering + procedural-noise
Clouds/fog/volumetric
volumetric-rendering
Realistic lighting
lighting-model + shadow-techniques
Fractals (Mandelbrot/Julia)
fractal-rendering
Post-processing
post-processing + multipass-buffer
Code Example: Full-Screen Shader HTML
<!DOCTYPE html>
<html>
<head><style>body { margin:0; overflow:hidden; background:#000; }</style></head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl2');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const vsSource = `#version 300 es
in vec2 a_pos;
void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }`;
const fsSource = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 iResolution;
uniform float iTime;
void mainImage(out vec4 c, in vec2 f) {
vec2 uv = (2.0 * f - iResolution.xy) / iResolution.y;
c = vec4(uv, 0.5 + 0.5 * sin(iTime), 1.0);
}
void main() { mainImage(fragColor, gl_FragCoord.xy); }
`;
// Compile and link shaders, render loop...
</script>
</body>
</html>
WebGL2 Adaptation Rules
Use #version 300 es in shaders
Fragment shader: out vec4 fragColor; instead of gl_FragColor
Use gl_FragCoord.xy instead of fragCoord
Functions must be declared before use
Common Pitfalls
Pitfall
Solution
Using gl_FragColor in WebGL2
Use out vec4 fragColor;
Missing #version directive
Shaders must start with #version 300 es
Function order (reference before definition)
Define callee functions first
TDZ in JS: let/const before functions
Declare state variables at top of script
Performance: too many ray steps
Main loop ≤ 128 steps, FBM ≤ 6 octaves
Verification Checklist
1 --- 2 name: shader-dev 3 description: Use when creating GLSL shaders for real-time visual effects 4 --- 5 6 # Shader Craft 7 8 A unified skill covering GLSL shader techniques (ShaderToy-compatible) for real-time visual effects. 9 10 ## Quick Start: Generate a Standalone Shader HTML Page 11 12 1. Identify the technique from the routing table 13 2. Apply WebGL2 adaptation rules 14 3. Generate standalone HTML with full-screen canvas 15 16 ## Technique Routing Table 17 18 | Effect | Technique | 19 |--------|-----------| 20 | 3D scenes from math | ray-marching + sdf-3d | 21 | Organic/warped shapes | domain-warping + procedural-noise | 22 | Fluid/smoke effects | fluid-simulation | 23 | Particles (fire, sparks) | particle-system | 24 | Ocean/water surface | water-ocean + atmospheric-scattering | 25 | Terrain/landscape | terrain-rendering + procedural-noise | 26 | Clouds/fog/volumetric | volumetric-rendering | 27 | Realistic lighting | lighting-model + shadow-techniques | 28 | Fractals (Mandelbrot/Julia) | fractal-rendering | 29 | Post-processing | post-processing + multipass-buffer | 30 31 ## Code Example: Full-Screen Shader HTML 32 33 ```html 34 <!DOCTYPE html> 35 <html> 36 <head><style>body { margin:0; overflow:hidden; background:#000; }</style></head> 37 <body> 38 <canvas id="c"></canvas> 39 <script> 40 const canvas = document.getElementById('c'); 41 const gl = canvas.getContext('webgl2'); 42 canvas.width = window.innerWidth; 43 canvas.height = window.innerHeight; 44 45 const vsSource = `#version 300 es 46 in vec2 a_pos; 47 void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }`; 48 49 const fsSource = `#version 300 es 50 precision highp float; 51 out vec4 fragColor; 52 uniform vec2 iResolution; 53 uniform float iTime; 54 55 void mainImage(out vec4 c, in vec2 f) { 56 vec2 uv = (2.0 * f - iResolution.xy) / iResolution.y; 57 c = vec4(uv, 0.5 + 0.5 * sin(iTime), 1.0); 58 } 59 void main() { mainImage(fragColor, gl_FragCoord.xy); } 60 `; 61 62 // Compile and link shaders, render loop... 63 </script> 64 </body> 65 </html> 66 ``` 67 68 ## WebGL2 Adaptation Rules 69 70 - Use `#version 300 es` in shaders 71 - Fragment shader: `out vec4 fragColor;` instead of `gl_FragColor` 72 - Use `gl_FragCoord.xy` instead of `fragCoord` 73 - Functions must be declared before use 74 75 ## Common Pitfalls 76 77 | Pitfall | Solution | 78 |---------|----------| 79 | Using gl_FragColor in WebGL2 | Use `out vec4 fragColor;` | 80 | Missing #version directive | Shaders must start with `#version 300 es` | 81 | Function order (reference before definition) | Define callee functions first | 82 | TDZ in JS: let/const before functions | Declare state variables at top of script | 83 | Performance: too many ray steps | Main loop ≤ 128 steps, FBM ≤ 6 octaves | 84 85 ## Verification Checklist 86 87 - [ ] Shader uses correct #version directive 88 - [ ] Fragment shader declares output variable 89 - [ ] WebGL2 API used (not WebGL1) 90 - [ ] Function order correct (callee before caller) 91 - [ ] Variables declared before functions in JS 92 - [ ] Performance within budget (steps, octaves, iterations) 93 - [ ] Canvas auto-resizes on window resize 94 - [ ] Shader compiles without errors
LoopyLuci/Skills/tree/main/skills/shader-dev commit d082c59f86
Frequently asked questions How do I install the Shader Dev skill? Run npx skillmds@latest add loopyluci/shader-dev 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.
What does the Shader Dev skill do? Use when creating GLSL shaders for real-time visual effects It is listed under Coding & Dev Tools on SkillMD.
Is Shader Dev safe to use? SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Shader Dev? 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 Dev free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Shader Dev? LoopyLuci (@loopyluci) published this skill. Their other Agent Skills are listed on their SkillMD profile.
LoopyLuci