Web Design

A practitioner-sourced reference for building web interfaces well. Synthesized from Refactoring UI, Tailwind CSS, shadcn/ui, Laws of UX, animations.dev, detail.design, Every Layout, Web Interface Guidelines, jakub.kr, userinterface.wiki (Raphael Salaja), and other authoritative sources.

Use this skill whenever you are building, reviewing, or improving a web interface.

Implementation Priority

When building or reviewing a UI, work through these tiers in order. Each tier depends on the ones above it — fixing a shadow detail is wasted effort if the layout is broken.

Tier 1: Structure (get this right first)

1. Semantic HTML. Correct elements (<button>, <nav>, <main>, headings in order). Everything else builds on this.
2. Layout. Grid/flex structure, spacing scale, content width constraints (max-w-prose, 12-col grid). Does the page hold together at every viewport?
3. Responsive behavior. Mobile-first, intrinsic sizing (auto-fill grids, clamp(), flex-wrap). No content hidden on small screens without reason.
4. Typography fundamentals. Type scale, line height (1.5 body, 1.1-1.25 headings), line length (max-width: 65ch), rem units for font sizes.

Tier 2: Visual System (the design backbone)