A specialized technical skill for developing, debugging, and migrating ShaderToy-style fragment shaders to modern web runtimes.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install shadertoy
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 shadertoy 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 ShaderToy?
The ShaderToy skill is a purpose-built toolset for developers working with GLSL fragment shaders within the Openclaw Skills ecosystem. It focuses specifically on the unique ecosystem of ShaderToy, providing deep support for native built-ins like mainImage, iTime, and iResolution. Whether you are crafting procedural art from scratch or need to migrate a complex multi-pass buffer effect into a production environment, this skill ensures technical accuracy and performance.
By leveraging this Openclaw Skills extension, developers can bridge the gap between creative shader experimentation and functional implementation. It excels at handling ShaderToy-specific logic, such as channel management and coordinate math, making it an essential asset for creative coders and frontend engineers working with high-performance visuals.
ShaderToy Use Cases
- Creating and refining ShaderToy-native fragment shaders using procedural math.
- Debugging common shader issues like black screens, coordinate mismatches, or channel feedback loops.
- Porting existing ShaderToy effects into raw WebGL, Three.js, React Three Fiber, or standard HTML5 Canvas.
- Implementing multi-pass rendering pipelines using Buffer A through D logic in a host application.
- Converting implicit ShaderToy uniforms into explicit uniforms for custom engine integration.
How ShaderToy Works
- Shape Analysis: The skill identifies the shader structure, determining if it is a single Image pass or a complex multi-pass setup involving feedback buffers.
- Built-in Mapping: It maps ShaderToy-specific variables (iMouse, iChannel0-3, etc.) to the required GLSL logic or host-side uniforms.
- Isolation & Debugging: Using Openclaw Skills diagnostic workflows, it isolates individual terms or texture reads to verify visual output step-by-step.
- Migration Planning: The skill generates a precise checklist for porting, replacing ShaderToy entry points with standard host entry points.
- Scaffolding: It produces a minimal runnable host setup (e.g., a Three.js full-screen quad) to wrap the ported shader code.
ShaderToy Setup
To integrate this capability into your workflow, ensure your environment is configured for Openclaw Skills and use the following commands:
# Inspect built-in variable maps
node scripts/shadertoy.js builtins
# Generate a migration plan for Three.js
node scripts/shadertoy.js port three
# Scaffolding a single-pass demo
node scripts/shadertoy.js scaffold webgl single-pass
ShaderToy Data Schema & Taxonomy
The skill organizes data and reference materials to ensure high-fidelity porting and debugging:
| Data Type | Description | Location |
|---|---|---|
| Reference Docs | Detailed maps of built-ins and migration rules. | references/porting.md |
| Templates | Boilerplate for WebGL and Three.js wrappers. | assets/shadertoy-single-pass-demo/ |
| Scripts | CLI tools for generating intake plans and debug checklists. | scripts/shadertoy.js |
| Triage Guides | Specialized logic for buffer and feedback troubleshooting. | references/buffers-feedback.md |
ShaderToy Advanced Features
- Multi-Pass Logic Support: Advanced handling of Buffer A/B/C/D and feedback loops for complex temporal effects.
- Automated Porting Checklists: Generates environment-specific requirements for Three.js, R3F, or vanilla WebGL.
- Intake Planning: Uses an AI-driven intake command to analyze natural language requests and determine the best shader architecture.
- JSON-Ready Diagnostics: Many commands support a --json flag for seamless integration into larger automated pipelines and Openclaw Skills workflows.
SKILL.md
Loading
Related Openclaw Skills
Popover
A specialized tool for generating popover UI elements and managing design assets through a streamlined command-line interface.
Smart Memory Lite
A lightweight cognitive memory system for AI agents that enables persistent session management and intelligent context recall.
cn-stock-volume
A powerful automation tool for capturing, analyzing, and reporting core China A-Share market data including major indices and trading volumes.
SimpleFunctions
SimpleFunctions is an AI-native runtime designed for prediction markets, enabling automated thesis tracking and trade execution on Kalshi and Polymarket.
Reply Styles
A model-agnostic communication engine for drafting style-controlled, high-EQ replies across chat, email, and professional channels.
Construction Assistant
A professional project management tool for tracking construction progress, managing material lists, and automating safety inspection records.
Featured*
