Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/squadcodercom/squadcoder/design-systemnpx skills add squadcodercom/squadcoder --skill design-systemgit clone --depth 1 https://github.com/squadcodercom/squadcoderWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00055 | $0.01696 |
| Opus 5 | $0.00028 | $0.00848 |
| Sonnet 5 | $0.00011 | $0.00339 |
| Haiku 4.5 | $0.00006 | $0.00170 |
Grade A, and why
ckm:design-system scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
100% identical to design-system — 2 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 245 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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 |
What ships with it
25 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- data/slide-backgrounds.csv 1.0 KB
- data/slide-charts.csv 8.4 KB
- data/slide-color-logic.csv 877 B
- data/slide-copy.csv 6.3 KB
- data/slide-layout-logic.csv 981 B
- data/slide-layouts.csv 8.6 KB
- data/slide-strategies.csv 8.0 KB
- data/slide-typography.csv 735 B
- references/component-specs.md 6.8 KB
- references/component-tokens.md 4.9 KB
- references/primitive-tokens.md 4.5 KB
- references/semantic-tokens.md 4.1 KB
- references/states-and-variants.md 4.7 KB
- references/tailwind-integration.md 5.5 KB
- references/token-architecture.md 5.2 KB
- scripts/embed-tokens.cjs 2.5 KB runs code
- scripts/fetch-background.py 12 KB runs code
- scripts/generate-slide.py 27 KB runs code
- scripts/generate-tokens.cjs 4.9 KB runs code
- scripts/html-token-validator.py 12 KB runs code
- scripts/search-slides.py 9.0 KB runs code
- scripts/slide_search_core.py 14 KB runs code
- scripts/slide-token-validator.py 973 B runs code
- scripts/validate-tokens.cjs 5.9 KB runs code
- templates/design-tokens-starter.json 7.0 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 245 lines · 55 tokens per session scan A eb484103939b
ckm:design-system is a skill published in the GitHub repository squadcodercom/squadcoder (11 stars, last pushed 2mo ago), licensed MIT. It adds 55 tokens to every session and 1,696 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to design-system, differing in 2 lines, and is treated as a copy.
Other skills, from other repositories
write-zot-themes
Help the user create, install, or package zot themes, including theme-only extensions.
python-testing
Python testing best practices using pytest including fixtures, parametrization, mocking, coverage analysis, async testing, and test organization. Use when writing or improving Python tests.
database-migrations
Database migration best practices for schema changes, data migrations, rollbacks, and zero-downtime deployments across PostgreSQL, MySQL, and common ORMs (Prisma, Drizzle, Django, TypeORM, golang-migrate). Use when planning or implementing database schema changes.
docker-patterns
Docker and Docker Compose patterns for local development, container security, networking, volume strategies, and multi-service orchestration. Use when setting up containerized development environments or reviewing Docker configurations.
python-patterns
Python-specific design patterns and best practices including protocols, dataclasses, context managers, decorators, async/await, type hints, and package organization. Use when working with Python code to apply Pythonic patterns.
st-full-workflow
Use when the user asks to run the complete end-to-end Strikethroo workflow for a work order in one shot in this repository — triggers include full workflow, end-to-end, plan and execute, do everything, run the whole strikethroo workflow. Do not use when the user wants only one stage (create a plan, generate tasks, or…