Agent skill · design visual · aiskillstore
ckm-design-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Why this skill is useful
Adds executable scripts for generating and validating design tokens that are not commonly found in public documentation.
What it needs
Requires node, python installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Design System Token architecture, component specifications, systematic design, slide generation. When to Use Design token creation Component state definitions CSS variable systems Spacing/typography scales Design-to-code handoff Tailwind theme configuration Slide/presentation generation Token Architecture Load: references/token-architecture.md Three-Layer Structure Example: Quick Start Generate tokens: Validate usage: References Topic File ------- ------ Token Architecture references/token-architecture.md Primitive Tokens references/primitive-tokens.md Semantic Tokens references/semantic-tokens.md Component Tokens references/component-tokens.md Component Specs references/component-specs.md States & Variants references/states-and-variants.md Tailwind Integration references/tailwind-integration.md Component Spec Pattern Property Default Hover Active Disabled ---------- --------- ------- -------- ---------- Background primary primary-dark primary-darker muted Text white white white muted-fg Border none none none muted-border Shadow sm md none none Scripts Script Purpose -------- --------- generate-tokens.cjs Generate CSS from JSON token config validate-tokens.cjs Check for hardcoded values in code search-slides.py BM25 search + contextual recommendations slide-token-validator.py Validate slide HTML for token compliance fetch-background.py Fetch images from Pexels/Unsplash Templates Template Purpose ---------- --------- design-tokens-starter.json Starter JSON with three-layer structure Integration With brand: Extract primitives from brand colors/typography With ui-styling: Component tokens → Tailwind config Skill Dependencies: brand, ui-styling Primary Agents: ui-ux-designer, frontend-developer Slide System Brand-compliant presentations using design tokens + Chart.js + contextual decision system. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/ckm-design-system