skills.rest
edisonabel
edisonabelCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Manage design token architecture and generate CSS variables from JSON.

Updated Feb 28, 2026
Search Tags:#design tokens#tailwind css#slide generation#css variables#brand consistency#component specifications
One-click install
npx skills add https://github.com/edisonabel/redil-alabanza-app --skill ckm-design-system-edisonabel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/edisonabel/redil-alabanza-app/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/edisonabel/redil-alabanza-app --skill ckm-design-system-edisonabel

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation and management of design tokens and generates brand-compliant presentations, ensuring consistency and efficiency in design and development workflows.

Core Features & Use Cases

  • Design Token Management: Define and generate design tokens across primitive, semantic, and component layers.
  • Systematic Design: Enforce brand consistency through CSS variables and scales for spacing, typography, and colors.
  • Slide Generation: Create presentations automatically using design tokens and data, ensuring visual coherence.
  • Use Case: A design team can use this Skill to generate a new set of design tokens for a dark mode theme, then use those tokens to automatically create a pitch deck for investors, ensuring all slides adhere to the defined brand guidelines.

Quick Start

Use the ckm:design-system skill to generate CSS variables from the design tokens JSON file.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I manage design tokens for brand consistency across UI components?▼

Design tokens manage brand consistency by defining CSS variables across primitive, semantic, and component layers. This three-layer token architecture systematically enforces scales for spacing, typography, and colors across all UI elements.

Can I generate CSS variables from design tokens for Tailwind CSS?▼

Yes, you can generate CSS variables from a design tokens JSON file for Tailwind CSS. The Skill integrates with Tailwind CSS to translate the three-layer token architecture into usable CSS variables.

What is the best way to automatically generate brand-compliant presentation slides?▼

The best way to generate brand-compliant presentation slides is by using design tokens and data. This Skill automates slide generation by applying defined primitive, semantic, and component layer tokens to ensure visual coherence.

Does this design token architecture support creating a dark mode theme?▼

Yes, the design token architecture supports creating a dark mode theme. You can define a new set of semantic and component tokens for dark mode, then generate the corresponding CSS variables to apply the theme.

How do component specifications integrate with a three-layer token system?▼

Component specifications integrate with a three-layer token system by mapping semantic design tokens to specific component attributes. This approach ensures that component styles remain consistent and systematically governed by the underlying primitive and semantic tokens.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced
frankxaifrankxai
6

arcanea-design-system

Define Arcanea design tokens, CSS variables, and UI component standards.

Community
Advanced
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
guideopsguideops

design-system

Generate presentations from primitive, semantic, and component tokens with JSON and CSS styling.

Community
Advanced