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.
git 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/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/commands/hermeticormus/libreuiux-claude-code/style-guide"><img src="https://agentmods.dev/badge/commands/hermeticormus/libreuiux-claude-code/style-guide.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.00024 | $0.03029 |
| Opus 5.5 | $0.00010 | $0.01212 |
| Sonnet 5.5 | $0.00005 | $0.00606 |
| Haiku 4.5 | $0.00002 | $0.00303 |
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 19d 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 — 401 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.
- 19d ago Changed · +1 lines · -6 tokens per session 03b3700749e7
- 1mo 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 (115 stars, last pushed 16d ago), licensed MIT. It adds 24 tokens to every session and 3,029 once invoked, about $0.0001 per session on Opus 5.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
prototype
Rapid UI prototyping — generates 3 visually distinct HTML/CSS components from a text prompt and serves them in a live browser gallery.
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).
p3-ux-darkmode
Defines the color strategy for dark mode with semantic colors and toggle mechanism.
bliss
Create distinctive, human-centered frontend interfaces. Use for UI components, pages, and applications with bold aesthetics and WCAG compliance.
ccc-multi-frontend
Frontend-focused multi-model workflow (research, ideation, plan, execute, optimize, review) with Gemini as the UI authority. Use for components, responsive layout, UI animation and style work.
designer
UI/UX design with Memory coordination for consistent experiences.