What is the visual-design-foundations skill?
The visual-design-foundations skill is a SKILL.md in the ui-design plugin of the wshobson/agents repository. It teaches an AI coding agent typography scales, an 8 point spacing grid, semantic colour tokens and iconography, so generated interfaces share one cohesive and accessible visual system.
A 0.75rem to 3rem type scale opens the SKILL.md of visual-design-foundations, a skill in the wshobson/agents ui-design plugin. Its description covers typography, colour theory, spacing and iconography for cohesive designs.
The intent is to give an agent constraints before it writes CSS. Limited choices keep generated screens consistent, which the skill lists as its first best practice.
The three core systems
- Typography: a modular scale from xs at 12px to 5xl at 48px, with line heights of 1.1 to 1.3 for headings, 1.5 to 1.7 for body and 1.2 to 1.4 for labels.
- Spacing: an 8 point grid with steps from 4px up to 64px, written as CSS custom properties.
- Colour: semantic tokens for brand, success, warning, error and info, plus a gray ramp from 50 to 900.
A Tailwind quick start
The file also shows the same tokens inside a tailwind.config.js, with Inter and JetBrains Mono as the example font families. Treat those as sample values, because the skill is about the structure and not those choices.
Who the visual-design-foundations skill is for
Best for
- New projects that need a spacing, type and colour baseline before components exist.
- Cleaning up magic numbers, inconsistent spacing and font overload in an existing stylesheet.
- Related: typeset and polish.
Not for
- Deciding what to emphasise on a page. Related: high-end-visual-design.
- Full token pipelines with theming and Figma sync, which design-system-patterns covers.
- WCAG audits. The skill says to test contrast but does not run one.
Use it with UiChemy
Foundations decided up front carry through conversion. UiChemy Figma to WordPress converts a finished Figma design into Elementor or Gutenberg pages, and Composer then edits spacing and type visually in the builder. Click Get Started on uichemy.com.
How to install Visual Design Foundations Skill: Type, Color, Spacing
gh skill install wshobson/agents visual-design-foundationsCheck GitHub CLI
The
gh skillcommand requires GitHub CLI 2.90 or later. Rungh --versionand upgrade first if your version is older.Install the skill
Run
gh skill install wshobson/agents visual-design-foundationsand select your coding tool when prompted. The README says this reads the skill from GitHub without cloning the repository.Or install the whole plugin
Inside Claude Code run
/plugin marketplace add wshobson/agents, then/plugin install ui-design@claude-code-workflows. This adds the ui-design plugin that contains the skill, with its agents, commands and hooks.Invoke it
Try a prompt such as: use visual-design-foundations to set up the base stylesheet for this project. Name the framework so tokens land in the right file.
Check that it loaded
Ask the agent to build a settings card. It should use spacing from the 8 point scale, sizes from the modular type scale and semantic colour tokens, with no arbitrary pixel values.
Key features
- Modular type scaleFont sizes run from 0.75rem to 3rem as CSS variables, giving the agent a fixed ladder instead of arbitrary pixel values.
- Line height tableHeadings get 1.1 to 1.3, body text 1.5 to 1.7 and UI labels 1.2 to 1.4.
- 8 point spacing gridSpacing tokens step from 0.25rem to 4rem, so padding and gaps always land on the grid.
- Semantic colour tokensPrimary with hover and active states, success, warning, error and info, written by purpose rather than appearance.
- Neutral rampA gray scale from 50 to 900 gives backgrounds, borders and text a consistent base.
- Tailwind configurationA tailwind.config.js example maps font families, sizes with line heights, brand colours and custom spacing.
- Seven best practicesLimit choices, document decisions, test accessibility, use semantic tokens, design mobile first, keep vertical rhythm and use two to three font weights.
- Common issue checklistInconsistent spacing, poor contrast, font overload, magic numbers, missing hover, focus and disabled states, and no dark mode plan.
- Three reference filescolor-systems.md, spacing-iconography.md and typography-systems.md go deeper on each system.
Frequently asked questions
What is the visual-design-foundations skill?
It is a SKILL.md in the ui-design plugin of the wshobson/agents repository. It gives an AI coding agent typography, colour, spacing and iconography fundamentals so it can build cohesive, accessible visual systems instead of improvising values screen by screen.
How do I install the visual-design-foundations skill?
Run gh skill install wshobson/agents visual-design-foundations and choose your coding tool at the prompt. GitHub CLI 2.90 or later is required. Alternatively add the plugin with /plugin marketplace add wshobson/agents and /plugin install ui-design@claude-code-workflows.
What spacing system does it use?
An 8 point grid. The CSS variables run from --space-1 at 4px through --space-16 at 64px, covering 8, 12, 16, 20, 24, 32, 40 and 48px along the way. Everything the agent pads or gaps should come from those steps.
What line heights does it recommend?
Headings use 1.1 to 1.3, body text uses 1.5 to 1.7 and UI labels use 1.2 to 1.4. The numbers appear in a small table in the SKILL.md, next to the modular type scale they pair with.
Does it cover icons?
Iconography is in the description and in the spacing-iconography.md reference file, and the best practices mention touch targets. For a dedicated icon specification, a skill built for icon systems is a closer fit.
Which AI coding agents can use the skill?
The repository README describes support for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, Google Antigravity and Pi through different install routes. Skills-only installs ask which coding tool you use, so pick yours at the prompt.
What license does the skill use?
GitHub lists the wshobson/agents repository as MIT licensed, and the visual-design-foundations skill sits inside its ui-design plugin. Confirm the license in the repository before copying the folder into a product of your own.