cupertino-councillisted

Use at UI/frontend build-time, before writing any code, whenever a user-facing interface or screen is being designed. Trigger on 'design this screen', 'build this UI', 'make this feel premium', 'this feels generic', or any request to design or implement a user-facing surface. Applies to any stack (HTML, React, Vue, native, etc.). Always run before code, never after — retrofitting the council onto finished code defeats the purpose. Not for a not-yet-scoped new feature where customer experience and technology are both still undecided — run cupertino-backwards first to establish the experience statement. Not for reviewing an interface that already exists: for accessibility, semantic-markup or hardcoded-design-value problems in shipped source use self-assess-ui-audit, and for a full-lifecycle design pass over an existing project use cupertino-review.
Anselmoo/werkstoff · ★ 1 · Web & Frontend · score 67

Install: claude install-skill Anselmoo/werkstoff

Convene exactly five lenses before writing a line of UI code. This is not decoration on top of your own design instinct — it is the design process. This skill is gated: a PreToolUse hook blocks it until `cupertino-backwards` has run in this repo (it checks for `.cupertino/flags/backwards-done`). If you see a denial for that reason, run `cupertino-backwards` first — do not work around the gate. ## The five lenses (exactly five, no fewer, no more) 1. **Reduction** — what can be removed without losing function? 2. **Craft** — what does obsessive attention to detail (spacing, motion, materials) demand here? 3. **Hierarchy** — what system of consistent visual weighting makes this legible at a glance? 4. **Usability** — what does the person actually need to accomplish, with the least friction? 5. **Metaphor** — what human-familiar concept makes this interface make intuitive sense? ## Steps 1. **Council Brief**: an audit table with one row per lens — what that lens observes about this specific interface, not generic platitudes. 2. **Validate lens count mechanically**: ```bash echo '{"lenses": ["Reduction", "Craft", "Hierarchy", "Usability", "Metaphor"]}' | python3 "${CLAUDE_PLUGIN_ROOT}/scripts/validators.py" council-lenses ``` 3. **Tension Log**: wherever two lenses pull in different directions, resolve using the **fixed precedence order — Usability > Reduction > Craft > Hierarchy > Metaphor** — and no other ordering. State each resolution as: `"[Lens A] wanted [X], [