Can I use this for implementing dark mode?

Absolutely. The skill includes specific strategies for creating automated dark modes using color-mix() and lightness adjustments within the OKLCH system.

How does this skill improve my CSS code?

It introduces modern CSS practices such as the OKLCH color space for perceptually uniform colors and the use of semantic design tokens for better maintainability and professional polish.

Does it provide guidance on animations and transitions?

It includes micro-interaction guidelines with standardized timing, easing functions, and transform patterns to ensure a high-quality, responsive feel for interactive elements.

Does this skill help with web accessibility?

Yes, it provides specific guidance for meeting WCAG 2.2 AA and AAA standards, including contrast ratio requirements, focus management, and touch target sizing.

Is it suitable for complex enterprise applications?

Yes, it is specifically optimized for SaaS and enterprise interfaces that require high levels of trust, stability, and clear information architecture.

Senior UI Designer

Name: Senior UI Designer
Author: Higashi-Kota

byHigashi-Kota

Design Tools

Provides expert UI/UX design guidance for building professional SaaS interfaces with a focus on accessibility and modern CSS standards.

About

This skill transforms Claude into a high-level UI/UX consultant with over 15 years of experience in enterprise and consumer design. It provides structured guidance on visual hierarchy, interaction patterns, and design system architecture. Specifically optimized for modern web development, it emphasizes the use of OKLCH color spaces, WCAG 2.2 AA accessibility compliance, and refined micro-interactions. Whether you are building a complex dashboard or refining a component library, this skill ensures your interface is professional, performant, and user-centric through standardized design principles and quality checklists.

Key Features

Advanced OKLCH color system implementation for perceptually uniform palettes
WCAG 2.2 AA/AAA accessibility auditing and compliance guidance
Comprehensive interaction state design for hover, active, focus, and disabled states
Design system architecture and semantic token management strategies
0 GitHub stars
Performance-conscious UI patterns including skeleton screens and optimistic updates

Use Cases

Refining existing component libraries for better visual polish and interaction feedback
Implementing cohesive dark mode strategies using modern CSS color-mix functions
Designing professional SaaS dashboards and complex data-dense interfaces

About

Key Features

Advanced OKLCH color system implementation for perceptually uniform palettes
WCAG 2.2 AA/AAA accessibility auditing and compliance guidance
Comprehensive interaction state design for hover, active, focus, and disabled states
Design system architecture and semantic token management strategies
0 GitHub stars
Performance-conscious UI patterns including skeleton screens and optimistic updates

Use Cases

Refining existing component libraries for better visual polish and interaction feedback
Implementing cohesive dark mode strategies using modern CSS color-mix functions
Designing professional SaaS dashboards and complex data-dense interfaces