← ClaudeAtlas

design-parity-reviewlisted

Prove a Compose UI pull request matches its intended design by diffing the rendered code (candidate) against a Figma / Stitch / Claude Design reference and posting a parity verdict. Use when asked to check a PR against a design, wire up a design-parity bot, set up the committed reference cache so runs make zero Figma calls, shard an exhaustive catalog check across parallel jobs, map code components to design nodes via design-map.json or Code Connect, or push code renders back onto the Figma canvas. This is the design→code direction; for code→design catalogs see compose-design-catalog and figma-catalog-import.
yschimke/skills · ★ 2 · Code & Development · score 66
Install: claude install-skill yschimke/skills
# Design parity — reviewing code against its design `design-parity` is a tool-neutral bot that proves a UI pull request is at **parity** with its intended design. On a UI PR it: 1. resolves **which design reference** matches the changed component, 2. renders the new code — the **candidate** — via `compose-preview`, 3. **diffs** candidate vs reference (visual + semantic + token), 4. posts a **verdict** in the PR — e.g. *"implements Figma `Button/Primary`; padding 12dp vs spec 16dp; dark-theme contrast fails AA."* The candidate side is the upstream `compose-preview` renderer (the [compose-preview](../compose-preview/SKILL.md) skill). What design-parity owns is the **reference side** and the **correspondence layer** that decides which design maps to which code. ## Source Maintained at [github.com/yschimke/skills](https://github.com/yschimke/skills) under `skills/design-parity-review/`. The tool ships from [yschimke/design-parity](https://github.com/yschimke/design-parity) and on npm as [`design-parity`](https://www.npmjs.com/package/design-parity) — run it with `npx design-parity …`, no checkout needed. That repo's [`docs/README.md`](https://github.com/yschimke/design-parity/blob/main/docs/README.md) indexes the full contracts; when it disagrees with this skill, it wins. ## Which direction is this? The two directions are different tools and it is worth being explicit, because picking the wrong one wastes a lot of setup: | You want | Direction | Skill | |---|---|---| |