How does this Claude skill improve my frontend code?

It provides specific patterns and best practices for styling elements so that users immediately understand which parts of your UI are interactive.

Can I use this for mobile app design?

Absolutely. The principles of affordances apply to all digital interfaces, including touch-based mobile controls and desktop web applications.

What are affordances in the context of UI design?

Affordances are visual properties that hint at how an element functions, such as a button looking 'pressable' due to its shape or shadow.

Does this skill help with accessibility?

Yes, by emphasizing clear signifiers and distinct interactive states, it helps create predictable interfaces that are easier for all users to navigate.

UX Design Principles: Affordances

Name: UX Design Principles: Affordances
Author: vjrivmon

byvjrivmon

デザインツール

Guides the creation of intuitive user interfaces by implementing visual cues that suggest how elements should be used.

概要

This skill equips Claude with specialized knowledge in UI/UX affordances, the design principle where an object's properties suggest its functionality. It helps developers and designers create digital interfaces that users can navigate intuitively without instructions. By focusing on perceived affordances and signifiers, the skill assists in styling buttons, links, forms, and complex controls to maximize discoverability and minimize user error. Whether you are building a new design system or auditing an existing frontend, this skill ensures your interactive elements provide the right visual feedback to the user.

主な機能

0 GitHub stars
Optimization of visual signifiers like labels, icons, and state indicators
Implementation of perceived affordances for digital UI components
Identification of UX anti-patterns such as non-obvious clickable areas
Analysis of 3D depth, elevation, and shadows to suggest interactivity
Guidance on hover, active, and visited states to enhance discoverability

ユースケース

Auditing existing web pages to improve the First Click Accuracy metric
Designing form layouts with intuitive input fields and clear action prompts
Refining CSS styles to ensure buttons and links look clearly interactive

概要

主な機能

0 GitHub stars
Optimization of visual signifiers like labels, icons, and state indicators
Implementation of perceived affordances for digital UI components
Identification of UX anti-patterns such as non-obvious clickable areas
Analysis of 3D depth, elevation, and shadows to suggest interactivity
Guidance on hover, active, and visited states to enhance discoverability

ユースケース

Auditing existing web pages to improve the First Click Accuracy metric
Designing form layouts with intuitive input fields and clear action prompts
Refining CSS styles to ensure buttons and links look clearly interactive