What problem does it solve? Users lose trust when they tap elements that look interactive but do nothing (false affordance), or when they hit disabled buttons with no explanation of why (anti-affordance). This Skill provides concrete patterns to eliminate misleading visual treatments and design disabled, read-only, and permission-locked states that clearly communicate unavailability. ## Core Features & Use Cases - False-affordance detection and fixes: Identify button-styled cards, hover states on inert elements, underlined non-link text, and decorative animation that falsely signals interactivity, with CSS/HTML fixes. - Disabled-state design: Implement disabled controls with visual demotion, cursor: not-allowed, aria-disabled, and explanations of why the action is unavailable. - Read-only and locked field treatment: Style read-only inputs to signal "data, not control" while keeping values selectable, and mark permission-locked fields with lock icons and hints. - Use Case: While reviewing a checkout page, you find the submit button silently disabled and several content cards styled like buttons. Use this Skill to restyle the inert cards neutrally and add an inline hint explaining the disabled button's precondition. ## Quick Start Review this checkout form for false affordances and improve the disabled submit button so users understand why it is unavailable.
