How does this skill help Claude code better?

It provides Claude with a specialized framework to suggest design improvements that make applications more intuitive and user-friendly without requiring extensive documentation.

What are UI affordances?

Affordances are visual properties of an interface element that suggest its functionality, such as a button looking 'clickable' or a slider appearing 'draggable.'

What is the difference between an affordance and a signifier?

An affordance is the inherent possibility of an action (like a button being clickable), while a signifier is the specific signal (like a label or icon) that communicates that possibility.

Does it support specific frontend frameworks?

The principles are universal and can be applied across any stack including React, Vue, Tailwind CSS, Material Design, and standard HTML/CSS.

Can this skill help with mobile design?

Yes, it includes specific patterns for touch targets, mobile-friendly controls like toggles, and gestures that are essential for high-quality mobile UX.

UX-UI Design Affordances

Name: UX-UI Design Affordances
Author: vjrivmon

byvjrivmon

0•

Design Tools

Implements intuitive UI design patterns that guide users toward intended actions through visual cues and interactive principles.

This skill provides Claude with specialized knowledge on UI affordances, enabling it to suggest and implement design elements that instinctively communicate their function to users. By leveraging principles from James Gibson and Don Norman, it helps developers create buttons, links, and forms that feel natural and discoverable, reducing user friction and cognitive load across web and mobile applications. It is particularly useful when building new interfaces or auditing existing frontends for usability and accessibility.

Key Features

01Offers metrics for measuring discoverability and interaction accuracy

02Detects and corrects UI anti-patterns like non-interactive text that mimics links

03Ensures accessibility through clear form fields and interactive element differentiation

04Implements visual signifiers like 3D shading, elevation, and hover states

050 GitHub stars

06Provides actionable guidelines for designing intuitive buttons and interactive controls

Use Cases

01Optimizing form fields to improve user completion rates and reduce input errors

02Designing a complex dashboard where interactive controls need to be distinguished from static data

03Reviewing a landing page to ensure all call-to-action buttons have clear visual affordances

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vjrivmon/app-gestion-familiar ux-ui

For use in Claude.ai and ChatGPT

Download Skill