skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Generate CSS variable design tokens and brand-compliant slide HTML.

15|2|Updated May 23, 2026
Search Tags:#design tokens#slide generation#presentation design#css variables#token validation#component specifications#theme switching
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill ckm-design-system-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/design-system
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill ckm-design-system-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill prevents inconsistent branding and slow, error-prone UI work by enforcing a strict token architecture (primitive → semantic → component) for both design assets and slide generation.

Core Features & Use Cases

  • Three-layer token architecture: Build scalable primitives, semantic meanings, and component-level specs to support theme switching and per-component overrides.
  • CSS variable token system: Generate and validate a CSS variables layer so implementations stay consistent across UI and slide decks.
  • Slide/presentation generation: Produce brand-compliant slide HTML using a contextual decision flow (strategy → layout → typography → color → background → animation) with token-compliance validation.

Quick Start

Create a 10-slide investor pitch by asking the AI: “/slides:create 10-slide investor pitch for ClaudeKit Marketing”.

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 brand-compliant presentation slides using design tokens?▼

Yes, you can enforce strict CSS variable usage for UI styling workflows. The system validates that all generated slides import design-tokens.css and use CSS var() exclusively, preventing inconsistent branding and manual styling errors during design-to-code handoff.

What is the three-layer token architecture for design systems?▼

Build a token-safe presentation by defining primitive, semantic, and component tokens, then generating CSS variables and slide HTML. The system applies a contextual decision flow covering strategy, layout, typography, color, background, and animation to ensure brand compliance.

Does this approach support theme switching and component-level overrides?▼

Token validation fails when slides do not import design-tokens.css or when CSS var() is not used exclusively for styling. The system enforces these requirements through deterministic validation scripts to prevent inconsistent branding and non-compliant markup.

How do I validate that my slide HTML is token-safe?▼

You need contextual slide decision CSVs that guide the generation flow from strategy through animation. These CSVs drive the deterministic transformation of token architecture into compliant slide HTML outputs, ensuring consistent layout and typography decisions.

Related Skills

Explore More Design & Creative Skills→
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic
HarshodaiHarshodai

design-system

Manage design token architecture and generate brand-compliant HTML slide decks with Chart.js.

Community
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
WizCoderrWizCoderr

design-system

Generate design tokens, component specifications, and presentation slides.

Community
Advanced