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

0•

设计工具

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

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.

主要功能

01Advanced OKLCH color system implementation for perceptually uniform palettes

02WCAG 2.2 AA/AAA accessibility auditing and compliance guidance

03Comprehensive interaction state design for hover, active, focus, and disabled states

04Design system architecture and semantic token management strategies

050 GitHub stars

06Performance-conscious UI patterns including skeleton screens and optimistic updates

使用场景

01Refining existing component libraries for better visual polish and interaction feedback

02Implementing cohesive dark mode strategies using modern CSS color-mix functions

03Designing professional SaaS dashboards and complex data-dense interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add higashi-kota/drawing-explorer senior-ui-designer

For use in Claude.ai and ChatGPT

主要功能

01Advanced OKLCH color system implementation for perceptually uniform palettes

02WCAG 2.2 AA/AAA accessibility auditing and compliance guidance

03Comprehensive interaction state design for hover, active, focus, and disabled states

04Design system architecture and semantic token management strategies

050 GitHub stars

06Performance-conscious UI patterns including skeleton screens and optimistic updates

使用场景

01Refining existing component libraries for better visual polish and interaction feedback

02Implementing cohesive dark mode strategies using modern CSS color-mix functions

03Designing professional SaaS dashboards and complex data-dense interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add higashi-kota/drawing-explorer senior-ui-designer

For use in Claude.ai and ChatGPT