Visual Design Foundations

This one's a solid reference for building design systems from scratch or fixing inconsistent visual hierarchies. It generates actual CSS custom properties, spacing scales, and color tokens you can drop into projects. The typography guidelines with specific line-height ratios and the 8-point grid system are especially practical. What I like is the accessibility focus with WCAG contrast checking and the dark mode implementation strategy. It's less about creative design decisions and more about the systematic foundation work that prevents your UI from looking like a patchwork of random spacing and colors.

skills.sh installs: 14.1K
GitHub stars: 42.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wshobson/agents --skill visual-design-foundations --agent claude-code

Installs into .claude/skills of the current project.

Files

Visual Design Foundations

Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals.

When to Use This Skill

Establishing design tokens for a new project
Creating or refining a spacing and sizing system
Selecting and pairing typefaces
Building accessible color palettes
Designing icon systems and visual assets
Improving visual hierarchy and readability
Auditing designs for visual consistency
Implementing dark mode or theming

Core Systems

1. Typography Scale

Modular Scale (ratio-based sizing):

:root {
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
}

Line Height Guidelines: