skills.rest
Grupo-6-ADS-B
Grupo-6-ADS-BOFFICIAL
Explore all skills by this author →
GitHub

ckm:design-system

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

2|Updated Aug 15, 2025
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#chart.js#component specs
One-click install
npx skills add https://github.com/Grupo-6-ADS-B/FittNutri --skill ckm-design-system-grupo-6-ads-b
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/Grupo-6-ADS-B/FittNutri/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/Grupo-6-ADS-B/FittNutri --skill ckm-design-system-grupo-6-ads-b

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 centralizes design decisions into a three-layer token architecture (primitive, semantic, component) and generates token-compliant CSS, component specs, and HTML slide decks from a single source of truth. ## 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 with Chart.js charts, BM25 slide search, emotion-arc strategies, and automatic token validation. - Use Case: A designer needs a 10-slide investor pitch. The Skill queries layout and copywriting CSVs, generates HTML slides importing design-tokens.css, and validates that no hardcoded hex colors remain. ## 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 ckm: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 outputs CSS custom properties, with an optional Tailwind format mode.

How do I create a pitch deck with design tokens in HTML?▼

Use the generate-slide.py script with a JSON file describing slide types (title, problem, solution, metrics, chart, testimonial, cta). The generated HTML imports design-tokens.css and uses only CSS variables, with Chart.js for data visualization.

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 redefining only the semantic layer.

How do I check HTML files for hardcoded colors instead of tokens?▼

Run the html-token-validator.py script against your slides or infographics directories. It flags hex, rgb, and hsl values outside script blocks, verifies the design-tokens.css import exists, and reports files that fail compliance.

Does the slide generator support dark mode themes?▼

Yes, the token JSON supports a dark section that overrides semantic color values. The generated CSS outputs these under a .dark class, so slides and components switch themes by toggling that class.

What are the limitations of the CSS-only bar charts in slides?▼

CSS bar charts handle simple comparisons but lack interactivity and precise scaling. The Skill requires Chart.js for real charts in slides, reserving CSS bars for simple decorative visuals in generated templates.

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
idy-00idy-00

design-component

Generates UI component specifications with anatomy, variants, states, token mapping, and accessibility rules.

Community
Advanced
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate