| 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:
--color-blue-600: #2563EB;
--color-primary: var(--color-blue-600);
--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 |
