skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ckm:design-system

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

1|Updated Feb 24, 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/masermediagroup-stack/maser-media --skill ckm-design-system-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ui-ux-pro-max-skill/.claude/skills/design-system
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill ckm-design-system-masermediagroup-stack

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, component specs, and HTML slide decks. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind theme 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, states, and anatomy. - Slide Deck Generation: Build brand-compliant HTML presentations using BM25 search over strategy, layout, copy, and chart CSV databases, with Chart.js integration, curated Pexels backgrounds, and token compliance validation. - Use Case: Ask for a 10-slide investor pitch and receive an HTML deck that imports design-tokens.css, follows a Duarte sparkline emotion arc, uses Chart.js charts, and passes automated token validation. ## Quick Start Generate a brand-compliant 10-slide investor pitch deck using the design token system and validate it for token compliance.

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 can also output a Tailwind color config with --format tailwind.

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 at the semantic layer and per-component customization without touching primitives.

How do I create a pitch deck with consistent branding in HTML?▼

Use the slide generation workflow: search the strategy and layout CSVs with search-slides.py, generate slides with generate-slide.py, and validate output with html-token-validator.py. All slides import design-tokens.css and use var() references exclusively.

Does the slide generator support charts and background images?▼

Yes, slides integrate Chart.js 4 for data visualization and fetch-background.py provides curated Pexels images per slide type with brand-color overlay gradients. The validator allows hardcoded colors only inside Chart.js script blocks.

Why does token validation fail on my generated HTML file?▼

Validation fails when the file lacks a design-tokens.css import or contains hardcoded hex, rgb, or hsl colors in style blocks or inline styles. Replace them with var(--token-name) references; rgba values matching brand colors are permitted for transparency effects.

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
4asaanAI4asaanAI

ckm:design-system

Generate design tokens, CSS variables, component specs, and HTML slide decks.

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
Asymmetric-alAsymmetric-al
417

shadcn/ui Design System - Skill

Compose shadcn/ui components with design tokens in Next.js applications.

Official
Intermediate