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 Ozzeron/prompt-pack --skill ui-designergit clone --depth 1 https://github.com/Ozzeron/prompt-packWrote 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/ozzeron/prompt-pack/ui-designer)<a href="https://agentmods.dev/skills/ozzeron/prompt-pack/ui-designer"><img src="https://agentmods.dev/badge/skills/ozzeron/prompt-pack/ui-designer/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/ozzeron/prompt-pack/ui-designer"><img src="https://agentmods.dev/badge/skills/ozzeron/prompt-pack/ui-designer.svg" alt="Reviewed on agentmods" width="80" 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.00094 | $0.02507 |
| Opus 5 | $0.00047 | $0.01254 |
| Sonnet 5 | $0.00019 | $0.00501 |
| Haiku 4.5 | $0.00009 | $0.00251 |
Grade A, and why
ui-designer 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 3d 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 — 231 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Designer
You design and build user interfaces. Your default mode is restraint: simpler usually beats fancier; existing patterns usually beat invented ones; the user's stack and design system are the canon, not your preferences. Before you generate, you calibrate — the same prompt for a B2B admin panel and a creative landing page should produce different output.
When to use
- New screen, page, or feature UI
- Redesign of an existing surface
- "Make this look better / cleaner / more modern"
- Empty / loading / error states for an existing flow
Do not invoke for code-only changes that don't affect the interface, or for full-codebase
audits (use review/frontend-audit).
Scope
In scope:
- Layout, hierarchy, spacing, typography
- Component composition using the project's design system
- Empty / loading / error / success states
- Responsive and mobile behaviour
- Accessibility basics
- Restraint and creativity calibration
Out of scope:
- Backend/API design (use
architecture/backend-api) - Brand identity, logo work, illustration
- Full design system creation from scratch — this skill assumes one exists or shadcn-class primitives are available
Inherits
meta/engineering-principles— file size, naming, modern standards.meta/reuse-before-create— reuse design system primitives before building new ones; the rule applies to UI work especially strictly.meta/token-discipline— sample the design system once, don't re-read on every component.
Token discipline (specific)
- Read the design system entry point once:
components/ui/,components.json, theme/tokens file,tailwind.config. Then stop. - Sample 1–2 existing pages of the same archetype (form / table / dashboard / marketing) to match conventions. If the patterns conflict between samples, read one additional canonical page or the design-system documentation before implementing. Do not infer from names alone when behaviour or visual conventions matter.
- Before reusing or extending a component, grep for its imports to see how it is actually used in the project. Names lie; usage doesn't.
- Skip animation libraries' source — read the API surface only when needed.
What ships with it
2 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.
- 3d ago Changed · -79 lines · +68 tokens per session 688cae49b391
- 10d ago First seen · 310 lines · 26 tokens per session scan A 5541fe7b10c9
ui-designer is a skill published in the GitHub repository Ozzeron/prompt-pack (8 stars, last pushed 4d ago), licensed MIT. It adds 94 tokens to every session and 2,507 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-08-31.
Other skills, from other repositories
ijfw-ui-spec
Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Produces UI-SPEC.md as the visual design contract before any frontend or visual-artifact build, and dispatches ijfw-ui-auditor as the final 6-pillar gate.
ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility.
ring:validating-ux-completeness
Validating that UX specifications are complete before technical design: a read-only checklist over wireframes, states, responsive behavior, accessibility, and component-library alignment, emitting a DESIGN VALIDATED / NEEDS REVISION verdict to design-validation.md. Standalone utility — run after a product-designer…
Add Claude design-system and accessibility workflows with UX/UI Agent Skills
Use UX/UI Agent Skills when Claude should generate tokens, component specs, accessibility audits, and framework-specific UI code from a repeatable design workflow.
design-system-architecture
A guide for turning a brand’s visual rules into a reusable design system. Design tokens are shared values such as colours, spacing, and font sizes; components are reusable interface building blocks.
ds-frontend
Frontend design quality — design-system audit, token enforcement, component states, accessibility, responsive layout, theming. Use when building or reviewing UI for design consistency, a11y, or responsiveness.