Skip to main content
Open Skills
visual-design-foundationsby Seth HobsonDesignGitHub stars: 41.8k

Visual Design Foundations skill: what it does and how to install it

Builds cohesive interface systems with typography, colour, spacing and iconography tokens, accessibility checks and dark-mode guidance.

Summary generated from the skill's documentation.

Install

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

Run it in a terminal. If your agent is already running, start a new session so it picks the skill up.

About this skill

What it does. Establishes visual foundations for interfaces by defining typography scales, spacing grids, semantic colour tokens and icon sizing. It provides Tailwind and CSS examples, responsive type guidance, contrast checks, dark-mode tokens and consistency practices.

When to use it. For design tokens, style guides, accessible palettes, type pairing, icon systems, visual hierarchy audits or theming. It also applies when refining spacing, readability and component states.

History

Repo stars

41.8k+1.5k since 5 Oct 2026

Stars are counted for the whole repository, which holds 76 skills.

Show as a table
Repo stars by day
DateRepo stars
26 Oct 202641,741
25 Oct 202641,668
24 Oct 202641,623
23 Oct 202641,590
22 Oct 202641,533
21 Oct 202641,400
20 Oct 202641,212
19 Oct 202641,081
18 Oct 202640,990
17 Oct 202640,943
16 Oct 202640,891
15 Oct 202640,824
14 Oct 202640,663
13 Oct 202640,579
12 Oct 202640,457
11 Oct 202640,368
10 Oct 202640,319
9 Oct 202640,307
8 Oct 202640,296
7 Oct 202640,267
6 Oct 202640,238
5 Oct 202640,212

Installs

13.7k

Tracking since . A chart appears once there are 7 days of data.

Installs via skills.sh

Similar skills