Does it support accessibility and WCAG standards?

Yes, it includes specific references for WCAG contrast ratios, minimum touch targets (44x44px), and focus state requirements for screen readers.

Does it generate actual CSS code?

Yes, it provides CSS implementation patterns, variable structures, and common styles based on the design decisions it recommends.

How does this skill improve my web layouts?

It applies a systematic 4px spacing scale and visual hierarchy principles to ensure layouts have proper breathing room and a clear focal point.

Can it help me implement Dark Mode?

Absolutely. It provides essential dark mode guidelines such as using desaturated colors and specific off-black backgrounds like #121212.

When should I not use this skill?

Avoid using this for backend architecture, marketing copy, or mobile native patterns (iOS/Android), as it is specialized for web-based interfaces.

Web Interface Design

Name: Web Interface Design
Author: ratacat

byratacat

Design Tools

Applies professional UI/UX principles to create clean, accessible, and high-conversion web interfaces through systematic design patterns.

About

The Web Interface Design skill serves as a comprehensive design system consultant within Claude, providing domain-specific guidance for creating professional frontend layouts. It utilizes specialized reference modules for typography, forms, button hierarchies, and color systems to ensure every interface element follows established best practices like the 4px spacing scale and WCAG accessibility standards. Whether you are fixing a cluttered layout, implementing a complex form, or performing a visual hierarchy audit, this skill helps translate high-level design theory into production-ready CSS and component structures.

Key Features

Systematic spacing and typography scales based on a 4px grid system
WCAG-compliant accessibility auditing for contrast and touch targets
0 GitHub stars
Component-specific design patterns for forms, buttons, and navigation elements
Dark mode color system generation and CSS implementation patterns
Automated visual hierarchy reviews and action pyramid optimization

Use Cases

Establishing a consistent design system with spacing scales and color palettes
Designing responsive, accessible form systems with proper validation states
Refactoring a cluttered dashboard to improve visual hierarchy and readability

About

Key Features

Systematic spacing and typography scales based on a 4px grid system
WCAG-compliant accessibility auditing for contrast and touch targets
0 GitHub stars
Component-specific design patterns for forms, buttons, and navigation elements
Dark mode color system generation and CSS implementation patterns
Automated visual hierarchy reviews and action pyramid optimization

Use Cases

Establishing a consistent design system with spacing scales and color palettes
Designing responsive, accessible form systems with proper validation states
Refactoring a cluttered dashboard to improve visual hierarchy and readability