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

0•

Design Tools

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

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

01Systematic spacing and typography scales based on a 4px grid system

02WCAG-compliant accessibility auditing for contrast and touch targets

030 GitHub stars

04Component-specific design patterns for forms, buttons, and navigation elements

05Dark mode color system generation and CSS implementation patterns

06Automated visual hierarchy reviews and action pyramid optimization

Use Cases

01Establishing a consistent design system with spacing scales and color palettes

02Designing responsive, accessible form systems with proper validation states

03Refactoring a cluttered dashboard to improve visual hierarchy and readability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ratacat/claude-skills web-interface-design

For use in Claude.ai and ChatGPT

Download Skill