How does this skill help with web accessibility?

It applies WCAG 2.1 guidelines to your project, recommending semantic HTML, appropriate ARIA roles, and high-contrast color palettes to ensure inclusivity for all users.

What UI frameworks is this skill compatible with?

While the principles are framework-agnostic, it is highly compatible with modern frontend environments like React, Vue, and Tailwind CSS through its focus on component-driven design.

Can this skill help me build a design system from scratch?

Yes, it provides a structured framework for defining design tokens, building component hierarchies, and establishing a consistent 8pt grid spacing system.

Does it support mobile-first responsive design?

Absolutely. It includes specific strategies for breakpoints, touch-target optimization (44px+), and adaptive navigation patterns like tab bars and side menus.

UI/UX Design Expert

Name: UI/UX Design Expert
Author: miles990

bymiles990

•

デザインツール

Optimizes user interfaces and experiences using professional design principles, accessibility standards, and systematic patterns.

概要

This skill empowers Claude with deep expertise in UI/UX design, bridging the gap between functional code and exceptional user experience. It provides domain-specific guidance on interface design principles, accessibility compliance (WCAG 2.1), usability evaluation based on Nielsen's heuristics, and the implementation of scalable design systems. Whether you are building mobile-first responsive layouts, establishing design tokens, or auditing an existing application for usability, this skill ensures your project follows industry best practices for engagement and inclusivity.

主な機能

Implementation of systematic 8pt grid layouts and spacing tokens
Strategic responsive design planning for mobile, tablet, and desktop
Comprehensive WCAG 2.1 accessibility auditing and remediation
1 GitHub stars
Design system architecture including semantic coloring and component libraries
Usability evaluation using Nielsen's 10 Heuristic principles

ユースケース

Creating intuitive interaction patterns and navigation flows for new features
Developing a robust and scalable design system for complex web applications
Auditing and fixing accessibility gaps to meet AA or AAA compliance standards

概要

主な機能

Implementation of systematic 8pt grid layouts and spacing tokens
Strategic responsive design planning for mobile, tablet, and desktop
Comprehensive WCAG 2.1 accessibility auditing and remediation
1 GitHub stars
Design system architecture including semantic coloring and component libraries
Usability evaluation using Nielsen's 10 Heuristic principles

ユースケース

Creating intuitive interaction patterns and navigation flows for new features
Developing a robust and scalable design system for complex web applications
Auditing and fixing accessibility gaps to meet AA or AAA compliance standards