skills.rest
Kentox493
Kentox493COMMUNITY
Explore all skills by this author →
GitHub

design-system

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

Updated Apr 6, 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/Kentox493/Portfolio --skill design-system-kentox493
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Kentox493/Portfolio/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/Kentox493/Portfolio --skill design-system-kentox493

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (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 and slide decks automatically. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind theme config, and scan source code 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 interaction states. - Slide Deck Generation: Build brand-compliant HTML presentations using design tokens, Chart.js visualizations, BM25 slide search, and a contextual decision system driven by strategy, layout, typography, and color CSVs. - Use Case: A designer needs a 10-slide investor pitch that matches brand guidelines. The Skill selects layouts and emotion arcs from its decision CSVs, generates token-compliant HTML with charts, 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 the starter JSON template using the included scripts.

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 pitch deck with design tokens and Chart.js?▼

Use the generate-slide.py script with a JSON file describing your slides, or run it with --demo for a sample deck. Slides import design-tokens.css as the single source of truth and use CSS variables for all colors, fonts, and spacing.

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 HTML slides for hardcoded colors instead of tokens?▼

Run the html-token-validator.py script against your slides directory or a specific file. It flags hex, rgb, and hardcoded font declarations outside of script blocks and reports files missing the design-tokens.css import.

Does the token generator support dark mode themes?▼

Yes, the starter JSON includes a dark section with semantic color overrides. The generator outputs these under a .dark CSS class, so switching themes only requires toggling that class on the root element.

When should I not use CSS-only bar charts in slides?▼

The Skill requires Chart.js for data charts rather than CSS-only bars when building final presentations. Chart.js provides proper scaling, tooltips, and responsiveness that static CSS bars cannot deliver for real data visualization.

Related Skills

Explore More Design & Creative Skills→
Ramadan-ElgamalRamadan-Elgamal

brand

Manages brand voice, visual identity, design tokens, and asset validation workflows.

Community
Intermediate
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
MovchanetsMovchanets

tailwind-design-system

Build scalable Tailwind CSS v4 design systems with semantic tokens and component variants.

Community
Advanced
imbue-aiimbue-ai
213

frontend-design-tokens

Guide CSS/SCSS design token adoption with Radix UI tokens and custom overrides.

Official
Intermediate