UX/UI Affordances for Claude

概要

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.

主な機能

• Applies perceived affordances to make interactive elements like buttons and links intuitive.
• Identifies and fixes common UI anti-patterns like non-distinctive interactive text.
• Provides guidance on form design including placeholders, borders, and clear labels.
• 1 GitHub stars
• Implements visual signifiers such as labels and icons to clarify complex functions.
• Optimizes component states (hover, active, visited) to provide immediate user feedback.
• Utilizes depth, elevation, and 3D cues to suggest tactile interactivity.

ユースケース

• Refactoring existing frontend code to improve accessibility and usability metrics.
• Developing complex administrative dashboards that require minimal user onboarding.
• Designing high-conversion landing pages with clear, clickable call-to-action elements.