← 返回 Skills 市场
jvy

shader

作者 jvy · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ 安全检测通过
255
总下载
1
收藏
1
当前安装
1
版本数
在 OpenClaw 中安装
/install shader
功能描述
Write, explain, adapt, and debug practical shader code for GLSL, WebGL, Three.js ShaderMaterial, React Three Fiber, postprocess-style full-screen effects, an...
使用说明 (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.
安全使用建议
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.
功能分析
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.
能力评估
✓ 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.
如何使用
  1. 确保已安装 OpenClaw（本地或 Docker 部署）
  2. 在对话框中输入安装命令：/install shader
  3. 安装完成后，直接呼叫该 Skill 的名称或使用 /shader 触发
  4. 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
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.
元数据
Slug shader
版本 1.0.0
许可证 MIT-0
累计安装 1
当前安装数 1
历史版本数 1
常见问题

shader 是什么？

Write, explain, adapt, and debug practical shader code for GLSL, WebGL, Three.js ShaderMaterial, React Three Fiber, postprocess-style full-screen effects, an... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 255 次。

如何安装 shader？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install shader」即可一键安装，无需额外配置。

shader 是免费的吗？

是的，shader 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

shader 支持哪些平台？

shader 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 shader？

由 jvy（@jvy）开发并维护，当前版本 v1.0.0。

推荐 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.
⬇ 191113 · 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

💬 留言讨论