← Back to Skills Marketplace
jvy

shader

by jvy · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ Security Clean
255
Downloads
1
Stars
1
Active Installs
1
Versions
Install in OpenClaw
/install shader
Description
Write, explain, adapt, and debug practical shader code for GLSL, WebGL, Three.js ShaderMaterial, React Three Fiber, postprocess-style full-screen effects, an...
README (SKILL.md)

Shader

Use this skill to turn shader requests into runnable code and fast debugging steps.

Default target: browser-friendly GLSL. If the runtime is unclear, narrow it before writing code:

  • ShaderToy fragment-only
  • raw WebGL / GLSL ES
  • Three.js ShaderMaterial
  • React Three Fiber
  • postprocess-style full-screen pass

Workflow

1. Lock the runtime and effect shape

Resolve these first:

  • runtime
  • fragment-only vs vertex + fragment
  • screen effect vs material effect vs postprocess pass
  • required inputs: uTime, uResolution, UVs, normals, textures, mouse

If the request is vague, start with the smallest visible version of the effect.

2. Build from a visible baseline

  • Start with a constant color or UV gradient.
  • Add one moving term at a time.
  • Reintroduce uniforms, varyings, noise, lighting, and distortion step by step.

For blank output, compile failures, or “nothing shows”, read references/black-screen-checklist.md.

3. Match the host, not the idea source

Do not hand over ShaderToy code unchanged if the user asked for Three.js or R3F.

Common translations:

  • iTime -> uTime
  • iResolution -> uResolution
  • fragCoord -> gl_FragCoord.xy
  • ShaderToy fullscreen logic -> quad / plane / postprocess host setup

For live previews inside OpenClaw, pair this skill with canvas.

4. Keep answers practical

Prefer responses that include:

  • runnable shader code
  • required uniforms and defaults
  • host-side glue code
  • the first debugging step if it fails

Common Uses

  • Full-screen effects: flowing gradients, ripples, ShaderToy-style animated backgrounds
  • Material effects: fresnel, dissolve, edge glow, scanlines, vertex wobble
  • Porting: ShaderToy -> WebGL / Three.js / R3F
  • Debugging: black screen, all-white / all-black output, broken UVs, wrong varyings, missing uniforms

Commands

Intake

node {baseDir}/scripts/shader.js intake "fullscreen ocean background in three.js"
node {baseDir}/scripts/shader.js intake "port this shadertoy to r3f" --json

Use this to structure an underspecified request.

Debug

node {baseDir}/scripts/shader.js debug black-screen
node {baseDir}/scripts/shader.js debug uniform
node {baseDir}/scripts/shader.js debug varyings

Effects

node {baseDir}/scripts/shader.js effects

Maps user phrases to likely starter techniques like gradient, noise, fresnel, dissolve, ripple, scanline, and pixelate.

Boilerplate

node {baseDir}/scripts/shader.js boilerplate fresnel
node {baseDir}/scripts/shader.js boilerplate dissolve --json

Returns stage split, likely uniforms, varyings, build order, and common failure points.

Snippet

node {baseDir}/scripts/shader.js snippet fresnel
node {baseDir}/scripts/shader.js snippet ripple --json

Points to the nearest bundled GLSL starter.

Demo

node {baseDir}/scripts/shader.js demo webgl ripple
node {baseDir}/scripts/shader.js demo r3f fresnel --json

Chooses the best bundled runtime template for a target + effect combination.

Scaffold

node {baseDir}/scripts/shader.js scaffold r3f dissolve
node {baseDir}/scripts/shader.js scaffold postprocess scanline --json

Combines the nearest demo, boilerplate, snippet, and first integration steps.

Assets

Bundled templates:

  • assets/webgl-fullscreen-demo/index.html
  • assets/threejs-material-demo/index.html
  • assets/postprocess-demo/index.html
  • assets/r3f-demo/App.jsx
  • assets/r3f-demo/main.jsx
  • assets/r3f-demo/index.html
  • assets/r3f-demo/package.json
  • assets/r3f-demo/vite.config.js

Bundled snippets:

  • assets/snippets/fresnel.md
  • assets/snippets/dissolve.md
  • assets/snippets/ripple.md
  • assets/snippets/scanline.md
  • assets/snippets/pixelate.md
  • assets/snippets/vertex-wobble.md

