web-interface-design

Name: web-interface-design
Availability: InStock
Author: ratacat

Review web UI designs for clutter, contrast, and keyboard navigation.

49|9|Updated Dec 18, 2025

Search Tags:#typography #accessibility #layout #ui design #color system #ui-components

Ready to run

npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-interface-design
Source: https://github.com/ratacat/claude-skills/tree/main/skills/web-interface-design
Command: npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Use when designing or reviewing web UI, implementing forms/buttons/inputs, addressing clutter, and building a robust color/layout system. It centralizes domain-specific reference files to guide design decisions.

Core Features & Use Cases

Reference file index for typography, inputs, buttons, color systems, layout, and accessibility
Quick decision guidance to pick the right reference file
Universal quick references and design rules

Quick Start

Load and consult the references (typography.md, forms-and-inputs.md, color-systems.md) to address a UI issue, e.g., typography or spacing questions.

Frequently Asked Questions about web-interface-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix a cluttered web interface that's hard to read?▼

Cluttered interfaces benefit from visual hierarchy fixes using typography, spacing, and color systems. This Skill provides reference files for typography hierarchy, layout spacing, color contrast, and button/input design to make information scannable and clickable areas clear.

What accessibility standards should I apply to web UI design?▼

Accessible web design requires contrast ratios, keyboard navigation, focus states, and semantic form inputs. This Skill centralizes accessibility rules alongside typography and layout patterns to ensure users can navigate and interact regardless of ability.

How do I design consistent forms, buttons, and inputs across a site?▼

Consistency comes from reference files documenting forms, buttons, inputs, and color systems. This Skill indexes design decisions for these components so you apply the same patterns site-wide and avoid conflicting styles.

What's the best way to structure typography and spacing in responsive layouts?▼

Responsive layouts rely on typography hierarchy, proportional spacing rules, and layout grids. This Skill provides quick-reference guides for typography scales, responsive spacing, and layout patterns to maintain readability across screen sizes.

Can I use this for reviewing existing UI designs?▼

Yes. This Skill works for both designing new UI and reviewing existing designs against reference standards for typography, contrast, spacing, focus states, and component patterns to identify and fix visual or functional issues.