What is the difference between an affordance and a signifier?

An affordance is the perceived possibility of action, while a signifier is a specific signal (like a text label or an icon) that explicitly points that action out.

What is an affordance in UI design?

An affordance is a visual property of an interface element that suggests its function, such as a 3D effect on a button suggesting it can be pressed.

How does this Claude skill help developers?

It provides domain-specific guidance to identify design flaws where elements don't clearly communicate their function and offers best-practice implementation patterns.

Does this skill support mobile UI design?

Yes, it includes principles for touch targets, sliders, and toggle switches that are essential for intuitive mobile and responsive interfaces.

Can this skill help reduce user errors?

Absolutely. By following these affordance principles, you improve 'First Click Accuracy' and reduce the 'Error Rate' of users interacting with non-functional areas.

UX Affordances Guide

Name: UX Affordances Guide
Author: majiayu000

bymajiayu000

•

Design Tools

Implements intuitive UI/UX design principles by ensuring interactive elements clearly suggest their intended functionality to users.

The UX Affordances skill provides a comprehensive framework for applying the psychological principles of James J. Gibson and Don Norman to digital interface design. It helps Claude understand and suggest visual properties that communicate how an object should be used—such as making a button look pressable or a link look clickable—without the need for explicit instructions. By using this skill, developers can identify anti-patterns like non-interactive text that resembles a link or flat controls that lack hover states, leading to higher discoverability scores and lower user error rates in their web and mobile applications.

Key Features

01Identification and correction of common UI design anti-patterns

02Metrics-based assessment for discoverability and interaction accuracy

03Implementation of perceived affordances for digital UI components

04Optimization of interactive states including hover, focus, and active triggers

05Guidance on using signifiers like labels and icons to complement interactions

0664 GitHub stars

Use Cases

01Designing accessible and intuitive web forms and input controls

02Auditing existing UI components to improve user discoverability and navigation

03Creating cohesive design systems with consistent interactive signifiers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add majiayu000/claude-skill-registry affordances

For use in Claude.ai and ChatGPT

Download Skill