affordance-signifiers

Community

Make interactivity obvious at a glance.

AuthorHDeibler
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: affordance-signifiers
Download link: https://github.com/HDeibler/universal-design-principles/archive/main.zip#affordance-signifiers

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.