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/andronics/claude-plugin-css-pro/css-tokensgit clone --depth 1 https://github.com/andronics/claude-plugin-css-proWhat 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.00014 | $0.02296 |
| Opus 5 | $0.00007 | $0.01148 |
| Sonnet 5 | $0.00003 | $0.00459 |
| Haiku 4.5 | $0.00001 | $0.00230 |
Grade A, and why
css-tokens 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 2d 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 — 425 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Token Manager
I'll help you manage design tokens: generate token systems, extract tokens from existing CSS, convert between formats, and apply tokens to your project.
Arguments
/css-tokens [operation] [options]
operation:
generate- Create new token systemextract- Extract tokens from existing CSSconvert- Convert between formats (CSS/Sass/JS/JSON)apply- Apply tokens to CSS filesaudit- Audit token usagesync- Sync tokens from design tools- (omit for interactive mode)
Operations
1. Generate Tokens
Create a complete design token system from scratch.
What I'll create:
tokens/
├── global/
│ ├── colors.css # Color primitives
│ ├── spacing.css # Spacing scale
│ ├── typography.css # Font tokens
│ └── effects.css # Shadows, transitions
├── semantic/
│ ├── colors.css # Semantic color tokens
│ └── spacing.css # Semantic spacing tokens
├── component/
│ ├── button.css # Button tokens
│ ├── card.css # Card tokens
│ └── input.css # Input tokens
└── tokens.css # Combined output
Token Categories:
Color Tokens
/* Global - Raw color values */
--color-blue-500: #3b82f6;
--color-gray-900: #111827;
/* Semantic - Purpose-based */
--color-primary: var(--color-blue-500);
--color-text-primary: var(--color-gray-900);
/* Component - Specific usage */
--button-bg-primary: var(--color-primary);
Spacing Tokens
/* Global - Base scale */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
/* Semantic - Context */
--spacing-md: var(--spacing-4);
--spacing-lg: var(--spacing-6);
/* Component - Usage */
--button-padding-x: var(--spacing-md);
Typography Tokens
/* Global - Sizes and weights */
--font-size-base: 1rem;
--font-weight-semibold: 600;
/* Semantic - Purpose */
--text-base: var(--font-size-base);
--text-bold: var(--font-weight-semibold);
/* Component - Application */
--button-font-size: var(--text-base);
--button-font-weight: var(--text-bold);
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.
- 2d ago First seen · 425 lines · 0 tokens per session scan A 560f5081e534
css-tokens is a command published in the GitHub repository andronics/claude-plugin-css-pro (2 stars, last pushed 10mo ago), licensed MIT. It adds 14 tokens to every session and 2,296 once invoked, about $0.0001 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 commands, from other repositories
kim-ui2code
Kim截图转代码命令 - Gemini看图分析 + Claude技术方案 + Codex代码生成 + Gemini代码审查.
bolder
Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more creative", or "make it pop" (still professional).
polish
Final quality pass: alignment, spacing, consistency, design system adherence, typography, interaction states, and code cleanup. Replaces polish + normalize + distill.
color-palette
Generate an accessible colour palette from a hex value.
ux-recommend
The v2 flagship. Runs the 5-parallel-search Python engine across 11 data manifests (75+ styles, 170+ palettes, 65+ type pairs, 120+ components, 170+ industries, 110+ UX laws, 50+ motion presets, 120+ anti-patterns, 92 brand specs) and returns a complete recommended design system for your project — with always-on…
ux-evolve
Auto-iterate the lint→polish→re-lint loop on a generated artifact until score crosses 90 or plateaus. Triggers on "polish this", "evolve this surface", "improve until score 90+", "auto-fix", "run the loop". Use when the user has a freshly generated surface that needs automatic refinement to ship-ready quality. Skip…