使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/barmoshe/claude-creative-stack --skill shader-smith开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
Shader Smith
Opinionated about GLSL style; minimal about the host code.
When to trigger
- "Write a shader that looks like X"
- "Raymarch a scene"
- "SDF logo"
- "Background effect with mouse"
- "Post-processing filter"
Pick a host first
| Target | Host |
|---|---|
| Standalone preview, no scene | Vanilla WebGL2 in one HTML artifact |
| In an existing Three.js r128 scene | ShaderMaterial / RawShaderMaterial (artifact) |
| R3F scene | <shaderMaterial /> — delegate to freshtechbro/claudedesignskills |
| Pixi v8 filter | Filter + fragment shader |
GLSL ES 3.00 template
glsl
#version 300 es
precision highp float;
uniform vec2 uResolution;
uniform float uTime;
uniform vec2 uMouse; // 0..1
out vec4 fragColor;
// --- helpers ---------------------------------------------------------------
float hash21(vec2 p){ p = fract(p*vec2(234.34,435.345)); p += dot(p, p+34.23); return fract(p.x*p.y); }
float noise(vec2 p){
vec2 i = floor(p), f = fract(p);
float a = hash21(i), b = hash21(i+vec2(1,0)), c = hash21(i+vec2(0,1)), d = hash21(i+vec2(1,1));
vec2 u = f*f*(3.-2.*f);
return mix(a,b,u.x) + (c-a)*u.y*(1.-u.x) + (d-b)*u.x*u.y;
}
// --- main ------------------------------------------------------------------
void main(){
vec2 uv = (gl_FragCoord.xy - 0.5*uResolution) / uResolution.y;
float n = noise(uv*4.0 + uTime*0.3);
vec3 col = mix(vec3(0.05,0.07,0.12), vec3(0.9,0.55,0.3), n);
fragColor = vec4(col, 1.0);
}Minimal WebGL2 host (HTML artifact)
Key points the scaffold must include:
- Fullscreen triangle, not quad — 1 draw call, no index buffer.
- Resize handler that sets
canvas.width = cssW * devicePixelRatio. requestAnimationFrameloop feedinguTimein seconds.- Pointer-move listener writing to
uMousenormalized. - Respect
prefers-reduced-motion— pause time.
Technique cheat sheet
| Technique | When to reach for |
|---|---|
SDF 2D (circle/box/rounded) + smoothstep | Crisp shapes, logos, UI glow |
Domain warp (p += noise(p)) | Organic flows, liquid, fabric |
| fBm (fractal Brownian motion) | Clouds, terrain noise, paper |
| Raymarch SDF 3D | 3D scenes with no geometry upload |
| Worley / Voronoi | Cells, skin, crystals |
| Feedback (ping-pong FBO) | Trails, reaction-diffusion, blur |
Delegation
- Full scene-graph shader work with multiple passes → hand to
freshtechbro/claudedesignskillsThree.js / R3F skills. - This skill: single-shader effects + wrapper.
Common pitfalls
precision highp float;— always declare; mobile defaults vary.#version 300 esmust be the first line (no preceding comment).- Avoid dynamic loops on mobile GPUs — unroll or cap iterations.
gl_FragCoord.ypoints up in WebGL; invert if matching image coords.
Output shape
- Approach — 2 sentences on technique.
- Shader in a fenced block labeled
glsl. - Full HTML artifact (shader + host) in a fenced block labeled
html. - Uniform reference table.
- Known artifacts — one paragraph on mobile/perf caveats.
Further reading
knowledge/05-graphics-design.md— GLSL cheat sheet.knowledge/03-artifacts.md— Three.js r128 andthree/examples/jsmrestrictions.artifacts/html/shader-playground.html— working starter.
