Shader Skills
A skill builds and debugs GLSL shaders from reusable blocks, bundles dependencies into one file and checks WebGL2-oriented code.
- 447 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill writes GLSL files and runs local bundling and checking utilities.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/shader-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill writes GLSL files and runs local bundling and checking utilities.
This is third-party code. Review the repository files before installing.
What it does
Shader Skills gives an agent a procedural-graphics workflow and GLSL library. It chooses a rendering approach, combines shape, lighting and material functions and verifies code and output in stages. Shadertoy templates cover several scene types. A Python utility searches functions, bundles dependencies and checks the result. With glslangValidator installed, it also compiles the shader. A companion prompt helps analyze a video reference and reconstruct its techniques in an original procedural scene.
Who it is for. For developers and designers building Shadertoy and WebGL2 procedural graphics with an agent.
Good fit when
- Build a distance-field scene.
- Investigate WebGL shader errors.
- Bundle library functions without manually copying dependencies.
- Analyze reference lighting, form and motion.
Not a fit when
- You need HLSL or Unity ShaderLab.
- You need non-graphics GPU computation.
- Local checks and shader preview are prohibited.
Example request
Build a simple WebGL2 water shader, show debug stages and check compilation before project integration.Limitations
The skills installer needs Node.js 22.20 or later; bundled utilities need Python 3. Output targets Shadertoy, WebGL2 and GLSL ES 3.00, with other graphics APIs requiring separate porting. Checker compilation runs only when glslangValidator is installed, so inspect which stages actually completed. Appearance and performance depend on GPU and resolution; preview the scene and measure load on the target device before integration.
How to disable. Remove the skill or plugin. Generated GLSL files, project templates and check results remain in the workspace.
FAQ
Which skill should I select?
Choose `shader-art-coding` in the installer.
What does `bundle` do?
It resolves function dependencies into a self-contained GLSL file.
What does `search` do?
It finds functions by name, summary and use tags.
Are example scenes included?
Yes. Templates and viewable examples are included.
Do the utilities need a network API?
Python tools use the standard library; the host agent supplies model access.
Discussion
No questions or reviews yet.
Related
SkillsA skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Three skills for web 3D: GLSL shaders, Three.js scenes with React Three Fiber and GPU particle systems.
Ten reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
A skill that guides an agent from renderer choice to browser verification for small GPU effects in interfaces on WebGL and WebGPU.
README in short
Library functions have GPU property checks. This helps select building blocks, while the final combination still needs scene-specific preview.
README badge
Original SKILL.md
---
name: shader-art-coding
description: >-
Writes, debugs, and art-directs procedural GLSL fragment shaders (Shadertoy mainImage, WebGL2 / GLSL ES 3.00):
SDF raymarching, procedural buildings/cities, 2D distance-field graphics, noise / fBm / domain warping, terrain,
ocean/coastal water optics, clouds and other volumes, PBR lighting, color and tonemapping. Ships a verified GLSL building-block library with a bundler and
checker. Use when the user asks for a shader, Shadertoy, GLSL/.frag/.glsl code, a raymarcher, an SDF scene, a
procedural texture or generative visual, or wants a shader fixed, optimized, ported or explained. Not for
HLSL/Unity ShaderLab or non-graphics GPU compute.
license: MIT
metadata:
hermes:
tags:
- shader
- glsl
- shadertoy
- procedural-art
- raymarching
- sdf
category: development
---
# Shader Art Coding
Treat shader work as visual engineering: start from the intended image, choose the smallest mathematical model that
can produce it, build it in inspectable stages, and verify each stage with a debug view.
## Workflow
1. **Target.** State the image: subject, camera and framing, dominant forms, materials, light, motion.
2. **Route.** Pick the rendering model and starting template from `references/subject-routing.md`:
2D distance fields (posters, icons, patterns), SDF raymarching (objects, characters), heightfield marching
(landscapes), volume integration (clouds, smoke, fire).
3. **Assemble from the library.** Find building blocks with `python3 scripts/glsl_tools.py search <words>` or
`references/library-index.md`, and call them by name. Do not paste or re-derive library code; it is tested.
4. **First image fast.** Coordinates, background, one primitive, one light. Then add the debug views.
5. **Refine in order:** proportions, composition, material separation, lighting, atmosphere, color, antialiasing,
performance.
6. **Bundle and check.** `python3 scripts/glsl_tools.py bundle shader.glsl -o out.glsl` inlines exactly the
functions used. `python3 scripts/glsl_tools.py check out.glsl` lints it and compiles it with glslangValidator
when installed. Fix every error, then deliver `out.glsl`.
Run the scripts from this skill's directory. They need only Python 3.
## Conventions