Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-confignpx agentmods add skills/anastasiyaw/codex-claude-code-config/ui-designWrote 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/anastasiyaw/codex-claude-code-config/ui-design)<a href="https://agentmods.dev/skills/anastasiyaw/codex-claude-code-config/ui-design"><img src="https://agentmods.dev/badge/skills/anastasiyaw/codex-claude-code-config/ui-design.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00095 | $0.01768 |
| Opus 5 | $0.00048 | $0.00884 |
| Sonnet 5 | $0.00019 | $0.00354 |
| Haiku 4.5 | $0.00010 | $0.00177 |
Grade A, and why
ui-design 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 today.
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 — 131 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Design
Use one product-surface loop. Preserve existing brand tokens and component conventions as the authority; do not replace them with a generic style guide.
Select the smallest supporting skill set
- Read
../ui-ux-pro-max/SKILL.mdfor a new surface, substantial redesign, or a visual/UX decision that needs evidence. Use its local search scripts with a short, specific query. Treat a zero-result search as zero evidence; do not invent a recommendation. Do not persist a generated design-system file unless the task explicitly asks for it. - Read
../frontend-design/SKILL.mdwhile changing an HTML, browser, or UXP frontend. Keep the implementation native to the detected stack and existing component system. Do not apply its browser CSS/ARIA recipes to a native Qt/QML surface. - Read
../motion-framer/SKILL.mdonly when the changed surface is React/JS and the project already usesmotion/framer-motion, or the user has explicitly authorized adding it. Otherwise use the platform's native primitives; never add the package merely to animate a control. - For a running surface, use the inspection tool that matches the surface: browser screenshot, interaction, accessibility-tree, and visual-diff tools are for browser/UXP/HTML. For native Qt/QML, use available native desktop and accessibility inspection instead. Never require a browser tool to prove a native application.
- For native Qt/QML, keep existing Qt Quick Controls and theme components as the authority. When custom controls or focus behavior change, consult the Qt Quick input-focus and accessibility guidance; verify native accessible semantics and keyboard behavior rather than substituting ARIA or CSS rules.
Do not load all four by default. A focused CSS fix normally needs only the implementation guidance and a focused proof.
Work in one loop
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- today Changed · +34 lines d4661527fad0
- 4d ago First seen · 97 lines · 95 tokens per session scan A b45e110279e5
ui-design is a skill published in the GitHub repository AnastasiyaW/codex-claude-code-config (149 stars, last pushed today), licensed MIT. It adds 95 tokens to every session and 1,768 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-09-03.
Other skills, from other repositories
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
impeccable
Frontend design guidance, upstream-maintained (impeccable).
web-design
Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…