Use the postprocess template for screen-space effects. Use the Three.js or R3F templates for mesh/material effects.

References

  • references/glsl-quick-reference.md
  • references/black-screen-checklist.md
  • references/effect-starters-zh.md
  • references/snippets.md
  • references/runtime-translation.md

Guardrails

  • Default to the smallest working shader that proves the effect.
  • Use host-friendly uniform names like uTime, uResolution, uMouse, uTexture.
  • Do not assume WebGL2 unless the host clearly uses it.
  • Do not invent runtime-specific macros or built-ins.
  • Call out likely precision, color-space, or postprocess-order bugs explicitly.
  • For performance advice, stay directional unless the actual runtime and GPU are known.
Usage Guidance
This skill appears coherent and focused on shader development. Things to consider before running: (1) Opening the demo HTML in a browser will fetch Three.js from unpkg (a public CDN) — if you prefer no remote fetch, replace the CDN import with a local copy. (2) The included node CLI (scripts/shader.js) operates on the bundled assets and does not require credentials; you can inspect the script before running. (3) If you are concerned about the agent invoking the skill autonomously, note the skill allows implicit invocation by policy — you can disable or restrict that in your agent settings if desired. Overall, no environment variables or secret access are requested and the files match the declared purpose.
Capability Analysis
Type: OpenClaw Skill Name: shader Version: 1.0.0 The 'shader' skill bundle is a legitimate tool designed to assist users in writing, debugging, and porting GLSL shaders for WebGL, Three.js, and React Three Fiber. The core logic in `scripts/shader.js` functions as a simple CLI helper that returns hardcoded templates, snippets, and debugging checklists based on user input. Analysis of the code and documentation (SKILL.md, references/) reveals no evidence of malicious intent, data exfiltration, or harmful prompt injection; all operations are local and focused on providing shader development boilerplate.
Capability Assessment
✓ Purpose & Capability
The name/description (shader authoring, porting, debugging) match the included assets and scripts: CLI helper (scripts/shader.js), multiple demo templates, snippets, and references. There are no unrelated credentials, binaries, or configuration paths requested.
✓ Instruction Scope
SKILL.md instructs the agent to use the bundled CLI and templates and to produce/port/debug shader code. The provided scripts and demo HTML implement only shader-related tasks and reference only local bundled assets; there are no instructions to read unrelated host files or exfiltrate data.
ℹ Install Mechanism
No install spec is present (lowest-risk). Demo HTML imports Three.js from an external CDN (unpkg) at runtime in the browser—this is expected for web demos but means the demos fetch an external library when opened. There are also package.json/dev files for the R3F demo (for local npm/vite usage) but no automatic installer included.
✓ Credentials
The skill declares no required environment variables, credentials, or config paths. The code does not attempt to access secrets. The only external dependence is the browser demo loading Three.js from a CDN, which is normal for demos but unrelated to credentials.
ℹ Persistence & Privilege
The skill policy (agents/openai.yaml) sets allow_implicit_invocation: true which permits implicit/autonomous invocation by the agent platform—this is a standard setting and not equivalent to always: true. There is no install step that persists code into the system beyond the usual skill files.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install shader
  3. After installation, invoke the skill by name or use /shader
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release providing a practical workflow and templates for writing, debugging, and porting browser-friendly GLSL shader code. - Guides users to specify runtime (ShaderToy, WebGL, Three.js, React Three Fiber, postprocess) and shader shape before outputting code. - Includes commands for request intake, debugging common problems (black screen, uniforms, varyings), and mapping effect names to starter code. - Bundles effect boilerplate, code snippets, and host templates for common runtimes and visual techniques. - Provides references for GLSL, troubleshooting, and runtime translation. - Emphasizes giving runnable shader code with host glue and practical debugging steps.
Metadata
Slug shader
Version 1.0.0
License MIT-0
All-time Installs 1
Active Installs 1
Total Versions 1
Frequently Asked Questions

What is shader?

Write, explain, adapt, and debug practical shader code for GLSL, WebGL, Three.js ShaderMaterial, React Three Fiber, postprocess-style full-screen effects, an... It is an AI Agent Skill for Claude Code / OpenClaw, with 255 downloads so far.

How do I install shader?

Run "/install shader" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is shader free?

Yes, shader is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does shader support?

shader is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created shader?

It is built and maintained by jvy (@jvy); the current version is v1.0.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments