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 skills add dayfinggg/openai-codex-agent-skills --skill designing-user-interfacesgit clone --depth 1 https://github.com/dayfinggg/openai-codex-agent-skillsWrote 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/dayfinggg/openai-codex-agent-skills/designing-user-interfaces)<a href="https://agentmods.dev/skills/dayfinggg/openai-codex-agent-skills/designing-user-interfaces"><img src="https://agentmods.dev/badge/skills/dayfinggg/openai-codex-agent-skills/designing-user-interfaces/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/skills/dayfinggg/openai-codex-agent-skills/designing-user-interfaces"><img src="https://agentmods.dev/badge/skills/dayfinggg/openai-codex-agent-skills/designing-user-interfaces.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.00065 | $0.02090 |
| Opus 5.5 | $0.00026 | $0.00836 |
| Sonnet 5.5 | $0.00013 | $0.00418 |
| Haiku 4.5 | $0.00006 | $0.00209 |
Grade A, and why
designing-user-interfaces 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 — 138 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Designing user interfaces
A good interface lets people reach their goal quickly, without confusion, errors, or effort spent on the interface itself. Clarity beats decoration, familiar patterns beat novelty, and every element must earn its place. When the project has a design system, brand guide, or Figma file, follow it over this skill and use its tokens and components.
Usability principles
These are Nielsen's ten heuristics in working form.
- Show system status. Every action gets visible feedback, such as a pressed state, a spinner, a progress bar, or a confirmation.
- Speak the user's language. Use words and concepts from the user's world, not internal or technical terms.
- Give control and freedom. Provide undo, cancel, back, and clear exits. Prefer undo over confirmation dialogs for reversible actions.
- Be consistent. The same thing looks and behaves the same everywhere, and platform conventions are respected.
- Prevent errors. Use constraints, sensible defaults, inline validation, and confirmation only for destructive or costly actions.
- Prefer recognition over recall. Keep options, recent items, and context visible instead of making people remember them.
- Support novices and experts. Make the simple path obvious and offer shortcuts, keyboard support, and bulk actions for frequent users.
- Keep it minimal. Remove or hide what most users rarely need, because every extra element competes with the important ones.
- Make errors recoverable. Error messages say what happened, why, and how to fix it, in plain language, next to the problem.
- Help in context. Hints, empty states, and tooltips explain the task where it happens.
Visual hierarchy and layout
- Decide the single primary action of each screen and make it the most prominent element. Secondary actions are visibly quieter.
- Build hierarchy with size, weight, spacing, and position before color.
- Use a spacing scale based on 4 or 8 units and apply it consistently. Related items sit closer together than unrelated ones.
- Align elements to a grid and keep a small number of alignment lines.
- Keep text lines readable, about 45 to 75 characters wide for body text.
- Lay out mobile first, then add columns as space grows. Content must reflow without horizontal scrolling down to 320 CSS pixels wide.
What ships with it
5 files 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 First seen · 138 lines · 65 tokens per session scan A fe433c54df09
designing-user-interfaces is a skill published in the GitHub repository dayfinggg/openai-codex-agent-skills (8 stars, last pushed today), licensed MIT. It adds 65 tokens to every session and 2,090 once invoked, about $0.0003 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-10-15.
Other skills, from other repositories
core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
build-sdf-liquid-glass
Build lightweight SDF/canvas displacement glass with Vaso. Use for responsive refractive cards, no-WebGL fallbacks, many compact surfaces, or explicit SDF requests.
build-webgl-liquid-glass
Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs. Default for refractive cards, notifications, panels, GPU bevels, and WebGL glass.
favicon-exporter
Prepare and export favicon assets from Figma in common web sizes and formats.
frontend-specialist
A front-end development workflow for building or improving web pages, components, layouts, forms, dashboards, and responsive interfaces. It covers common tools and frameworks such as React, Vue, Next.js, Tailwind, and CSS.
factory-design
Design-system discipline distilled across builds. Semantic token vocabulary (name intent, not palette position), CSS variables bridged into Tailwind, dark/light as a variable swap, single- vs two-layer token systems, component primitives as token consumers, when to promote a repeated utility cluster into a primitive…