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 commands/matt1398/claude-devtools/design-systemgit clone --depth 1 https://github.com/matt1398/claude-devtoolsWhat 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.00058 | $0.03802 |
| Opus 5 | $0.00029 | $0.01901 |
| Sonnet 5 | $0.00012 | $0.00760 |
| Haiku 4.5 | $0.00006 | $0.00380 |
Grade A, and why
claude-devtools: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 3d 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 — 357 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System & Visual Language
How the theming, color palette, component patterns, and styling conventions work.
Theme Architecture
Two themes (dark/light) driven by CSS custom properties in src/renderer/index.css.
Toggled via useTheme() hook which adds/removes light class on document.documentElement.
Flash prevention: a script in index.html applies the cached theme before React loads.
Theme Hook
// src/renderer/hooks/useTheme.ts
const { theme, resolvedTheme, isDark, isLight } = useTheme();
// theme: 'dark' | 'light' | 'system'
// resolvedTheme: 'dark' | 'light' (after system resolution)
Styling Convention
Colors: Always via CSS variables (theme-aware). Use inline style or Tailwind classes mapped to variables.
Layout/spacing: Tailwind utility classes.
Icons: lucide-react with size-* Tailwind classes.
// Preferred: inline style for theme-aware colors, Tailwind for layout
<div className="flex items-center gap-2 rounded-md px-3 py-2"
style={{ backgroundColor: 'var(--color-surface-raised)', color: 'var(--color-text)' }}>
<Bot className="size-4 shrink-0" style={{ color: COLOR_TEXT_SECONDARY }} />
</div>
// Also valid: Tailwind classes that reference CSS variables
<div className="bg-surface text-text border-border">
<div className="bg-surface-raised text-text-secondary">
TypeScript Constants
src/renderer/constants/cssVariables.ts centralizes CSS variable strings:
import { COLOR_TEXT_MUTED, CARD_BG, CARD_BORDER_STYLE } from '@renderer/constants/cssVariables';
<span style={{ color: COLOR_TEXT_MUTED }}>Muted text</span>
<div style={{ backgroundColor: CARD_BG, border: CARD_BORDER_STYLE }}>Card</div>
Constants cover: text colors, surfaces, borders, code blocks, diff, cards, tags, prose.
CSS Variable Reference
All defined in src/renderer/index.css under :root (dark) and :root.light.
Surfaces
| Variable | Dark | Light | Usage |
|---|---|---|---|
--color-surface |
#141416 |
#f9f9f7 |
Main background |
--color-surface-raised |
#27272a |
#f0efed |
Elevated surfaces |
--color-surface-overlay |
#27272a |
#e8e7e4 |
Overlays/modals |
--color-surface-sidebar |
#0f0f11 |
#f1f0ee |
Sidebar background |
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.
- 3d ago First seen · 357 lines · 58 tokens per session scan A b00ae0259fa3
claude-devtools:design-system is a command published in the GitHub repository matt1398/claude-devtools (3,892 stars, last pushed 3mo ago), licensed MIT. It adds 58 tokens to every session and 3,802 once invoked, about $0.0003 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-30.
Other commands, from other repositories
tokenize
Extract tokens from an existing design or stylesheet and organise them — naming, structure, and theme mapping.
create-astro-website
Create static website with Astro v5+, React, Tailwind CSS, TypeScript, with accessibility and SEO best practices.
motion
Runtime entry point for configuring global motion tokens, scroll-reveals, and micro-delight interactions in motion.js and interactions.js.
components
Runtime entry point for authoring shared component classes in components.css and generating an 8-state demo preview.
redesign
Improve an existing UI (bolder, quieter, cleaner, higher-converting) using SaglitzDesign craft standards, with measured before→after.
style-guide
Generate comprehensive design system documentation including colors, typography, spacing, components, and usage guidelines. Outputs production-ready Tailwind/CSS configuration.