Agent Skills: design-foundation

Create or extract a design-token foundation — colors, typography, spacing, radii, shadows — as a real tokens file (CSS variables and/or Tailwind theme) plus a migration map from current hardcoded values. Use when the user says 'set up a design system', 'our styles are inconsistent', 'we have 50 shades of the same blue', 'add design tokens', 'formalize our design', 'make new features match', or when starting a new frontend that needs a foundation before building screens. Also the first step whenever other design work keeps fighting ad-hoc values. Produces the tokens file, a global→semantic token structure wired for dark mode, and a short list of the worst drift to migrate first.

ID: sanky369/vibe-building-skills/design-foundation

Install this agent skill to your local

npx skills add sanky369/vibe-building-skills --skill design-foundation

Skill Files

The files that make up design-foundation.

Download Skill

More agent skills