Affordance Auditor: a Claude skill that judges clickability

Brief

Package a recurring design-review discipline as a reusable Claude skill: given code, a screenshot, or both, audit whether each interactive element communicates its intended action before interaction — and say it bluntly.

Initial idea

Affordance reviews are the most mechanical part of a UI critique: inventory what looks interactive, compare perceived against actual behavior, check states, check accessibility. That's a checklist, and checklists are exactly what a skill encodes well. The judgment stays where it belongs — in the fix — but the sweep becomes repeatable and brutally consistent.

Decisions

1. 01Every element gets a 1–5 affordance clarity score with hard anchors: 1 is misleading or invisible, 5 is obvious on sight. A div with an onClick styled as plain text is a 1, no matter how pretty the screen is.
2. 02The audit runs a fixed 7-step pipeline: inventory → classify affordance type → score → cross-check against the design system → verify state coverage → accessibility pass → risk assessment. No step is skippable.
3. 03Brutally honest, not polite — it's written into the skill's behavior rules. Politeness is the enemy of clarity in a review.
4. 04No generic feedback allowed: every issue must name the token, the pixel value, or the component prop. 'Increase contrast' without a target ratio is banned by the quality bar.
5. 05Accessibility is a floor, not a section: WCAG AA contrast, visible focus rings, semantic HTML over role=button, ARIA on icon-only controls, 44×44px touch targets.
6. 06It accepts code, a screenshot, or both — and when given both, it cross-analyzes to verify the rendered result matches the implementation intent.
7. 07The output is a contract: summary with overall score, per-element analysis in a fixed format, critical issues, then quick wins shippable in under an hour.

Conclusion

The skill turns a senior designer's review reflexes into something a whole team can run on any screen, any day. It doesn't replace the design call — it makes sure the mechanical part of the critique never gets skipped, and that the feedback always lands with a concrete fix attached.