A comprehensive toolkit for writing, debugging, and porting GLSL shaders across WebGL, Three.js, and React Three Fiber runtimes.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install shader
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install shader using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Shader Skill?
The Shader skill is a specialized technical module designed for Openclaw Skills to bridge the gap between creative visual ideas and runnable GPU code. It empowers AI agents to generate high-quality fragment and vertex shaders, handle complex coordinate transformations, and manage uniform wiring for modern web environments. Whether you are building organic noise patterns or complex post-processing effects, this skill ensures the output is compatible with your specific host environment.
By focusing on practical implementation, the skill helps developers move past common pitfalls like black screens or compilation errors. It provides a structured approach to shader development, moving from visible baselines to sophisticated visual logic while maintaining strict adherence to host-side requirements in Three.js, React Three Fiber (R3F), and raw WebGL.
Shader Skill Use Cases
- Creating full-screen procedural backgrounds like flowing gradients, ripples, or animated noise.
- Developing custom material effects including fresnel rims, dissolve transitions, edge glows, and vertex-based wobbles.
- Porting legacy ShaderToy code into modern web frameworks by translating variables like iTime and iResolution to uTime and uResolution.
- Troubleshooting rendering issues such as all-black outputs, broken UV mapping, and missing varyings.
How Shader Skill Works
- Runtime Identification: The process begins by locking the specific target environment (e.g., Three.js vs. R3F) and defining the effect shape.
- Input Mapping: Necessary uniforms like time, resolution, and textures are mapped to ensure the shader communicates correctly with the CPU.
- Baseline Construction: A visible baseline is established using simple gradients or solid colors to verify the rendering pipeline.
- Incremental Iteration: Visual features like lighting, distortion, and noise are added step-by-step to maintain stability.
- Host Integration: The final GLSL code is bundled with the required host-side glue code for immediate deployment.
Shader Skill Setup
To integrate this capability into your environment, use the following commands within your Openclaw Skills workspace:
# Initialize a new shader project
node ./scripts/shader.js intake "fullscreen ocean background in three.js"
# Scaffold a specific runtime environment
node ./scripts/shader.js scaffold r3f dissolve
Shader Skill Data Schema & Taxonomy
The Shader skill organizes its assets and references to ensure cross-compatibility across different web graphics stacks:
| Asset Type | Description | Key Files |
|---|---|---|
| Templates | Ready-to-use runtime environments | assets/r3f-demo/, assets/threejs-material-demo/ |
| Snippets | Reusable GLSL logic blocks | assets/snippets/fresnel.md, ripple.md |
| Checklists | Standardized debugging procedures | references/black-screen-checklist.md |
| Guides | Language and runtime translation maps | references/glsl-quick-reference.md |
Shader Skill Advanced Features
- Automated Porting: Intelligent translation of ShaderToy global variables to framework-specific uniforms.
- Multi-Runtime Scaffolding: Generate complete boilerplate projects for React Three Fiber or Vanilla WebGL with a single command.
- Visual Debugging Hooks: Built-in debug modes to isolate issues in uniforms, varyings, or vertex attributes.
- OpenClaw Canvas Integration: Direct pairing with canvas demos for real-time visual feedback of shader changes.
SKILL.md
Loading
Related Openclaw Skills
PagerDuty On-Call
A comprehensive integration for managing PagerDuty incidents and on-call schedules via the REST API.
Office Hours
A high-stakes brainstorming and diagnostic tool that transforms raw ideas into rigorous technical design documents using YC-inspired methodology.
Plate Recognizer
A powerful ALPR integration for AI agents to identify license plates, vehicle makes, and models through automated workflows.
Dedupe Data Reference
A comprehensive technical reference for implementing exact, fuzzy, and hash-based deduplication across databases, filesystems, and ETL pipelines.
YouMind Illustration PPT Generator
A sophisticated AI agent skill that transforms text outlines into high-impact presentation decks featuring a consistent IP character and professional YouMind-style illustrations.
Pre-Landing PR Review
A comprehensive AI-driven code review agent that analyzes PR diffs for structural integrity, data safety, and design consistency while proactively applying auto-fixes.
Featured*
