skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

design-system-starter

Create design systems with design tokens, component architecture, and WCAG accessibility guidelines.

Updated Aug 2, 2026
Search Tags:#accessibility#design system#design tokens#atomic design#wcag#dark mode#react components
One-click install
npx skills add https://github.com/leonardoacosta/agents --skill design-system-starter-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-starter
Source: https://github.com/leonardoacosta/agents/tree/main/skills/design-system-starter
Command: npx skills add https://github.com/leonardoacosta/agents --skill design-system-starter-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a consistent, accessible UI across products requires coordinated decisions about colors, typography, spacing, components, and documentation. This Skill provides the structure, templates, and checklists to create and evolve a complete design system without starting from scratch. ## Core Features & Use Cases - Design Tokens: W3C-format token templates covering primitive and semantic colors, typography scales, spacing, border radius, and shadows, with dark mode theming patterns. - Component Architecture: Atomic design methodology (atoms, molecules, organisms) with TypeScript React implementations of Button, Input, Card, Modal, FormField, and polymorphic component patterns. - Accessibility & Documentation: WCAG 2.1 Level AA guidance including contrast ratios, keyboard navigation, ARIA attributes, plus a comprehensive audit checklist and component documentation standards. - Use Case: Ask for a design system for a React app with dark mode support and receive token definitions, component structure, theming setup, and an adoption checklist. ## Quick Start Create a design system for my React app with dark mode support and WCAG 2.1 AA accessibility.

Frequently Asked Questions about design-system-starter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for a React app?▼

Start by defining design tokens for colors, typography, and spacing, then build atomic components like Button and Input before composing molecules and organisms. The skill provides a W3C token template, TypeScript component implementations, and a quick-start checklist covering theming and documentation.

What are design tokens and how do I structure them?▼

Design tokens are the atomic design decisions of a system, such as colors, font sizes, and spacing values. Structure them as primitive tokens (raw values like blue-600) referenced by semantic tokens (brand-primary, text-secondary) so global changes propagate consistently.

How do I implement dark mode with design tokens?▼

Define theme-specific token values and switch them via CSS variables under a data-theme attribute, Tailwind dark: classes, or a styled-components ThemeProvider. Persist the user's choice in localStorage and respect the prefers-color-scheme system preference on first load.

What color contrast is required for WCAG 2.1 Level AA?▼

WCAG 2.1 Level AA requires a 4.5:1 contrast ratio for normal text, 3:1 for large text (18pt or 14pt bold), and 3:1 for UI components and graphics. Validate token pairs with a contrast checker before finalizing the palette.

How should I structure components using atomic design?▼

Atomic design organizes components into atoms (Button, Input), molecules (FormField, SearchBar), organisms (Navigation, Modal), templates, and pages. Build atoms first with consistent variant and size props, then compose upward using compound component patterns.

Does this design system approach work with Tailwind CSS?▼

Yes, the component examples use Tailwind utility classes for variants, sizes, and states, and dark mode can use Tailwind's dark: variant. Design tokens map directly to a Tailwind theme configuration for consistent spacing and color scales.

Related Skills

Explore More Design & Creative Skills→
MinhDuyDEVMinhDuyDEV

design-system-audit

Audit design system implementations for component, token, and visual inconsistencies.

Community
Advanced
cartridge-ggcartridge-gg
80

dispatch-release

Dispatch release preparation PRs and publish to npm and GitHub Releases.

Official
Advanced
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced
Asymmetric-alAsymmetric-al
417

shadcn/ui Design System - Skill

Compose shadcn/ui components with design tokens in Next.js applications.

Official
Intermediate