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

affordance-signifiers

Audit UI elements for missing or weak visible signifiers across interaction states.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill fixes designs where users can’t tell what’s interactive because the visible signifiers (cues like borders, fills, icons, or focus states) are missing, weak, or mismatched to the action’s importance.

Core Features & Use Cases

  • Signifier strength selection that matches action stakes (primary vs secondary vs tertiary vs destructive) so users know what to press.
  • Signifier audit and state coverage to ensure interactive elements have perceivable static cues plus hover, focus, active, and disabled feedback.
  • Component-specific signifier patterns for buttons, links, inputs, toggles, drag handles, and disclosures, with anti-pattern detection for flat designs and hover-only cues.

Quick Start

Ask an AI to review your UI for missing or inconsistent signifiers across primary/secondary/tertiary/destructive actions and provide specific fixes for hover, focus, and disabled states.

Frequently Asked Questions about affordance-signifiers

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

FAQPage Schema
How do I make interactive UI elements obvious in a flat design?▼

To make interactive UI elements obvious in flat design, you audit visible signifiers like borders, fills, and elevation, aligning signifier strength to action stakes to ensure perceivable static cues and stateful feedback.

What are signifiers in UX design and when do I need them?▼

Signifiers in UX are visual cues like shape, borders, and iconography that indicate interactivity. You need them when users cannot perceive affordances, particularly in flat-design interfaces or custom controls lacking stateful feedback.

How do I audit UI components for missing hover and focus states?▼

Auditing UI components for hover and focus states requires reviewing buttons, links, and inputs for perceivable static cues, then ensuring full coverage of hover, focus, active, and disabled feedback while detecting hover-only anti-patterns.

How should signifier strength match primary versus destructive actions?▼

Signifier strength should match action stakes by applying stronger visual cues to primary and destructive actions, ensuring users instantly recognize high-stakes interactions compared to secondary or tertiary controls.

Why does my UI design suffer from hover-only affordance cues?▼

UI design suffers from hover-only affordance cues when interactive elements lack static signifiers, making interactivity invisible on touch devices or to users who do not mouse over the element.

Related Skills

Explore More Design & Creative Skills→
zm2231zm2231

prototype-review

Review prototypes, wireframes, and mockups for usability, accessibility, and design consistency.

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
stefandevostefandevo
7

Frontend UI/UX Skill

Develop and refine React and Vue user interfaces with component-based architecture.

Community
Intermediate
jacob-balslevjacob-balslev
1

semiotics

Diagnose misinterpretation risk in interfaces by analyzing signifier-to-signified mappings.

Community
Intermediate