Design System

What it does

When your agent uses it

• Systematic design
• Brand-compliant presentations

Example prompts

• “/design-system”

Requirements

• Python 3

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 10ddd27. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 2 files in scripts/ (JavaScript and Python, from the files we listed), which the agent can run.

  Shell commands in SKILL.md call:

  • python
  • node

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Hosts in commands or code, which the agent is likely to contact:

  • cdn.jsdelivr.net

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design System loads about 1.7k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 73 tokens; SKILL.md has 376 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~73

When it runs · the whole SKILL.md, loaded when a task matches

~1.7k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~11k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Ohh-889/skyroc at commit 10ddd27, republished under its MIT licence (© Ohh-889). 376 words, ~1,709 tokens.

name

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

metadata.version

1.0.0

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

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

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

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

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

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

# 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

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"

© Ohh-889, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 28 other files (scripts, references) in .agents/skills/design-system of Ohh-889/skyroc.

• SKILL.md
• data/slide-backgrounds.csv
• data/slide-charts.csv
• data/slide-color-logic.csv
• data/slide-copy.csv
• data/slide-layout-logic.csv
• data/slide-layouts.csv
• data/slide-strategies.csv
• data/slide-typography.csv
• references/component-specs.md
• references/component-tokens.md
• references/primitive-tokens.md
• references/semantic-tokens.md
• references/states-and-variants.md
• references/tailwind-integration.md
• references/token-architecture.md
• scripts/embed-tokens.cjs
• scripts/fetch-background.py
• … and 11 more

Open the folder on GitHubat commit 10ddd27

Used in 11 other repositories

We found 19 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 11 other GitHub owners. This page covers the copy in Ohh-889/skyroc, which our catalogue first saw on October 7, 2026.

• nextlevelbuilder/ui-ux-pro-max-skill.claude/skills/design-systemcli/assets/skills/design-system
• futureboard/futureboard-studio.agents/skills/design-system.claude/skills/design-system+1 more
• cdavid817/vanehub-ai.claude/skills/design-system
• aiskillstore/marketplaceskills/nextlevelbuilder/design-systemskills/nextlevelbuilder/ckm-design-system
• lingxling/awesome-skills-cnui-ux-pro-max-skill/.claude/skills/design-systemui-ux-pro-max-skill/cli/assets/skills/design-system
• criptogus/agent-evolve-network.claude/skills/design-system
• Sidiora-Labs/centra-llm-agentsprotocol/skills/design-system
• diodeme/Gold-Band.agents/skills/ckm-design-system.claude/skills/ckm-design-system
• owshq-mec/semana-ai-data-engineer.claude/skills/design-system
• Jason904/ui-skill-labskills/ui-ux-pro-max-skill/.claude/skills/design-system.codex/skills/ui-ux-pro-max-skill/.claude/skills/design-system
• henryalouf/ruflow.agents/skills/design-system.claude/skills/design-system