skills.rest
Herxinsasa
HerxinsasaCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Generate CSS variables from design tokens and validate HTML and CSS files.

1|Updated Apr 22, 2026
Search Tags:#design tokens#slide generation#presentation design#CSS variables#brand compliance#component specs#UI system
One-click install
npx skills add https://github.com/Herxinsasa/Skills-Collector --skill ckm-design-system-herxinsasa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/Herxinsasa/Skills-Collector/tree/main/ui-ux-pro-max-skill/.claude/skills/design-system
Command: npx skills add https://github.com/Herxinsasa/Skills-Collector --skill ckm-design-system-herxinsasa

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates inconsistent UI implementation and time-consuming slide creation by providing a systematic three-layer token architecture and automated generation tools that ensure brand compliance across all components and presentations.

Core Features & Use Cases

  • Three-Layer Token System: Organizes design decisions into primitive, semantic, and component layers for scalable theming and easy maintenance.
  • Component Specifications: Provides detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables with states and variants.
  • Brand-Compliant Slide Generation: Creates investor pitches and presentations using design tokens, Chart.js, and strategic decision systems.
  • Validation Tools: Includes scripts to validate token usage and ensure no hardcoded values in HTML and CSS files.
  • Use Case: Imagine you need to redesign a product's UI and create a pitch deck. Use this Skill to generate consistent design tokens, define component specs, and produce brand-compliant slides in minutes instead of days.

Quick Start

Use the design-system skill to generate CSS variables from your token configuration and create a brand-compliant investor pitch deck with ten slides.

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

Design tokens are generated using a three-layer architecture that organizes primitive, semantic, and component decisions into scalable CSS variables. This system ensures UI consistency and scalable theming for frontend development.

What is the best way to create brand-compliant presentations and investor pitch decks?▼

Brand-compliant presentations are created by applying design tokens and Chart.js integration to generate investor pitch decks. This approach ensures slides adhere to brand guidelines through automated token validation.

Can I use this design system to define specifications for UI elements like buttons and cards?▼

Yes, the design system provides detailed component specifications for buttons, inputs, cards, badges, alerts, dialogs, and tables. These specs include all states and variants to maintain UI system consistency.

How do I validate CSS variables and prevent hardcoded values in my HTML files?▼

Validation scripts check HTML and CSS files to ensure no hardcoded values exist and that design tokens are properly used. This token validation enforces strict brand compliance across the entire UI system.

Does this design token architecture support scalable theming for frontend development?▼

Yes, the three-layer token architecture supports scalable theming by separating primitive, semantic, and component tokens. This organization allows frontend teams to maintain and scale UI themes efficiently.

Why does my UI implementation suffer from inconsistent styling across product components?▼

Inconsistent UI implementation occurs when design decisions are not centralized into a systematic token architecture. Applying a three-layer design token system eliminates hardcoded values and ensures component consistency.

Related Skills

Explore More Design & Creative Skills→
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate
megahomewebmegahomeweb

tailwind-patterns

Enforce Tailwind CSS patterns and theming across the MegaHome UI.

Community
Intermediate
dmccrearydmccreary
90

chartjs-generator

Generate interactive Chart.js visualizations with HTML, CSS, and documentation packages.

Community
Intermediate
PavkaBrikaPavkaBrika
1

extract

Plans extraction of UI components and design tokens into a centralized system.

Community
Intermediate