affordance

What problem does it solve?

Affordance prevents users from guessing which elements are interactive by ensuring UI cues make possible actions immediately perceivable in the still state.

Core Features & Use Cases

• Interactive vs. non-interactive clarity: Ensures interactive elements (buttons, links, drag handles, expandable controls, inline editors) visibly communicate what users can do.
• False and anti-affordance handling: Prevents “mystery clicks” where controls look interactive but aren’t, and uses anti-affordance for disabled states.
• State-ready design for real devices: Supports affordance in touch and keyboard contexts using robust visual and behavioral signifiers (hover, focus, cursor, elevation, underline).
• Common application scenarios: Auditing a dashboard with clickable cards, designing an editable field that looks like static text, implementing drag-to-reorder, or reviewing an onboarding screen where the next action isn’t obvious.

Quick Start

Use the affordance skill to audit a screen and revise every interactive element so it visibly communicates its action in the still state.