skills.rest
4asaanAI
4asaanAICOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Generate design tokens, CSS variables, component specs, and HTML slide decks.

Updated Aug 23, 2026
Search Tags:#tailwind#design-system#css-variables#design-tokens#component-specs#slide-generation#token-validation
One-click install
npx skills add https://github.com/4asaanAI/Claude-patches --skill ckm-design-system-4asaanai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/4asaanAI/Claude-patches/tree/main/framework-foundry/Claude%20Plugins/ui-ux-pro-max-skill-main/.claude/skills/design-system
Command: npx skills add https://github.com/4asaanAI/Claude-patches --skill ckm-design-system-4asaanai

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Prevents inconsistent styling, hardcoded values, and fragmented component definitions by providing a single-source-of-truth token architecture, component specifications, and slide-generation tooling that keep design and implementation aligned.

Core Features & Use Cases

  • Three-layer token architecture: primitive → semantic → component with JSON templates and CSS variable outputs for theme switching.
  • Component specifications & states: detailed specs for buttons, inputs, cards, tables, and their interaction states and sizes.
  • Slide system & generation: brand-compliant HTML slide generator, layout/strategy search, Chart.js integration, and curated background selection.
  • Validation and developer tooling: scripts to generate CSS from tokens, validate token usage in HTML, embed tokens for standalone HTML, and map tokens to Tailwind config.
  • Use Case: UI designers and frontend engineers can produce a theme, export CSS variables, generate a deck of slides that strictly uses tokens, and validate assets before release.

Quick Start

Generate a demo slide deck using the design tokens and save the HTML output to assets/designs/slides/demo-pitch.html.

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 design tokens for Tailwind and CSS variables?▼

Generate design tokens using a three-layer architecture mapping primitive to semantic and component layers. This produces JSON templates and CSS variable outputs for Tailwind integration and theme switching.

What is a three-layer design token architecture and when do I need it?▼

A three-layer design token architecture structures styles from primitive base values to semantic meanings and component-specific variables. You need it to prevent inconsistent styling and hardcoded values across UI components.

How do I create brand-compliant HTML slide decks with Chart.js integration?▼

Create brand-compliant HTML slide decks using a slide generator that searches layouts and integrates Chart.js. The system outputs slide HTML files that strictly reference your design tokens for visual consistency.

Can I validate token usage in HTML before releasing UI components?▼

You can validate token usage in HTML by running provided validation scripts. These scripts check your HTML files for strict token compliance and generate CSS directly from the defined tokens to ensure alignment.

Does this design system tool work without external dependencies?▼

The design system tool works without external dependencies, using internal scripts, references, and assets. It generates standalone HTML by embedding tokens directly and mapping them to Tailwind config files.

What is the best way to author component specifications for buttons and inputs?▼

The best way to author component specifications is to define detailed states and sizes for buttons, inputs, cards, and tables. This ensures interaction states align with your semantic design tokens.

Related Skills

Explore More Design & Creative Skills→
sonle0311sonle0311

ckm:design-system

Manage design token architecture and generate CSS variables from JSON files.

Community
Advanced
LutimiLutimi

ckm:design-system

Organize design tokens into primitive, semantic, and component layers.

Community
Advanced
moshi-azzmoshi-azz
2

ckm:slides

Generates HTML presentations with Chart.js data visualization and design tokens.

Community
Intermediate
antony-jipantony-jip

ckm:design-system

Generate CSS variables from JSON design tokens and create brand-compliant slides.

Community
Advanced