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 skills add veryCoolTimo/design-playbooks-skill --skill skillgit clone --depth 1 https://github.com/veryCoolTimo/design-playbooks-skillWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/verycooltimo/design-playbooks-skill/skill)<a href="https://agentmods.dev/skills/verycooltimo/design-playbooks-skill/skill"><img src="https://agentmods.dev/badge/skills/verycooltimo/design-playbooks-skill/skill/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/verycooltimo/design-playbooks-skill/skill"><img src="https://agentmods.dev/badge/skills/verycooltimo/design-playbooks-skill/skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What 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.1 | $0.00092 | $0.01818 |
| Opus 5 | $0.00046 | $0.00909 |
| Sonnet 5 | $0.00018 | $0.00364 |
| Haiku 4.5 | $0.00009 | $0.00182 |
Grade A, and why
design-playbooks 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 9d ago.
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.
How it starts
The opening of the file, as written. The whole thing — 128 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design References & Intelligence
Library root: ~/.claude/design-library/ (call it $LIB). Machine index: $LIB/catalog.json
(v2 — search it with scripts/find.py, don't hand-grep). Complements the official
frontend-design skill: that one sets aesthetic direction; this one supplies evidence —
real palettes, layouts, and rules synthesized from a corpus of 407 analyzed sites,
248 design works, 93 app icons, 49 OG images.
The corpus is a July-2026 snapshot; sites redesign. Trust the live URL over an old profile when they disagree, and offer to re-run Live Analyzer.
Routing — decide the task type first
| Task | Do |
|---|---|
| New page/site design | Steps 1-5 below |
| Edit existing frontend | Step 0 first, then 1-5 |
| "Make DESIGN.md for my project / like " | Generator (below) |
| Analyze a live URL | Live Analyzer (below) |
| App icon | Read $LIB/playbooks/domains/app-icons.md + $LIB/profiles/icons.md, view 3 refs from $LIB/media/app-icons/ |
| OG / share image | Read $LIB/playbooks/domains/og-images.md + $LIB/profiles/og.md, view 3 refs from $LIB/media/og-images/ |
| Motion/branding/print inspiration | grep $LIB/profiles/design.md by tag, view refs from $LIB/media/design/ |
| "Show me references for X" | Steps 1-3, present candidates with paths + URLs, stop |
Style codes
ML=minimal-light · DT=dark-tech · DN=dark-neon · CP=colorful-playful · IL=illustration ·
BT=big-type · EL=elegant-serif · PH=photo-driven · GR=gradient-mesh
Playbook file = $LIB/playbooks/styles/<full-name>.md (e.g. DT → dark-tech.md).
Valid filter values (use these exactly — don't invent):
- category: developer-tools · ai-ml · productivity · design-creative · crypto-web3 · media-consumer · fintech · marketing-sales · hardware · health · data-analytics · ecommerce-retail · security · hr-people
- tone: light · dark · page: home pricing blog product about resources solutions
company features use-cases (others live in
misc.md)
Core flow
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.
- 9d ago First seen · 128 lines · 92 tokens per session scan A 12c584c7d90d
design-playbooks is a skill published in the GitHub repository veryCoolTimo/design-playbooks-skill (2 stars, last pushed 2mo ago), licensed MIT. It adds 92 tokens to every session and 1,818 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
ss-studio
Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction exploration, trendy but coherent UI…
ss-copy
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone.
ss-lint
Quick automated lint — detects common design system violations in seconds.
ss-a11y
Audit a component or page for accessibility issues and fix them.
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.