Design System

One skill for everything design-system related. Audits existing projects, generates token systems from scratch, enforces WCAG AA in both light and dark mode, and makes light/dark mode actually cohesive — not just "dark exists".

Works with any stack: Next.js, SvelteKit, Astro, plain HTML/CSS, Tailwind, CSS Modules.

Triggers

Any of:

• "design system" / "design audit" / "check my design"
• "wcag" / "contrast" / "accessibility" / "a11y"
• "design tokens" / "generate tokens" / "fix my colours"
• "light dark mode" / "dark mode" / "add dark mode"
• "/design-system"