visual-design-foundations Skill (wshobson) for Claude Code

Gives Claude a working system for type, color, spacing and icons, so designers and front-end developers get consistent design tokens and style guides.

Installs: 13.9K; on skills.sh
Stars: 42.1K; on GitHub
Files: 3; besides SKILL.md
Updated: Oct 2026; last repo commit

The skill covers four areas: a typography scale, an 8-point spacing system, semantic color tokens and icon sizing. SKILL.md carries CSS custom properties, a Tailwind config, a dark mode pattern and a contrast checker, and three reference files go deeper on color, type and spacing.

It is design guidance and example code. The skill bundles no scripts, and Claude writes CSS, Tailwind or React files in your project only when you ask.

Good for

Front-end developers setting up design tokens or a Tailwind theme
Designers building or auditing a style guide
Teams adding dark mode or checking color contrast

Install visual-design-foundations

Claude Code

Copy this prompt.

Install the visual-design-foundations skill in Claude Code. Run this command:

npx skills add wshobson/agents --skill visual-design-foundations

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The README says the skills routes install a skill without the plugin's agents, commands or hooks. Pick the plugin only if you want the whole ui-design set.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to Use This Skill
Core Systems
1. Typography Scale
2. Spacing System
3. Color System
Quick Start: Design Tokens in Tailwind
Typography Best Practices
Font Pairing
Responsive Typography
Font Loading
Color Theory
Contrast Requirements (WCAG)
Dark Mode Strategy
Color Accessibility
Spacing Guidelines
Component Spacing

Key facts

Author: wshobson
Repository: wshobson/agents
Installs on skills.sh: 13,880 as of 2026-11-02
GitHub stars: 42,081 for the whole wshobson/agents repo
License: MIT (repo README and ui-design plugin.json)
Last repo commit: 2026-10-30
What is inside: 4 files including SKILL.md: references/color-systems.md, references/typography-systems.md and references/spacing-iconography.md. It bundles no scripts.
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass
Part of: The ui-design plugin (the repo has 3 agents, 4 commands and 9 skills in that folder)

What it includes

Modular font sizes, line heights and fluid type
A font size ladder from 12px to 48px, line height guidelines by text type, clamp() fluid headings and font-display: swap loading. typography-systems.md goes deeper on pairing, rhythm and OpenType features.
Typography scale
8-point grid tokens and component spacing
Spacing tokens from 4px to 64px, component spacing ranges and a vertical rhythm example.
Spacing system
Semantic tokens, neutrals and dark mode variables
Brand, semantic and neutral color tokens, a data-theme dark mode, and WCAG contrast targets of 4.5:1 for body text and 3:1 for large text and UI.
Color system
A tailwind.config.js with fonts, sizes, colors and spacing
An extended theme config using Inter and JetBrains Mono, size and line height pairs, a brand color ramp and extra spacing values.
Tailwind quick start
A TypeScript function that computes contrast ratio
A getContrastRatio helper based on WCAG relative luminance. color-systems.md has a fuller WCAG checker and accessible color pairs.
Contrast checker
Icon size scale and an SVG icon component
Sizes from 12px to 32px and a React Icon component using an SVG sprite. spacing-iconography.md adds icon buttons, sprite generation and library integration.
Iconography
Seven rules and six common mistakes
Examples are limiting font weights to 2 or 3 per family, naming tokens by purpose and testing touch targets.
Best practices and common issues

From the official docs

Permissions

Low risk

The skill bundles no scripts. One reference example is a Node script that reads an icon folder and writes a sprite, which Claude would only create if you ask.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

An example script imports svgo and writes files
The icon sprite example in spacing-iconography.md uses readdir, readFile and writeFile with the svgo package. Check the input and output paths before you run a script Claude adapts from it. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only switch is documented. Ask Claude to propose tokens without writing files.
Sign-in and keys	No API key or credential is mentioned in SKILL.md or the reference files.
Scopes	Claude writes CSS, config and component files in your project when you ask

Questions

What does the visual-design-foundations skill do?

It gives Claude a consistent system for typography, spacing, color and icons. Claude uses it when you set up design tokens, build a style guide, check contrast or plan dark mode.

How do I install it?

Use the install box above. The skills CLI route installs only this skill. The plugin routes install the whole ui-design plugin, which also adds agents and commands.

Does it generate designs or images?

No. It produces CSS, Tailwind config and React code, plus guidance. SKILL.md has no image or Figma step.

Does it need Tailwind or React?

No. The core systems are plain CSS custom properties. The Tailwind config and the Icon component are examples you can skip.

Does it check WCAG contrast?

It lists the WCAG ratios and includes a contrast function in TypeScript, plus a longer checker in color-systems.md. Claude can write that code into your project, but the skill itself does not run a check.

Is it safe to install?

It bundles no scripts. One reference example builds an icon sprite with Node and the svgo package, so if you ask Claude to use it, it may add a dependency and read your icon folder.

Information

updated Nov 2, 2026

Repository: wshobson/agents
Folder: plugins/ui-design/skills/visual-design-foundations

wshobson/agents skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6

Using skills in Claude · support.claude.com
wshobson/agents README · github.com
SKILL.md · github.com
color-systems.md · github.com
typography-systems.md · github.com
spacing-iconography.md · github.com