ckm-design-system

name	ckm:design-system
description	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.
argument-hint	[component or token]
license	MIT
metadata	{"author":"claudekit","version":"1.0.0"}
skill_id	design.design_system
executor	HYBRID
status	ADOPTED
security	{"level":"standard","pii":false,"approval_required":false}
anchors	["design","frontend","engineering"]
tier	2
input_schema	[{"name":"code_or_task","type":"string","description":"Code snippet, script, or task description to process","required":true}]
output_schema	[{"name":"plan","type":"string","description":"Strategic plan or design document"},{"name":"next_steps","type":"array","description":"List of recommended next steps"}]
what_if_fails	FALLBACK: If Ckm:Design System cannot complete, provide partial results with explicit gaps noted. Never block workflow silently. ESCALATE: If core capability is unavailable, suggest nearest alternative skill. RULE: Always explain what failed and what manual steps can substitute.

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