skills.rest
TumeloRamaphosa
TumeloRamaphosaCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Generate token-compliant design tokens and brand-styled slide HTML.

Updated May 7, 2026
Search Tags:#design tokens#slide generation#presentation#ui components#chart.js#brand compliance#token validation
One-click install
npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill ckm-design-system-tumeloramaphosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/TumeloRamaphosa/StudEx-Valley-OS/tree/main/.claude/skills/ui-ux-pro-max/.claude/skills/design-system
Command: npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill ckm-design-system-tumeloramaphosa

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates inconsistent branding and manual, error-prone UI styling by centralizing design tokens and enforcing token-compliant slide generation.

Core Features & Use Cases

  • Token architecture: Build a three-layer system (primitive → semantic → component) that supports theme switching and systematic design.
  • Component specifications: Define states, variants, spacing, typography, and component token mappings (e.g., button/input/card).
  • Slide/presentation generation: Produce brand-compliant decks using tokens for layout, color, typography, charts, and animations, including a contextual decision flow.
  • Token compliance validation: Validate slide HTML to ensure design tokens are used via CSS variables rather than hardcoded values.

Quick Start

Use the ckm:design-system skill to generate a 10-slide investor pitch by running the command: /slides:create "10-slide investor pitch for ClaudeKit Marketing".

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 brand-compliant presentation slides using design tokens?▼

Slide generation validates HTML to ensure design tokens are used via CSS variables rather than hardcoded values, producing presentation decks that use var(--token-*) exclusively for layout, color, and typography.

What is a three-layer design token architecture for UI components?▼

A three-layer design token architecture maps primitive tokens to semantic tokens and then to component-specific tokens, enabling systematic UI styling and theme switching for components like buttons and cards.

Do I need a tokens.json file to generate token-compliant slide decks?▼

Yes, generating compliant slide decks requires design token source-of-truth files such as tokens.json or design-tokens.css to validate HTML token usage and enforce brand styling.

Can I render Chart.js charts in token-styled presentation slides?▼

Yes, the slide generation workflow supports Chart.js chart rendering alongside layout, typography, and color decisioning to produce fully brand-styled presentation decks.

How do I validate hardcoded CSS values in my presentation HTML?▼

Token compliance validation checks slide HTML to ensure all styling values are applied via CSS variables rather than hardcoded values, enforcing strict brand compliance.

What is the best way to maintain brand consistency across generated UI components?▼

Centralizing design tokens and defining component specifications for states, variants, and spacing ensures generated UI components maintain strict brand compliance and systematic design.

Related Skills

Explore More Design & Creative Skills→
aaltaayaaltaay

ckm:design-system

Converts a three-layer token system into CSS variables for brand-consistent design.

Community
Advanced
AutomatedMarketerAutomatedMarketer

ckm:design-system

Standardize three-layer design tokens and generate brand-compliant slide decks.

Community
Advanced
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
luicabref97luicabref97

ckm:design-system

Generate and validate design tokens, component specs, and slide HTML.

Community
Advanced