skills.rest
nmoralescyber
nmoralescyberCOMMUNITY
Explore all skills by this author →
GitHub

ckmdesign-system

Implement three-layer CSS design token systems with primitives, semantics, and components.

Updated Apr 25, 2026
Search Tags:#typography#design-system#dark-mode#css-variables#design-tokens#component-spec#spacing-scale
One-click install
npx skills add https://github.com/nmoralescyber/claude-skill-optimization --skill ckmdesign-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckmdesign-system
Source: https://github.com/nmoralescyber/claude-skill-optimization/tree/main/skills/design/ckmdesign-system
Command: npx skills add https://github.com/nmoralescyber/claude-skill-optimization --skill ckmdesign-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent design tokens across products lead to visual drift and maintenance overhead. This skill provides a three-layer architecture to standardize primitives, semantics, and components for cohesive design systems.

Core Features & Use Cases

  • Three-layer token architecture: Layer 1 primitive tokens, Layer 2 semantic tokens, Layer 3 component tokens.
  • Consistent spacing and typography scales, plus dark-mode aliasing for theming.
  • Tooling guidance: component specs, documentation patterns, and output plans to drive design-system delivery across teams.

Quick Start

Define and implement a three-layer design token system (primitives, semantics, components) with a consistent spacing and typography scale.

Frequently Asked Questions about ckmdesign-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure CSS variables for a scalable design token system?▼

Yes, dark mode design tokens are supported through aliasing, where semantic tokens reference primitive values differently based on theme, allowing seamless dark mode theming without altering component-level CSS variables.

What is the three-layer architecture for design tokens?▼

The three-layer architecture separates design tokens into primitives (raw values like colors), semantics (purpose-based aliases like button-background), and components (specific UI applications) to prevent visual drift and reduce maintenance overhead.

How do I create consistent spacing and typography scales using design tokens?▼

Create consistent spacing and typography scales by defining primitive tokens for base units, then mapping them through semantic and component layers to enforce uniform sizing and branding across your product.

Does this design token approach work for maintaining component specs?▼

Yes, the approach includes tooling guidance for documented component specs, ensuring that UI elements align with the defined three-layer token output and maintain consistent branding across teams.

Why do my design tokens cause visual drift across different products?▼

Visual drift occurs when design tokens are inconsistent across products; implementing a standardized three-layer token architecture with documented component specs eliminates this drift and reduces maintenance overhead.

Related Skills

Explore More Design & Creative Skills→
aayushsoamaayushsoam
1

ckm:design-system

Automate design token generation and slide rendering for brand-consistent UI systems.

Community
Advanced
ProfPowellProfPowell
1

css-author

Organize CSS with layers, nesting, and design tokens.

Community
Intermediate
GemachDAOGemachDAO
4

gdex-ui-theming

Provide CSS variables, dark/light modes, and Tailwind integration for trading UI theming.

Official
Advanced
hiimtrunghiimtrung
4

ckm:design-system

Implement a three-layer token architecture with semantic tokens and CSS variables.

Community
Advanced