# makepad-2.0-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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 751
- Author: ZhangHanDong
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/ZhangHanDong/makepad-skills/tree/HEAD/skills/makepad-2.0-shaders/SKILL.md
- Updated: 2026-04-07
- HTML: https://affpapa.org/en/nevibecode/skills/makepad-20-shaders

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/makepad-2.0-shaders/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/makepad-2.0-shaders/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/makepad-2.0-shaders/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/makepad-2.0-shaders/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ZhangHanDong/makepad-skills makepad-2.0-shaders
```

2. **Manually: put the files in place**
- File: `.github/skills/makepad-2.0-shaders/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/ZhangHanDong/makepad-skills --path skills/makepad-2.0-shaders
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/makepad-2.0-shaders/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-shaders -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/ZhangHanDong/makepad-skills/tree/HEAD/skills/makepad-2.0-shaders/SKILL.md

## When to use it
- 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
- Draw a rounded Makepad 2.0 button whose color changes on hover.
- Add a gradient to this widget background using a `pixel` function.
- Explain why a new DrawQuad type has to be defined in Rust.

## Similar
- [orbit-card](https://affpapa.org/en/nevibecode/skills/orbit-card.md) — skill · 10000 installs
- [cad](https://affpapa.org/en/nevibecode/skills/cad.md) — skill · 14000 installs
- [step-parts](https://affpapa.org/en/nevibecode/skills/step-parts.md) — skill · 11200 installs
- [sdf](https://affpapa.org/en/nevibecode/skills/sdf.md) — skill · 10500 installs
- [urdf](https://affpapa.org/en/nevibecode/skills/urdf.md) — skill · 10500 installs
- [hatch-pet](https://affpapa.org/en/nevibecode/skills/hatch-pet.md) — skill · 3300 installs

From the same set: [zhanghandong/makepad-skills](https://affpapa.org/en/nevibecode/by/zhanghandong/makepad-skills.md) — 14 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md