makepad-2.0-shaders — Claude Code skill for shaders
This skill guides agents writing Makepad 2.0 shaders, from SDF2D shapes to custom widget drawing. Use it when shader work needs to follow Makepad’s GPU conventions.
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a claude-codeWhat makepad-2.0-shaders does
The skill covers shader functions placed in Makepad drawing blocks, along with variables such as instance and uniform. Its reference files explain shader syntax and SDF2D operations, including shape construction, transforms, fills, strokes, and shape combinations.
It also walks through color handling, shadows, button states, and helper functions. Pixel shaders must return premultiplied alpha; an SDF2D result already has that form, while a manually built color needs premultiplication. That distinction matters when writing a shader’s return value.
The skill draws a clear boundary between Splash and Rust. Splash can change how existing draw types render, but new DrawQuad types and extra fields on existing shaders must be defined in Rust.
What it helps with
- draw SDF2D shapes in a widget shader
- add a gradient or shadow to a Makepad background
- change a widget’s shader color on hover
- write a helper function for pixel shading
- identify when a shader change requires Rust code
Example prompts for the agent
- Draw a rounded Makepad 2.0 button whose color changes on hover.
- Add a gradient to this widget background using a
pixelfunction. - Explain why a new DrawQuad type has to be defined in Rust.
How to install makepad-2.0-shaders
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a claude-code2Manually: put the files in place
~/.claude/skills/makepad-2.0-shaders/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/makepad-2.0-shaders/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a codex2Manually: put the files in place
.agents/skills/makepad-2.0-shaders/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a cursor2Manually: put the files in place
.cursor/skills/makepad-2.0-shaders/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ZhangHanDong/makepad-skills makepad-2.0-shaders2Manually: put the files in place
.github/skills/makepad-2.0-shaders/SKILL.md1Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a gemini-cli2Platform CLI
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-shadersManually: put the files in place
.devin/skills/makepad-2.0-shaders/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about makepad-2.0-shaders
How do I install makepad-2.0-shaders in Claude Code?
Run npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a claude-code. The skill file is at ~/.claude/skills/makepad-2.0-shaders/SKILL.md.
What does makepad-2.0-shaders do?
It guides an agent through Makepad 2.0 shader work, including SDF2D drawing, shader variables, and widget rendering functions. It also covers color handling and custom shader helpers.
Can Splash add a new DrawQuad type?
No. Define and register a new draw type in Rust. Splash can override the rendering of draw types that already exist.
