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.

Zur Installation springen

Repository: VKirill/antigravity-for-claude-code
Letzte Quellaktivität: 25. Mai 2026 um 13:43
Erkannte Sprache von SKILL.md: Englisch
Sterne: 15
Forks: 2

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill ckm-design-system

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer

24 Dateien

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

node scripts/validate-tokens.cjs --dir src/

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	moved → `design-system-2026/references/component-specs.md` (enriched 2026)
States & Variants	moved → `design-system-2026/references/states-and-variants.md` (enriched 2026)
Tailwind Integration	moved → `design-system-2026/references/tailwind-integration.md` (enriched 2026)

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

File	Purpose
`docs/brand-guidelines.md`	Brand identity, voice, colors
`assets/design-tokens.json`	Token definitions (primitive→semantic→component)
`assets/design-tokens.css`	CSS variables (import in slides)
`assets/css/slide-animations.css`	CSS animation library

# Basic search (auto-detect domain)
python scripts/search-slides.py "investor pitch"

# Domain-specific search
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Contextual search (Premium System)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

File	Purpose
`data/slide-strategies.csv`	15 deck structures + emotion arcs + sparkline beats
`data/slide-layouts.csv`	25 layouts + component variants + animations
`data/slide-layout-logic.csv`	Goal → Layout + break_pattern flag
`data/slide-typography.csv`	Content type → Typography scale
`data/slide-color-logic.csv`	Emotion → Color treatment
`data/slide-backgrounds.csv`	Slide type → Image category (Pexels/Unsplash)
`data/slide-copy.csv`	25 copywriting formulas (PAS, AIDA, FAB)
`data/slide-charts.csv`	25 chart types with Chart.js config

1. Parse goal/context
        ↓
2. Search slide-strategies.csv → Get strategy + emotion beats
        ↓
3. For each slide:
   a. Query slide-layout-logic.csv → layout + break_pattern
   b. Query slide-typography.csv → type scale
   c. Query slide-color-logic.csv → color treatment
   d. Query slide-backgrounds.csv → image if needed
   e. Apply animation class from slide-animations.css
        ↓
4. Generate HTML with design tokens
        ↓
5. Validate with slide-token-validator.py

"What Is" (frustration) ↔ "What Could Be" (hope)

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Use brand coral
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

/* CORRECT - uses token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* WRONG - hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

assets/designs/slides/claudekit-pitch-251223.html

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

name	ckm:design-system
description	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.
argument-hint	[component or token]
license	MIT
metadata	{"author":"claudekit","version":"1.0.0"}

name	ckm:design-system
description	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.
argument-hint	[component or token]
license	MIT
metadata	{"author":"claudekit","version":"1.0.0"}

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

ckm-design-system

Installationsoptionen

Quelldateien prüfen

Design System

When to Use

Token Architecture

Three-Layer Structure

Design System

When to Use

Token Architecture

Three-Layer Structure

Quick Start

References

Component Spec Pattern

Scripts

Templates

Integration

Slide System

Source of Truth

Slide Search (BM25)

Decision System CSVs

Contextual Decision Flow

Pattern Breaking (Duarte Sparkline)

Slide Requirements

Chart.js Integration

Token Compliance

Reference Implementation

Command

Best Practices

ckm-design-system

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

Design System

When to Use

Token Architecture

Three-Layer Structure

Design System

When to Use

Token Architecture

Three-Layer Structure

Quick Start

References

Component Spec Pattern

Scripts

Templates

Integration

Slide System

Source of Truth

Slide Search (BM25)

Decision System CSVs

Contextual Decision Flow

Pattern Breaking (Duarte Sparkline)

Slide Requirements

Chart.js Integration

Token Compliance

Reference Implementation

Command

Best Practices