design-system

Solid

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Web & Frontend 0 stars 0 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# Design System Token architecture, component specifications, systematic design, slide generation. ## When to Use - Design token creation - Component state definitions - CSS variable systems - Spacing/typography scales - Design-to-code handoff - Tailwind theme configuration - **Slide/presentation generation** ## Token Architecture Load: `references/token-architecture.md` ### Three-Layer Structure ``` Primitive (raw values) ↓ Semantic (purpose aliases) ↓ Component (component-specific) ``` **Example:** ```css /* Primitive */ --color-blue-600: #2563EB; /* Semantic */ --color-primary: var(--color-blue-600); /* Component */ --button-bg: var(--color-primary); ``` ## Quick Start **Generate tokens:** ```bash node scripts/generate-tokens.cjs --config tokens.json -o tokens.css ``` **Validate usage:** ```bash node scripts/validate-tokens.cjs --dir src/ ``` ## References | Topic | File | |-------|------| | Token Architecture | `references/token-architecture.md` | | Primitive Tokens | `references/primitive-tokens.md` | | Semantic Tokens | `references/semantic-tokens.md` | | Component Tokens | `references/component-tokens.md` | | Component Specs | `references/component-specs.md` | | States & Variants | `references/states-and-variants.md` | | Tailwind Integration | `references/tailwind-integration.md` | ## Component Spec Pattern | Property | Default | Hover | Active | Disabled | |----------|---------|-------|--------|----------| | Background | primary | primar...

Details

Author: kterfan
Repository: kterfan/ui-pro-forge
Created: 3 days ago
Last Updated: 3 days ago
Language: Python
License: MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design-system

Use when a ticket needs a *systematic* token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), component specs with full state coverage, or a recommendation for which design system a product should have. Invoke for "set up design tokens", "define the component system", "we keep hardcoding colours — fix it", "what design system should this product use", or as the structural backbone that `frontend-design` and `brand` build distinctive UI on top of.

0 Updated 1 weeks ago

tmj-90

Web & Frontend Solid

design-system

Build and maintain cohesive design systems and component libraries with tokens, theming, and documented variants. Use when the user says "design system", "component library", "design tokens", "theming", "consistent styling", "reusable components", or "variant props". Produces token files, component specs, and usage guidelines. Pairs with design-frontend, audit-uiux-design-system. Do NOT use for one-off component styling.

6 Updated 2 days ago

kensaurus

Web & Frontend Solid

design-tokens

Design tokens and CSS custom properties: theme systems, dark mode, component libraries. Use when implementing design systems or user mentions tokens, CSS variables, or theming.

48 Updated today

laurigates