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/hermeticormus/libreuiux-claude-code/style-guidegit clone --depth 1 https://github.com/HermeticOrmus/LibreUIUX-Claude-CodeWrote 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/commands/hermeticormus/libreuiux-claude-code/style-guide)<a href="https://agentmods.dev/commands/hermeticormus/libreuiux-claude-code/style-guide"><img src="https://agentmods.dev/badge/commands/hermeticormus/libreuiux-claude-code/style-guide.svg" alt="Measured on agentmods" 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 | $0.00030 | $0.03022 |
| Opus 5 | $0.00015 | $0.01511 |
| Sonnet 5 | $0.00006 | $0.00604 |
| Haiku 4.5 | $0.00003 | $0.00302 |
Grade A, and why
style-guide 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- style-guide — 100% identical, 0 lines differ
How it starts
The opening of the file, as written. The whole thing — 400 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Style Guide Generator
You are generating a comprehensive design system and style guide.
Input Collection
Before generating, gather:
-
Brand Identity (if exists)
- Existing colors, fonts, guidelines
- Or reference to /brand-identity output
-
Technical Context
- Framework: React, Vue, Svelte, vanilla
- Styling: Tailwind, CSS modules, styled-components
- Existing design tokens
-
Scope
- Full system vs. specific components
- Light mode, dark mode, or both
- Mobile considerations
Output Structure
1. Design Tokens
// design-tokens.js
export const tokens = {
colors: {
// Brand
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
950: '#172554',
},
// Generate secondary, accent following same pattern
// Semantic
success: {
light: '#dcfce7',
DEFAULT: '#22c55e',
dark: '#166534',
},
warning: {
light: '#fef3c7',
DEFAULT: '#f59e0b',
dark: '#b45309',
},
error: {
light: '#fee2e2',
DEFAULT: '#ef4444',
dark: '#b91c1c',
},
info: {
light: '#dbeafe',
DEFAULT: '#3b82f6',
dark: '#1e40af',
},
// Neutrals
gray: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
950: '#030712',
},
},
typography: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Outfit', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1.1' }],
'6xl': ['3.75rem', { lineHeight: '1.1' }],
},
fontWeight: {
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
},
},
spacing: {
px: '1px',
0: '0px',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
},
borderRadius: {
none: '0',
sm: '0.125rem',
DEFAULT: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
boxShadow: {
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
none: 'none',
},
};
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 · 400 lines · 30 tokens per session scan A de035afae427
style-guide is a command published in the GitHub repository HermeticOrmus/LibreUIUX-Claude-Code (101 stars, last pushed 3mo ago), licensed MIT. It adds 30 tokens to every session and 3,022 once invoked, about $0.0002 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-09-03.
Other commands, from other repositories
design-screen
Design a complete screen layout from a description or requirements.
design-tokens
Définition Design Tokens.
motion
Runtime entry point for configuring global motion tokens, scroll-reveals, and micro-delight interactions in motion.js and interactions.js.
sheleg-design
Apply the SHELEG Design methodology (single-clock, layered, degrade-to-calm motion) to the current landing-page / hero / scroll-animation task — or its style packs to product UI (dashboards, admin, internal tools).
audit
Perform a comprehensive CSS audit across all project files. Scores overall Divi 5 compatibility, identifies patterns and anti-patterns, and produces an actionable improvement report with prioritized fixes.
assets
Inventory .claude-design/ / — file counts, types, locations.