skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

design-system

Generates three-layer design tokens, component specifications, and brand-compliant HTML slide decks.

Updated Sep 1, 2026
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#chart.js#component specs
One-click install
npx skills add https://github.com/umairshahid622/perfumora --skill design-system-umairshahid622
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/umairshahid622/perfumora/tree/main/perfumora/.claude/skills/design-system
Command: npx skills add https://github.com/umairshahid622/perfumora --skill design-system-umairshahid622

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Maintaining visual consistency across components and presentations is hard when colors, spacing, and typography are hardcoded everywhere. This Skill establishes a single source of truth with a three-layer token architecture (primitive, semantic, component) and generates token-compliant CSS, component specs, and slide decks. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind config, and scan codebases for hardcoded values that violate the token system. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables covering variants, sizes, and states. - Slide Deck Generation: Build brand-compliant HTML presentations using design tokens, Chart.js, BM25 slide search, and a contextual decision system driven by strategy, layout, typography, and color CSVs. - Use Case: A team needs a 10-slide investor pitch that matches their brand. The Skill searches slide strategies, applies layout and emotion-arc logic, generates token-compliant HTML, and validates the output for hardcoded values. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or generate CSS design tokens from your tokens.json configuration file.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate CSS variables from a design tokens JSON file?▼

Run the generate-tokens.cjs script with your JSON config: node generate-tokens.cjs --config tokens.json -o tokens.css. It resolves token references across primitive, semantic, and component layers and can also output a Tailwind color config with --format tailwind.

How do I create a brand-compliant HTML slide deck?▼

Use the generate-slide.py script with a JSON file describing your slides, or run --demo for a sample deck. All slides import design-tokens.css and must use CSS variables, Chart.js for charts, and include navigation.

What is a three-layer design token architecture?▼

It separates raw primitive values (hex colors, spacing) from semantic aliases (primary, muted) and component-specific tokens (button-bg). This structure enables theme switching like light and dark mode by only changing the semantic layer.

How do I check my code for hardcoded colors instead of tokens?▼

Run validate-tokens.cjs against your source directory to detect hardcoded values. For HTML slides and infographics, html-token-validator.py checks for hex colors, rgb values, and hardcoded fonts while allowing Chart.js exceptions in script blocks.

Does the slide generator work with Tailwind CSS?▼

The token generator can output a Tailwind-compatible color config referencing CSS variables via --format tailwind. Slides themselves are standalone HTML files using CSS variables from design-tokens.css rather than Tailwind classes.

Why does slide validation fail on rgba colors?▼

The validator flags hardcoded rgba values in style blocks, but allows rgba versions of brand colors needed for transparency effects, plus black and white transparency. Move other colors into tokens and reference them with var().

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
dmedina-devdmedina-dev
1

ckm:design-system

Generate brand-compliant token systems, Tailwind-ready CSS variables, component specs, and HTML slides from JSON/CSS inputs.

Community
Advanced
j-cogburnj-cogburn

design-system

Audit UI component libraries against a three-layer token hierarchy.

Community
Intermediate
ai-enhanced-engineerai-enhanced-engineer
3

frontend-design-systems

Integrate design systems while preserving brand identity and design tokens.

Official
Intermediate