Agent skill · design visual · davila7
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
Why this skill is useful
Provides templates and guidelines for creating scalable design systems, including design tokens and accessibility standards that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Design System Starter Build robust, scalable design systems that ensure visual consistency and exceptional user experiences. --- Quick Start Just describe what you need: That's it. The skill provides tokens, components, and accessibility guidelines. --- Triggers Trigger Example --------- --------- Create design system "Create a design system for my app" Design tokens "Set up design tokens for colors and spacing" Component architecture "Design component structure using atomic design" Accessibility "Ensure WCAG 2.1 compliance for my components" Dark mode "Implement theming with dark mode support" --- Quick Reference Task Output ------ -------- Design tokens Color, typography, spacing, shadows JSON Component structure Atomic design hierarchy (atoms, molecules, organisms) Theming CSS variables or ThemeProvider setup Accessibility WCAG 2.1 AA compliant patterns Documentation Component docs with props, examples, a11y notes --- Bundled Resources references/component-examples.md - Complete component implementations templates/design-tokens-template.json - W3C design token format templates/component-template.tsx - React component template checklists/design-system-checklist.md - Design system audit checklist --- Design System Philosophy What is a Design System? A design system is more than a component library—it's a collection of: 1. Design Tokens: Foundational design decisions (colors, spacing, typography) 2. Components: Reusable UI building blocks 3. Patterns: Common UX solutions and compositions 4. Guidelines: Rules, principles, and best practices 5. Documentation: How to use everything effectively Core Principles 1. Consistency Over Creativity Predictable patterns reduce cognitive load Users learn once, apply everywhere Designers and developers speak the same language 2. Accessible by Default WCAG 2.1 Level AA compliance minimum Keyboard navigation built-in Screen reader support from the start 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/design-system-starter