Create and manage design tokens with a three-layer token architecture.
npx skills add https://github.com/gzyxds/cloudcvm.com --skill design-system-gzyxds
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/gzyxds/cloudcvm.com/tree/main/.trae/skills/design-system Command: npx skills add https://github.com/gzyxds/cloudcvm.com --skill design-system-gzyxds
Design teams often struggle to establish a consistent, scalable design language across tokens, components, and UI patterns. This Skill provides a structured approach to token architecture, design system conventions, and a ready-to-adopt pattern for semantic layering and component specs.
Create a tokens-first design system by defining Primitive, Semantic, and Component tokens, then implement component specs and a Tailwind-compatible theme.
High-intent search queries and answers about installing and using this skill.
A scalable design token system uses a three-layer architecture: Primitive tokens for raw values, Semantic tokens for intent, and Component tokens for specific UI elements. This enforces consistency and simplifies theming.
Configure a Tailwind theme by mapping semantic design tokens to Tailwind configuration variables. This ensures your utility classes reflect the design system, streamlining design-to-code handoff and maintaining UI consistency.
Manage light and dark theming by defining semantic tokens that swap primitive values based on the active theme. This isolates component logic from raw value changes, ensuring consistent UI states across different color schemes.
Create component specifications by standardizing UI states, theming behaviors, and documentation practices. This aligns design and engineering teams by providing clear, actionable guidelines for implementing tokens within specific components.
A semantic token layer is essential for translating raw primitive values into contextual meanings like success or danger colors. It decouples component specs from raw values, making the design system scalable and easier to maintain.
Yes, this approach defines spacing and typography scales by applying the three-layer token architecture. Primitive scales feed into semantic aliases, ensuring consistent vertical rhythm and text styling across all UI components.
landim32Automate design-token organization and slide-template generation for design systems.
saajunaidGenerate and validate design tokens as CSS variables across three-layer architectures.
RheasilviaLint DESIGN.md files and export design tokens to Tailwind or DTCG formats.
markky21Build scalable design systems with Tailwind CSS v4 and design tokens.
