# UI-Craft Skills for Makepad 2.0

The design-engineering doctrine of **Emil Kowalski** (Sonner, Vaul, animations.dev, ex-Vercel/Linear)
and **Jakub Krehel** (Interfere, the `/better` skill collection) — pulled from their published agent
skills, deduplicated, and **translated into the Makepad 2.0 `script_mod!` DSL** so it can actually be
applied to the crates in this repo. This is the anti-slop layer: every rule here exists to kill the
tells of unconsidered UI (hard pop-ins, `set_visible` state snaps, no press feedback, mismatched
radii, hardcoded hex soup).

## Sources pulled

| Source | Skills distilled |
|---|---|
| `github.com/emilkowalski/skills` | `emil-design-eng`, `apple-design` (17 WWDC-derived rules), `review-animations` + STANDARDS, `animate`, `animation-vocabulary` |
| `github.com/jakubkrehel/skills` | `better-ui` (+ animations, enter-exit, surfaces, icons, performance), `better-typography`, `better-colors`, `better-layout`, `interface-review` |

Everything web-specific (CSS transitions, Framer Motion, `backdrop-filter`, WAAPI) has been re-derived
against the Makepad 2.0 dev branch (`b41e740`) source: `widgets/src/animator.rs` (Ease/Play/Animator),
`widgets/src/button.rs`, `check_box.rs`, `fold_button.rs`, `file_tree.rs`, `slide_panel.rs`,
`scroll_motion.rs` (`rubber_band_bounce`), and the `reference/AGENTS.md` in this repo.

## Contents

| File | What |
|---|---|
| [`makepad-ui-craft/SKILL.md`](makepad-ui-craft/SKILL.md) | The merged doctrine, Makepad-native. Read first. |
| [`makepad-ui-craft/EASING.md`](makepad-ui-craft/EASING.md) | CSS curve → Makepad `Ease` translation table (verified against `Ease::map`) |
| [`makepad-ui-craft/RECIPES.md`](makepad-ui-craft/RECIPES.md) | Copy-paste `script_mod!` + Rust recipes: press scale, hover, toast enter/exit, stagger, sheet settle with velocity handoff, reduced motion |
| [`makepad-ui-craft/PORTS-AUDIT.md`](makepad-ui-craft/PORTS-AUDIT.md) | The doctrine applied to `rider`, `koboyo`, `insurance` — findings in Emil's mandatory Before/After table format, with file:line refs |
| [`vendor/`](vendor/VENDOR.md) | Unmodified upstream snapshots of both skill collections (MIT), pinned to the exact commits distilled |

## How to use with an agent

Point the agent at `skills/makepad-ui-craft/SKILL.md` when building or reviewing any UI in this
workspace ("use makepad-ui-craft to review the insurance sheet interaction"). The skill assumes the
`script_mod!` DSL and the `#[derive(Script, ScriptHook, Widget, Animator)]` widget pattern from
`reference/AGENTS.md`.