visual-design-foundations

visual design foundations

wshobson ↓ 10k

Claude Code

View source ↗

What it does

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

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

visual design foundations

Source

Repository: https://github.com/wshobson/agents

visual-design-foundations FAQ

What does the visual-design-foundations skill do?

Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency. Establishing design tokens for a new project Creating or refining a spacing and sizing system

How do I install visual-design-foundations?

Run: npx -y skills add https://github.com/wshobson/agents --skill visual-design-foundations --agent claude-code — the source lives at github.com/wshobson/agents.

Maintain visual-design-foundations?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![visual-design-foundations on getagentictools](https://getagentictools.com/badge/skills/wshobson-agents-visual-design-foundations.svg)](https://getagentictools.com/skills/wshobson-agents-visual-design-foundations?ref=badge)

npx agentictools info skills/wshobson-agents-visual-design-foundations

The second line is the CLI lookup for this page — handy in READMEs and docs.