ckmdesign-system

Name: ckmdesign-system
Availability: InStock
Author: nmoralescyber

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

Ready to run

npx skills add https://github.com/nmoralescyber/claude-skill-optimization --skill ckmdesign-system

💬 Prompt for ChatGPT / Claude Chat▼

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.