AI workflowJun 3, 2026
Affordance Auditor: a Claude skill that judges clickability
A Claude Code skill that audits any screen for affordance clarity, scoring every interactive element 1–5 on whether it signals its action before the user touches it. Drop it into your own Claude setup.
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
- 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.
- 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.
- 03Brutally honest, not polite: it's written into the skill's behavior rules. Politeness is the enemy of clarity in a review.
- 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.
- 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.
- 06It accepts code, a screenshot, or both. When given both, it cross-analyzes to verify the rendered result matches the implementation intent.
- 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.
The skill operates as a UI/UX design engineer specialized in affordance, usability, and interaction clarity. Point it at a component, a screenshot, or both, and it inventories everything a user might try to interact with (including the ambiguous candidates that look clickable but aren't).
Each element is classified by affordance type: explicit, implicit, conventional, or hidden. Then it's scored against Nielsen's heuristics and Norman's signifiers. Missing hover, focus or disabled states count as broken affordance, not polish debt.
Download it below, unzip into ~/.claude/skills, and ask Claude to audit any screen. It triggers on requests about clickability, misclicks, ambiguous cues, or interaction-state reviews.
Download the skill
The complete skill, ready for your setup. Unzip into ~/.claude/skills and it starts triggering in your conversations.