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

0•

Herramientas de Diseño

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.

Características Principales

010 GitHub stars

02Optimization of visual signifiers like labels, icons, and state indicators

03Implementation of perceived affordances for digital UI components

04Identification of UX anti-patterns such as non-obvious clickable areas

05Analysis of 3D depth, elevation, and shadows to suggest interactivity

06Guidance on hover, active, and visited states to enhance discoverability

Casos de Uso

01Auditing existing web pages to improve the First Click Accuracy metric

02Designing form layouts with intuitive input fields and clear action prompts

03Refining CSS styles to ensure buttons and links look clearly interactive

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vjrivmon/handwriting-ocr ux-ui

For use in Claude.ai and ChatGPT

Download Skill