web-design

Installation
SKILL.md

Web Design

Focus on clear hierarchy, generous spacing, and restrained styling to make interfaces feel intentional.

Visual Hierarchy & Focus

  • Group related elements by proximity and aligned edges; avoid scattered, evenly-spaced elements that compete for attention.
  • Add hierarchy with weight before color: font-weight: 600 and size changes beat random accent colors.
  • Reduce noise: fewer borders; use spacing, background tints, or subtle dividers instead of heavy outlines.

Layout & Spacing

  • Use a consistent scale (4px or 8px).
  • Make vertical rhythm obvious: larger gaps between sections than between labels/inputs.
  • Set max widths for readability (e.g. max-width: 1280px for pages, 68-70ch for text blocks).
  • Pad clickable areas generously (12–16px vertical, 16–24px horizontal) so touch targets feel confident.

Typography

Related skills
Installs
18
GitHub Stars
17
First Seen
Jan 24, 2026