web-interface-design_skill

Overview

This skill helps design and review web interfaces to make them clearer, more usable, and visually balanced. It focuses on hierarchy, readability, form behavior, color systems, layout, and accessibility so users can complete goals without friction. Use it to diagnose problems, suggest fixes, and produce practical implementation guidance.

How this skill works

The skill inspects interface issues and maps each problem to a concise set of reference patterns: typography, spacing, forms, buttons, color systems, UI components, layout, visual hierarchy, and accessibility. For a given task it reads only the relevant guidance and returns targeted recommendations, checks, and concrete measures (sizes, contrast ratios, spacing scale, touch targets). It also provides a short review protocol to validate changes.

When to use it

• Designing or reviewing web UI to improve clarity and task flow
• Implementing or fixing forms, inputs, validation, or error states
• Resolving visual hierarchy problems so users know what to click
• Creating color systems, dark mode, or fixing contrast issues
• Building responsive layouts, spacing scales, and consistent grids

Best practices

• Establish a single primary action per view and style it for high contrast
• Use a consistent spacing scale (4px base) and stick to rhythm for vertical spacing
• Keep body text at ~16px with 1.5 line-height and headings scaled by a maximum 3:1 ratio
• Place labels above fields, ensure touch targets ≥44×44px, and show clear error states beyond color
• Follow WCAG contrast minimums (4.5:1 normal text, 3:1 large text) and include visible focus states

Example use cases

• Audit a page where users miss the main CTA and propose a new button hierarchy and visual emphasis
• Redesign a complex form with validation, accessible labels, and improved field spacing
• Create a color palette and dark mode adjustments that maintain contrast and reduce saturation
• Refactor a cramped dashboard into a consistent grid using the spacing scale and rhythm
• Fix accessibility issues: low contrast, missing focus outlines, or color-only status indicators