ckm:design-system

Name: ckm:design-system
Availability: InStock
Author: klarbau

Standardize three-layer design tokens and generate brand-compliant slides with HTML validation.

7|1|Updated May 14, 2026

Search Tags:#design tokens #slide generation #css variables #html validation #brand compliance #component specs #tailwind integration

Ready to run

npx skills add https://github.com/klarbau/govtech-de --skill ckm-design-system-klarbau

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/klarbau/govtech-de/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/klarbau/govtech-de --skill ckm-design-system-klarbau

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill removes the guesswork from building consistent design systems and presentation assets by centralizing tokens, component specs, and reusable slide workflows.

Core Features & Use Cases

Three-layer tokens for primitive, semantic, and component values.
Component specifications for buttons, inputs, cards, badges, alerts, dialogs, and tables.
Slide generation, token embedding, and HTML validation for brand-compliant decks and assets.
Use case: create a themeable UI system, generate token-safe slides, and catch hardcoded colors, fonts, or spacing before they ship.

Quick Start

Ask the skill to generate or validate a design-token-based slide deck for your product narrative using the repository’s token, reference, and script tooling.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema

How do I prevent hardcoded colors and spacing values in my HTML validation workflow?▼

HTML validation blocks hardcoded colors, fonts, and spacing values by enforcing brand compliance through standardized design tokens. Scripted CSS output checks catch unauthorized values before assets ship, ensuring visual consistency across frontend workflows.

How do I map design tokens to a Tailwind theme for consistent UI components?▼

Tailwind integration maps semantic and component design tokens directly to theme variables. This three-layer token structure—primitive, semantic, and component—ensures buttons, inputs, and cards maintain visual consistency across your themeable UI system.

What is the best way to generate brand-compliant slide decks using CSS variables?▼

Brand-compliant slide generation embeds CSS variables and design tokens directly into presentation assets. This workflow validates HTML output against your token specifications, preventing inconsistent visual systems from shipping in product narrative decks.

Do I need three-layer design tokens to build a consistent component specification system?▼

Three-layer primitive, semantic, and component design tokens are required to standardize component specifications. This structure defines states and variants for buttons, inputs, cards, and tables while enabling scripted CSS output for frontend workflows.

Why does my design system validation fail when I use custom font values instead of design tokens?▼

Design system validation fails because HTML compliance checks block hardcoded fonts, colors, and spacing values. You must replace custom values with mapped semantic or component tokens to pass brand compliance checks and generate valid assets.

Can I use this design token system to define states and variants for UI components like dialogs and tables?▼

Yes, component specifications support state and variant definition for dialogs, tables, badges, alerts, buttons, inputs, and cards. These specs integrate with Tailwind theme mapping to ensure consistent visual rendering across your design system.