ckm-design-system

Q: How do I install ckm-design-system?

Run npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm-design-system in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ckm-design-system/ (personal) or .claude/skills/ckm-design-system/ (project).

by nextlevelbuilderFrontend & Design

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Installs: 360
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm-design-system

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads ckm-design-system automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Design System

Token architecture, component specifications, systematic design, slide generation.

When to Use

Design token creation
Component state definitions
CSS variable systems
Spacing/typography scales
Design-to-code handoff
Tailwind theme configuration
Slide/presentation generation

Token Architecture

Load: references/token-architecture.md

Three-Layer Structure

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

Example:

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);

Quick Start

Generate tokens:

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

Validate usage:

node scripts/validate-tokens.cjs --dir src/

References

Topic	File
Token Architecture	`references/token-architecture.md`
Primitive Tokens	`references/primitive-tokens.md`
Semantic Tokens	`references/semantic-tokens.md`
Component Tokens	`references/component-tokens.md`
Component Specs	`references/component-specs.md`
States & Variants	`references/states-and-variants.md`
Tailwind Integration	`references/tailwind-integration.md`

Component Spec Pattern

Property	Default	Hover	Active	Disabled
Background	primary	primary-dark	primary-darker	muted
Text	white	white	white	muted-fg
Border	none	none	none	muted-border
Shadow	sm	md	none	none

Scripts

Script	Purpose
`generate-tokens.cjs`	Generate CSS from JSON token config
`validate-tokens.cjs`	Check for hardcoded values in code
`search-slides.py`	BM25 search + contextual recommendations
`slide-token-validator.py`	Validate slide HTML for token compliance
`fetch-background.py`	Fetch images from Pexels/Unsplash

Templates

Template	Purpose
`design-tokens-starter.json`	Starter JSON with three-layer structure

Integration

With brand: Extract primitives from brand colors/typography With ui-styling: Component tokens → Tailwind config

Skill Dependencies: brand, ui-styling Primary Agents: ui-ux-designer, frontend-developer

Slide System

Brand-compliant presentations using design tokens + Chart.js + contextual decision system.

Source of Truth

File	Purpose
`docs/brand-guidelines.md`	Brand identity, voice, colors
`assets/design-tokens.json`	Token definitions (primitive→semantic→component)
`assets/design-tokens.css`	CSS variables (import in slides)
`assets/css/slide-animations.css`	CSS animation library

Slide Search (BM25)

# Basic search (auto-detect domain)
python scripts/search-slides.py "investor pitch"

# Domain-specific search
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Contextual search (Premium System)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

Decision System CSVs

File	Purpose
`data/slide-strategies.csv`	15 deck structures + emotion arcs + sparkline beats
`data/slide-layouts.csv`	25 layouts + component variants + animations
`data/slide-layout-logic.csv`	Goal → Layout + break_pattern flag
`data/slide-typography.csv`	Content type → Typography scale
`data/slide-color-logic.csv`	Emotion → Color treatment
`data/slide-backgrounds.csv`	Slide type → Image category (Pexels/Unsplash)
`data/slide-copy.csv`	25 copywriting formulas (PAS, AIDA, FAB)
`data/slide-charts.csv`	25 chart types with Chart.js config

Contextual Decision Flow

1. Parse goal/context
        ↓
2. Search slide-strategies.csv → Get strategy + emotion beats
        ↓
3. For each slide:
   a. Query slide-layout-logic.csv → layout + break_pattern
   b. Query slide-typography.csv → type scale
   c. Query slide-color-logic.csv → color treatment
   d. Query slide-backgrounds.csv → image if needed
   e. Apply animation class from slide-animations.css
        ↓
4. Generate HTML with design tokens
        ↓
5. Validate with slide-token-validator.py

Pattern Breaking (Duarte Sparkline)

Premium decks alternate between emotions for engagement:

"What Is" (frustration) ↔ "What Could Be" (hope)

System calculates pattern breaks at 1/3 and 2/3 positions.

Slide Requirements

ALL slides MUST:

Import assets/design-tokens.css - single source of truth
Use CSS variables: var(--color-primary), var(--slide-bg), etc.
Use Chart.js for charts (NOT CSS-only bars)
Include navigation (keyboard arrows, click, progress bar)
Center align content
Focus on persuasion/conversion

Chart.js Integration

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Use brand coral
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

Token Compliance

/* CORRECT - uses token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* WRONG - hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

Reference Implementation

Working example with all features:

assets/designs/slides/claudekit-pitch-251223.html

Command

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Best Practices

Never use raw hex in components - always reference tokens
Semantic layer enables theme switching (light/dark)
Component tokens enable per-component customization
Use HSL format for opacity control
Document every token's purpose
Slides must import design-tokens.css and use var() exclusively

FAQ

What does the ckm-design-system skill do?

How do I install ckm-design-system?

Run npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm-design-system in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ckm-design-system/ (personal) or .claude/skills/ckm-design-system/ (project).

Which AI agents can use ckm-design-system?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is ckm-design-system safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains ckm-design-system?

It is published by nextlevelbuilder in nextlevelbuilder/ui-ux-pro-max-skill. It has 360 recorded installs.

Source

nextlevelbuilder/ui-ux-pro-max-skill $View on skills.sh

Works with

Claude CodeCodexCursorGitHub CopilotGemini CLIWindsurfClineOpenCodeRoo CodeGooseAmpKiro

Files 26 · 173.3 KB

SKILL.md6.7 KB
data/slide-backgrounds.csv1.0 KB
data/slide-charts.csv8.4 KB
data/slide-color-logic.csv877 B
data/slide-copy.csv6.3 KB
data/slide-layout-logic.csv981 B
data/slide-layouts.csv8.6 KB
data/slide-strategies.csv8.0 KB
data/slide-typography.csv735 B
references/component-specs.md6.8 KB
references/component-tokens.md4.9 KB
references/primitive-tokens.md4.5 KB
references/semantic-tokens.md4.1 KB
references/states-and-variants.md4.7 KB
references/tailwind-integration.md5.5 KB
references/token-architecture.md5.2 KB
scripts/embed-tokens.cjs2.5 KB
scripts/fetch-background.py12.0 KB
scripts/generate-slide.py27.9 KB
scripts/generate-tokens.cjs4.9 KB
scripts/html-token-validator.py11.6 KB
scripts/search-slides.py9.0 KB
scripts/slide_search_core.py14.4 KB
scripts/slide-token-validator.py973 B

+2 more files