Guide · Agent skill
How to use the Visual Design Foundations agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Visual Design Foundations skill gives an AI agent a consistent set of visual rules: a typography scale, an 8-point spacing grid, semantic color tokens, WCAG contrast targets, dark mode variables and icon sizing. This guide explains what the skill does, how to install it, how to ask for work that triggers it, and where its limits are. By the end you will be able to get CSS custom properties, Tailwind config snippets and React icon components that follow these rules.
Visual Design Foundationswshobson/agents · MIT Download the skill Quick start
- 1Download the ZIP. Get the visual-design-foundations ZIP from this page and unzip it. Confirm SKILL.md and the three files in references/ are present.
- 2Choose where to install. Put the folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder to limit it to that project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Ask for design work in plain language. Describe the task, such as setting up design tokens or a style guide, and name the output format you want.
- 5Review the output. Check generated values against your brand, contrast needs and existing components before committing.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions and reference files that an AI agent can load when a task matches the skill's description. This one is the visual-design-foundations skill from the wshobson/agents repository, released under the MIT licence.
When it is active, the agent answers and produces design work using a fixed set of rules. It can draft CSS custom properties, Tailwind config snippets and React icon components that follow those rules. It provides guidance and code templates. It does not draw, render or preview anything.
- Typography: a font-size scale and line-height guidelines for headings, body text and UI labels
- Spacing: an 8-point grid of named space tokens
- Color: semantic tokens (primary, success, warning, error, info), a neutral gray scale, and WCAG contrast targets
- Dark mode: a light and dark set of background, text and border variables
- Icons: five sizes (xs to xl) and a sample icon component
Install the skill from the ZIP
Download the ZIP for visual-design-foundations from this page and unzip it. The folder contains SKILL.md and three reference files: references/color-systems.md, references/spacing-iconography.md and references/typography-systems.md.
To make it available for you personally, place the unzipped skill folder inside ~/.claude/skills/. To make it available only inside one project, place it inside that project's .claude/skills/ folder.
In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need to type the skill name. The skill's description says it applies when establishing design tokens, building style guides, or improving visual hierarchy and consistency, and its own list also covers spacing systems, font pairing, accessible palettes, icon systems, auditing for consistency, and dark mode or theming. Ask for work in those terms.
Name the output you want (CSS variables, Tailwind config, an icon component) and mention your project context so the agent can keep values consistent.
- Set up design tokens for a new Next.js project using an 8-point spacing grid
- Write a first style guide for our dashboard covering type, color and spacing
- Check this palette for WCAG contrast and suggest fixes for the failing pairs
- Add dark mode variables to our existing CSS custom properties
- Create a size-aware React icon component with xs to xl sizes
Examples of what you get back
For a token request, the agent typically returns a :root block with values such as --space-4: 1rem (16px) and --font-size-base: 1rem. For a Tailwind request, it returns a tailwind.config.js extend block with fontFamily, fontSize, colors and spacing entries. For an icon request, it returns an Icon component that maps size names to pixel values and renders an SVG with aria-hidden set to true.
The contrast helper in the source computes WCAG luminance and returns a ratio, so you can check your own colour pairs against the 4.5:1 body-text target or the 3:1 large-text target.
--space-4: 1rem; /* 16px */
--font-size-base: 1rem; /* 16px */Know what the skill needs and what it does not do
According to the skill's listing, it requires nothing beyond the agent itself. It does not run scripts and does not use the network, so it only reads its own files and writes text or code in response to your request.
The skill gives generic defaults. The sample brand colour is a blue primary (#2563eb) and the sample font is Inter. If you need a real brand identity or original visual design, you will need to replace these with your own decisions and have a designer review the result.
The contrast tools give ratios and a sample checker. They do not test a live page, so they are not a full accessibility audit.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Safety notes
Because the skill runs no scripts and uses no network, it has no install or runtime commands of its own to review. Still, the agent may write CSS, JavaScript or TSX files into your project, so review generated code before you commit it, especially the @font-face rule that points to a local font file path.
- Check that font file paths such as /fonts/Inter.woff2 exist in your project
- Confirm generated colours still meet your contrast targets after you change them
- Run your own tests or audit tool on real pages
Tips for better results
Give the agent your existing values first. The skill's own guidance is to limit choices, name tokens by purpose rather than appearance, and avoid magic numbers, so ask it to map your current values onto the scale rather than inventing new ones.
Ask for states as well. The skill's common issues list includes missing hover, focus and disabled states, so request them explicitly.
- Paste current CSS or a screenshot description so the agent can audit against the scale
- Ask for tokens named by purpose (for example --color-error) rather than by colour
- Limit font weights to two or three per family, as the skill recommends
What people use it for
- A front-end developer creates a :root token file with a type scale, spacing grid and semantic colours for a new project.
- A designer or tech lead drafts a first style guide with line-height rules, spacing rules and a list of approved colour tokens.
- A team audits an interface for inconsistent spacing by comparing existing values with the 8-point grid.
- A developer adds dark mode variables to an existing light theme using the data-theme pattern in the skill.
- A developer generates a Tailwind extend block and a sized Icon component for a component library.
Frequently asked questions
How do I install the visual-design-foundations skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder, or upload it in the Claude apps under Settings → Capabilities → Skills.
Does the visual-design-foundations skill require anything else to run?
The listing says it requires nothing. It runs no scripts and uses no network, so it provides guidance and code templates that the agent writes in response to your request.
Is the visual-design-foundations skill free?
The source identifies its licence as MIT. The source does not list any price, so check the repository for licence terms and any other details.
Can this skill check my website for accessibility?
No. It gives WCAG contrast targets and a sample contrast checker function, but it does not test real pages. Use a dedicated audit tool for a full accessibility review.
Can the skill create a brand-specific design system?
Not on its own. The skill offers generic defaults such as a blue primary colour and the Inter font. A brand identity needs human design judgment and your own choices.
How is this different from a design tool like Figma?
The skill does not draw or render anything. It is guidance plus code templates, such as CSS custom properties, Tailwind config and React icon components, that an agent produces in a chat or coding session.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Choose this skill if you are a front-end developer or design lead who needs a consistent starting set of tokens, spacing and icon sizes, and you are comfortable reviewing generated code. Pick something else if you need a distinct brand identity, original visual design, or a full accessibility audit of live pages.
Download the skill