Skill Claude

Designer Frontend Contract

designer-frontend-contract/

2 views 0 downloads

Freeze an approved mockup into a reference, port it 1:1 on any stack, and verify every page, state and breakpoint with screenshot diffs before merge.

Designer Frontend Contract: Brain Lab skill for Claude Code

The tech-agnostic contract between designer and frontend dev, and the gate that mechanically enforces it.

Why use it

"Matches the design" asserted from a screenshot glance, while a whole page region is missing.
The build quietly re-styles the mockup, and the drift is only noticed after launch.
HTTP 200 and a green CI badge say nothing about whether the UI is actually right.

What it does

Designer side: freeze the approved mockup into a canonical oracle: manifest, baseline renders, a region/element inventory, token parity, a visual acceptance contract.
Frontend side: port the oracle 1:1 (transcribe, never redesign) and self-gate census → DOM → pixel before handoff.
Verifier side: independently screenshot every page × access state × pinned breakpoint against the frozen baseline; census FIRST, then pixel diff, then interaction hit-testing.
Report-only verification: findings route to the dev (drift) or the designer (a legitimate design change).

Benefits

Ship what was actually designed. Fidelity becomes an enforced gate, not an assumption.
Catch the missing region the pixel diff would have waved through.
No more launch-day drift: every page, state and breakpoint is checked before merge.
Any stack. Dev server, template language and tokens all come from your project config.

Install

Download this skill and copy the designer-frontend-contract folder to .claude/skills/designer-frontend-contract/ in your project, or to ~/.claude/skills/designer-frontend-contract/ to use it in every project. Claude Code finds it on its own; you can also call it with /designer-frontend-contract.

Part of the Web Dev Design Pipeline bundle. To get the whole set as a Claude Code plugin: /plugin marketplace add endorphin-ai/hasbrains-agent-kit, then /plugin install web-dev@hasbrains-agent-kit.

Source: endorphin-ai/hasbrains-agent-kit. License: MIT.

Files (18)

{
  "contract/roles": ["contract-and-communication"],
  "contract/storage": ["contract-and-communication"],
  "contract/communication": ["contract-and-communication"],
  "contract/handoff": ["contract-and-communication", "designer-handoff"],
  "contract/producer": ["designer-handoff"],
  "contract/freeze": ["designer-handoff"],
  "contract/consumer": ["frontend-port"],
  "contract/port": ["frontend-port"],
  "contract/self-gate": ["frontend-port"],
  "contract/verifier": ["design-diff"],
  "contract/design-diff": ["design-diff"],
  "contract/gate": ["design-diff"],
  "contract/oracle": ["baseline-and-oracle"],
  "contract/baseline": ["baseline-and-oracle"],
  "contract/migration": ["baseline-and-oracle"],
  "contract/checks": ["fidelity-checks", "region-census"],
  "contract/thresholds": ["fidelity-checks"],
  "contract/tokens": ["fidelity-checks"],
  "contract/census": ["region-census"],
  "contract/completeness": ["region-census"]
}