skills.rest
HDeibler
HDeiblerCOMMUNITY
Explore all skills by this author →
GitHub

affordance

Audit UI elements for interactive clarity and visible signifiers across touch and keyboard interfaces.

6|3|Updated May 3, 2026
Search Tags:#ui#accessibility#interaction design#ux#usability audit#disabled states#visual signifiers
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill affordance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: affordance
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/interaction-and-control-principles/skills/affordance
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill affordance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about affordance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit UI elements for clear visual signifiers and interactive states?▼

To audit UI elements for clear visual signifiers, review still-state visibility, interaction feedback, keyboard focus behavior, and anti-affordance for disabled controls to ensure interactive actions are immediately perceivable.

What is false affordance in interaction design and how do I fix it?▼

False affordance occurs when non-interactive content looks clickable, causing mystery clicks. Fix it by removing misleading visual cues and aligning visible signifiers only with the actual actions elements enable.

How do I design accessible interactive controls for touch-first interfaces without hover cues?▼

Design accessible touch-first interactive controls by using robust visual and behavioral signifiers such as elevation, underline, and cursor changes, replacing unreliable hover cues to clearly communicate possible actions.

Can I use an affordance audit for reviewing drag-to-reorder and inline editor components?▼

Yes, an affordance audit applies to reviewing drag-to-reorder handles and inline editors by ensuring these interactive controls visibly communicate their functionality in the still state before user interaction.

When should I use anti-affordance design for disabled buttons and links?▼

Use anti-affordance design for disabled buttons and links when controls must be visible but inactive, applying distinct visual treatments that differentiate them from active interactive elements.

Related Skills

Explore More Design & Creative Skills→
superpollo02superpollo02

claymorphism

Standardize claymorphism UI components with WCAG 2.2 AA and keyboard-first interaction rules.

Community
Intermediate
HDeiblerHDeibler
6

affordance-false-and-anti

Audits UI elements that visually misrepresent interactivity and rewrites disabled/read-only treatments with accessibility semantics.

Community
Intermediate
DesquaredDesquared
3

accessibility-skill

Improves Flutter UI accessibility with semantics, focus management, and color contrast checks.

Official
Intermediate
yfyang86yfyang86
1

herbert-a-simon

Generate decision analysis insights using Herbert Simon's bounded rationality framework.

Community
Basic