Create three-layer design token systems with CSS variables and Tailwind mapping.
npx skills add https://github.com/KumarAdi8/AgentKit --skill design-system-kumaradi8
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/KumarAdi8/AgentKit/tree/main/skills/design-system Command: npx skills add https://github.com/KumarAdi8/AgentKit --skill design-system-kumaradi8
Provides a clear architecture and actionable guidelines to eliminate inconsistent styles, duplicate values, and fragile component theming by defining a three-layer token system and component token conventions.
Create a three-layer design token system with primitives, semantic aliases, and component overrides, export CSS variables for light and dark themes, and map core tokens into your Tailwind configuration.
High-intent search queries and answers about installing and using this skill.
Create a design token architecture by defining three layers: primitive tokens for raw values, semantic tokens for purpose-driven aliases, and component tokens for overrides. This structure separates raw values from UI meaning, ensuring consistent and themeable component styling across your library.
Map design tokens to Tailwind by exporting CSS variables for light and dark themes and injecting core token values into your Tailwind configuration entries. This maps semantic aliases directly to Tailwind theme scales for spacing, typography, and color palettes.
The three-layer token system separates design values into primitive, semantic, and component layers. Primitive holds raw values, semantic provides purpose-driven aliases, and component defines specific overrides, eliminating duplicate values and fragile component theming in web UIs.
Yes, the design token system supports WCAG AA contrast validation. It defines light and dark theme color palettes and documents accessibility validation requirements to ensure component state specifications meet contrast standards.
Yes, you can define spacing and typography scales alongside radius and shadow values. The system supplies these scales and documents component state specifications, ensuring consistent styling across various interactive states within your UI components.
launchapp-devAudit design token usage across multi-project design systems to identify inconsistencies and gaps.
tenequmApply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.
ashishgurpritGenerate design systems with color palettes, typography, and WCAG validation.
Harmeet10000Standardizes tokens, theming, and component APIs for scalable UI foundations across web and mobile.
