wachawowachawo/claude-skills/skills/design-system/SKILL.md

ckm:design-system

Skill0 starsChanged 6 months agoMITView on GitHub

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.

We split this skill into the rules it gives an agent

6 rules. 3 are common, 0 are distinctive, and 3 are very specific to this project.

3
Common
Most of the 3 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Import assets/design-tokens.css - single source of truth
line 180
Very specific:
Use CSS variables: var(--color-primary), var(--slide-bg), etc.
line 181
Very specific:
Use Chart.js for charts (NOT CSS-only bars)
line 182
Common:
Never use raw hex in components - always reference tokens
line 239
Common:
Use HSL format for opacity control
line 242
Common:
Document every token's purpose
line 243

“Common” is measured: kept by at least 6 in 10 of the 3 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

Example:

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);

Quick Start

Generate tokens:

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

Validate usage:

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

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.

Source of Truth

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

Slide Search (BM25)

# 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

Decision System CSVs

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

Contextual Decision Flow

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

Pattern Breaking (Duarte Sparkline)

Premium decks alternate between emotions for engagement:

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

System calculates pattern breaks at 1/3 and 2/3 positions.

Slide Requirements

ALL slides MUST:

Import assets/design-tokens.css - single source of truth
Use CSS variables: var(--color-primary), var(--slide-bg), etc.
Use Chart.js for charts (NOT CSS-only bars)
Include navigation (keyboard arrows, click, progress bar)
Center align content
Focus on persuasion/conversion

Chart.js Integration

<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>

Token Compliance

/* 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';

Reference Implementation

Working example with all features:

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

Command

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

Best Practices

Never use raw hex in components - always reference tokens
Semantic layer enables theme switching (light/dark)
Component tokens enable per-component customization
Use HSL format for opacity control
Document every token's purpose
Slides must import design-tokens.css and use var() exclusively

Download now (ZIP)

Other versions26 projects use a version of this.
Word for word · 23
diodeme/Gold-Band★ 160100% same
owshq-mec/semana-ai-data-engineer★ 122100% same
klauswg/sasuke★ 17100% same
The-Utopia-Studio/skills★ 6100% same
Ntmib/jarvis-architect★ 4100% same
Bek85/claudekit-marketing★ 2100% same
jaydubya818/MissionControl★ 2100% same
Oceanjackson1/Claude-Skill★ 2100% same
adryanmoldokkr32-pixel/ui-ux-pro-max-skill★ 1100% same
hungphamwp/claude-skills★ 1100% same
13 more not listed
Edited · 2
wpgaurav/WordPress-skills★ 1994% same
jorgeasaurus/agent-skills★ 1497% same
Wrote their own version · 1
automacoescomerciaisintegradas/skills★ 1same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
Used alongsideProjects with it also use revops, site-architecture and 8 more.
Other files people use alongside this one.
- ukunal91appSkill
  revops
  When the user wants help with revenue operations, lead lifecycle management, or marketing-to-sales handoff processes. Also use when the user mentions 'RevOps,' 'revenue operations,' 'lead scoring,' 'lead routing,' 'MQL,' 'SQL,' 'pipeline stages,' 'deal desk,' 'CRM automation,' 'marketing-to-sales handoff,' 'data hygiene,' 'leads aren't getting to sales,' 'pipeline management,' 'lead qualification,' or 'when should marketing hand off to sales.' Use this for anything involving the systems and processes that connect marketing to revenue. For cold outreach emails, see cold-email. For email drip campaigns, see email-sequence. For pricing decisions, see pricing-strategy.
  Also in 5 projects that use this
- VercelSkill
  site-architecture
  Use when planning or restructuring what pages a site has and how they connect: hierarchy, navigation, URL patterns, breadcrumbs, and internal linking. Not for XML sitemaps, which are in seo-audit.
  Also in 5 projects that use this
- silvainfmSkill
  marketing-ideas
  When the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing strategies,' 'marketing tactics,' 'ways to promote,' or 'ideas to grow.' This skill provides 140 proven marketing approaches organized by category.
  Also in 6 projects that use this
- ukunal91appSkill
  ad-creative
  When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.
  Also in 5 projects that use this
- silvainfmSkill
  copy-editing
  When the user wants to edit, review, or improve existing marketing copy. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' or 'copy sweep.' This skill provides a systematic approach to editing marketing copy through multiple focused passes.
  Also in 5 projects that use this
- buildingwithaiSkill
  sales-enablement
  Master world-class sales enablement from foundations to execution. Build comprehensive enablement programs, develop effective training and coaching systems, implement data-driven content strategies, leverage AI and modern technology stacks, establish cross-functional collaboration, measure ROI with precision, and drive revenue growth. Covers sales methodologies (MEDDIC, SPICED, BANT), maturity models (Forrester, Gartner), enablement frameworks, change management, remote enablement, market segment strategies (SMB, Mid-Market, Enterprise), and team building. Based on 2024-2025 industry research from Gartner, Forrester, Product Marketing Alliance, Sales Enablement Collective, and leading practitioners.
  Also in 4 projects that use this
- +3 more from ukunal91app
- +1 more from silvainfm
In this repository34 other files it gives its agents.
- ckm:banner-designSkill
- ckm:brandSkill
- claude-apiSkill
- data-analyzerSkill
- design-apiSkill
- ckm:designSkill
- diagnoseSkill
- drilldown-analyzerSkill
- grill-docsSkill
- grill-meSkill
- improve-archSkill
- mcp-builderSkill
- pdfSkill
- playwright-interactiveSkill
- playwrightSkill
- python-codeSkill
- python-fpSkill
- python-pep8Skill
- qaSkill
- refactorSkill
- review-securitySkill
- setup-pre-commitSkill
- ckm:slidesSkill
- tddSkill
- to-issuesSkill
- to-prdSkill
- triageSkill
- ubiquitous-languageSkill
- ckm:ui-stylingSkill
- ui-ux-pro-maxSkill
- webapp-testingSkill
- write-docsSkill
- write-skillSkill
- xlsxSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free