Does it support mobile-first development?

Absolutely. It prioritizes mobile-first CSS patterns and fluid layouts that gracefully scale from mobile devices to large desktop screens.

Does this skill work with specific CSS frameworks?

The principles are framework-agnostic and can be applied to any styling solution including Tailwind CSS, CSS-in-JS, SASS, or standard CSS.

Can this skill help me create a design system?

Yes, it includes guidelines for establishing design tokens, typographic scales, and consistent spacing systems to ensure UI harmony.

How does it help with web accessibility?

It provides specific patterns for WCAG 2.1 compliance, including proper color contrast, ARIA attributes, keyboard navigation, and semantic HTML structures.

UI/UX Design & Frontend Principles

Name: UI/UX Design & Frontend Principles
Author: karchtho

bykarchtho

设计工具

Implements professional UI/UX design principles, accessibility standards, and responsive layout patterns for modern frontend development.

关于

This skill transforms Claude into a senior UI/UX engineer, providing expert guidance on visual hierarchy, design system architecture, and user experience best practices. It assists developers in implementing mobile-first responsive designs, ensuring WCAG 2.1 accessibility compliance, and creating consistent component libraries using design tokens. By applying core design principles to layouts, styling, and user flows, it helps bridge the gap between functional code and polished, user-centric interfaces across any frontend framework.

主要功能

Professional interaction design and microinteraction patterns
Visual hierarchy and information architecture guidance
0 GitHub stars
Design system tokenization for consistent colors and spacing
Mobile-first responsive design and fluid typography patterns
WCAG 2.1 AA accessibility compliance and semantic HTML

使用场景

Designing user-friendly forms with complex validation and feedback states
Building accessible and responsive component libraries from scratch
Refactoring existing layouts to improve visual consistency and UX

关于

主要功能

Professional interaction design and microinteraction patterns
Visual hierarchy and information architecture guidance
0 GitHub stars
Design system tokenization for consistent colors and spacing
Mobile-first responsive design and fluid typography patterns
WCAG 2.1 AA accessibility compliance and semantic HTML

使用场景

Designing user-friendly forms with complex validation and feedback states
Building accessible and responsive component libraries from scratch
Refactoring existing layouts to improve visual consistency and UX