Can this skill help reduce user errors in my application?

Absolutely. By providing clear signifiers and constraints, the skill guides Claude to create interfaces where the correct action is obvious, reducing 'mistaken clicks' and improving the Error Rate metric.

Does this skill work with specific CSS frameworks?

Yes, the principles of affordances are framework-agnostic and can be applied to Tailwind CSS, Material UI, Bootstrap, or custom CSS systems.

What are affordances in the context of this Claude skill?

Affordances are properties of a UI element that suggest its use. This skill helps Claude design elements—like buttons that look pressable—so users understand how to interact with them without instructions.

How does this skill improve my frontend development process?

It provides Claude with specific design rules and best practices, ensuring that the code it generates for UI components follows high-level usability standards and psychological design principles.

UX/UI Affordances for Claude

Name: UX/UI Affordances for Claude
Author: vjrivmon

byvjrivmon

•

设计工具

Implements intuitive interface design principles by ensuring interactive elements suggest their own functionality through visual cues.

This skill enhances Claude's UI/UX capabilities by applying the fundamental principle of affordances—visual and physical properties that hint at how a digital object should be used. Based on the seminal work of James Gibson and Don Norman, it provides domain-specific guidance for creating buttons, links, forms, and controls that users can navigate instinctively. By incorporating signifiers, proper interaction states, and clear visual feedback, this skill helps developers minimize user friction, reduce error rates, and significantly improve the discoverability of features within any digital product.

主要功能

01Applies perceived affordances to make interactive elements like buttons and links intuitive.

02Identifies and fixes common UI anti-patterns like non-distinctive interactive text.

03Provides guidance on form design including placeholders, borders, and clear labels.

041 GitHub stars

05Implements visual signifiers such as labels and icons to clarify complex functions.

06Optimizes component states (hover, active, visited) to provide immediate user feedback.

07Utilizes depth, elevation, and 3D cues to suggest tactile interactivity.

使用场景

01Refactoring existing frontend code to improve accessibility and usability metrics.

02Developing complex administrative dashboards that require minimal user onboarding.

03Designing high-conversion landing pages with clear, clickable call-to-action elements.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vjrivmon/setup-software-ia ux-ui

For use in Claude.ai and ChatGPT

Download Skill