skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

ckm:design-system

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

Updated Jun 30, 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/kaitoartz/dotfiles --skill ckm-design-system-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/ckm-design-system
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill ckm-design-system-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Maintaining consistent colors, spacing, and typography across components and presentations is error-prone when values are hardcoded. This Skill provides a three-layer token architecture (primitive, semantic, component) with CSS variable generation, validation tooling, and a slide generation system that enforces token compliance. ## 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 including variants, sizes, and state definitions. - Slide Deck Generation: Build brand-compliant HTML presentations using design tokens, Chart.js charts, BM25 search over strategy/layout/copy/chart CSV databases, and a contextual decision system with Duarte sparkline pattern breaking. - Use Case: A designer needs a 10-slide investor pitch. The Skill searches slide strategies, selects layouts and typography per position, generates HTML importing design-tokens.css, and validates the output for token compliance. ## Quick Start Ask the AI to generate design tokens from the starter JSON template and create a brand-compliant pitch deck using the slide generation 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 generate-tokens.cjs with a JSON config following the primitive, semantic, and component layer structure. It resolves token references like {primitive.color.blue.600} and outputs CSS custom properties, with an optional Tailwind format for theme config.

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). Each layer references the one below, so changing a primitive propagates through the system and enables theme switching.

How do I create slides that follow a design system?▼

Use generate-slide.py with JSON slide data or search-slides.py to find strategies, layouts, and copy formulas from the CSV databases. Generated HTML imports design-tokens.css and uses var() references exclusively, then html-token-validator.py checks compliance.

Does the token validator work with Chart.js configurations?▼

Yes, the HTML token validator skips hardcoded colors inside script blocks since Chart.js requires literal color values. It also allows rgba patterns matching brand colors for transparency effects that CSS variables cannot express.

Can I use these design tokens with Tailwind CSS?▼

Yes, generate-tokens.cjs supports a tailwind output format that maps semantic color tokens to var() references for tailwind.config.ts. The tailwind-integration reference covers the full setup for connecting component tokens to the Tailwind theme.

Why does slide validation fail on my generated HTML?▼

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 literal values with var(--token-name) references and ensure at least five token usages per file.

Related Skills

Explore More Design & Creative Skills→
AeonxuuAeonxuu

brand

Manages brand voice, visual identity, and asset validation with design token synchronization.

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
Cor-IncorporatedCor-Incorporated
4

ui-skills

Enforce Tailwind CSS, accessibility, animation, and layout standards in UI components.

Official
Advanced
Asymmetric-alAsymmetric-al
417

moai-library-shadcn

Install, compose, and customize shadcn/ui components with Tailwind CSS tokens.

Official
Intermediate