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.

Install to Claude Code

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