Skip to content
UXClaim
UX Design

UX Designer Skill

Comprehensive UX/UI design guidance based on modern best practices for designing interfaces, reviewing code, and applying WCAG 2.2 AA standards.

UX Designer Skill loads Claude Code with a working knowledge of modern interface design. It covers layout systems, typography scales, colour theory, responsive patterns, and interaction design. When you ask Claude to build or review a UI component, it draws on these principles instead of guessing.

What it covers

The skill is organized around four areas. First, component design guidance for building new interfaces. It knows when to reach for a modal versus an inline expansion, how to structure form layouts for scannability, and when progressive disclosure helps versus when it hides critical information.

Second, code review from a UX perspective. Point it at a component and it will flag issues like insufficient touch targets, missing focus states, low contrast text, or interaction patterns that break user expectations.

Third, WCAG 2.2 AA compliance. The skill understands the full set of success criteria and can identify when a component fails to meet them. It goes beyond automated checks to catch issues like logical reading order and meaningful sequence that require human judgment.

Fourth, interaction design patterns. It knows established conventions for navigation, state feedback, error recovery, and transitions. When you are deciding between design approaches, it can articulate the tradeoffs in terms of usability rather than aesthetics alone.

Best used for

Frontend teams building component libraries, product designers reviewing pull requests for UX quality, and solo developers who want a second opinion on their interface decisions.

Frequently asked questions

How does this skill help review UI code for accessibility?
The skill analyzes components for WCAG 2.2 AA compliance, flagging issues like insufficient touch targets, missing focus states, low contrast text, and logical reading order problems that automated tools miss. Point it at code and it identifies both technical and human-judgment accessibility gaps.
Can this skill help me design form layouts?
Yes. The skill provides guidance on form structure for scannability, helps you decide between input types and layouts, and advises on progressive disclosure to balance information density with clarity. It applies modern best practices for form usability.
What interaction design patterns does this skill know?
It covers established conventions for navigation, state feedback, error recovery, and transitions. When choosing between design approaches, it articulates tradeoffs in terms of usability rather than aesthetics alone, helping you make informed decisions.
Is this skill useful for solo developers without a design team?
Absolutely. Solo developers can use it as a second opinion on interface decisions, component design guidance, and UX-focused code reviews. It applies modern design principles to help you build more usable interfaces without needing a dedicated designer.
How does this differ from automated accessibility checkers?
Beyond automated checks, the skill catches issues requiring human judgment like logical reading order and meaningful sequence in WCAG compliance. It also provides strategic UX guidance on component choices and interaction patterns that tools can't evaluate.
Can this skill review my component library for UX quality?
Yes. Frontend teams can use it to review pull requests for UX quality, ensuring components follow layout systems, typography scales, color theory, and responsive patterns. It helps maintain consistent user experience across your library.
What's included in the component design guidance?
The skill covers when to use modals versus inline expansions, form layout structure for scannability, progressive disclosure decisions, typography scales, color theory, and responsive design patterns. It helps you choose the right component for each interaction.
Does this skill work with modern UI frameworks?
Yes. The skill provides UX/UI design guidance that applies across frameworks. It reviews code from a UX perspective regardless of whether you're using React, Vue, or other frameworks, focusing on user experience rather than framework specifics.

Glossary

WCAG 2.2 AA
Web Content Accessibility Guidelines level AA—an international standard for making digital interfaces accessible to users with disabilities, covering vision, hearing, mobility, and cognitive needs.
Progressive Disclosure
A design technique that shows only essential information initially and reveals additional details as needed, reducing cognitive load while keeping advanced options available.
Touch Target
The interactive area a user can tap or click on a screen. Minimum size guidelines (typically 44x44 pixels) ensure usability on mobile and touchscreen devices.
Focus State
The visual indication showing which interactive element is currently selected for keyboard navigation or interaction, critical for accessibility and keyboard-only users.
Interaction Pattern
Established, recognizable conventions for how users interact with interface elements—like how navigation menus work or how errors are communicated—that create predictable experiences.

More in UX Design

All →
UX Design

Canvas Design

Creates beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, designs, and static pieces.

ComposioHQ
UX Design

Claude Design

AI design workspace for prototyping, design systems, and marketing collateral using Claude's vision model and conversation-to-artifact workflow.

Julpygo
UX Design

Design Thinking Skills

Claude-powered Design Thinking coach guiding teams from user research through shipped solutions with phase-by-phase methods, templates, and facilitation scri...

rastian
UX Design

Eagle Skills

Expert UX audits, product diagnostics, ad review, and AI detection for Claude Code with 65+ UX laws and anti-slop filtering.