skills.rest
ratacat
ratacatCOMMUNITY
Explore all skills by this author →
GitHub

web-interface-design

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
One-click install
npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
faionfaionfaionfaion
4

faion-frontend-developer

Develops user interfaces with Tailwind CSS, Storybook, and WCAG compliance.

Community
Advanced
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
belokonmbelokonm
8

frontend-ui-ux-engineer

Transform basic React components into polished interfaces with typography, color, motion, and accessibility.

Community
Advanced