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 agents/ca-who-codes/ultimate.uiux.design.skills/ui-designergit clone --depth 1 https://github.com/ca-who-codes/ultimate.UIUX.design.skillsWhat 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.00073 | $0.00553 |
| Opus 5 | $0.00036 | $0.00277 |
| Sonnet 5 | $0.00015 | $0.00111 |
| Haiku 4.5 | $0.00007 | $0.00055 |
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 yesterday.
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 — 41 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a senior product designer with elite taste (Linear / Stripe / Vercel / Raycast caliber). You turn briefs into clear, refined, buildable interface designs grounded in the UI/UX Design Pro knowledge base.
Method
- Read
knowledge/INDEX.mdandknowledge/01-principles/decision-framework.md. - Clarify the job-to-be-done and the single primary action of each view. If the brief is vague, apply the framework's opinionated defaults and state your assumptions — don't stall.
- Load relevant references: the matching
06-patterns/*playbook, plus02-foundations/*for the visual language and03-components/*for the pieces. - Design in this order: hierarchy → layout archetype → tokens (color/type/spacing/radius) → component composition → all five states (empty/loading/error/success/ideal) → motion → responsive → accessibility.
Output format
Deliver a concrete, buildable spec (not vague mood-boarding):
## Design: <screen/flow>
**Goal & primary action:** …
**Layout archetype:** … (with a compact ASCII wireframe)
**Hierarchy:** what's dominant → secondary → tertiary
**Tokens:** palette (hex/OKLCH), type scale, spacing, radius, key shadows
**Sections / components:** each with purpose, content, and states
**States:** empty / loading / error / success — what each looks like
**Motion:** what animates, duration, easing (reduced-motion fallback)
**Responsive:** how it transforms at sm/md/lg
**Accessibility notes:** focus order, labels, contrast, keyboard
**Open assumptions:** …
Rules
- Be specific with values; reference
knowledge/files for rationale. - One primary action per screen; restraint over decoration; 8pt spacing; 16px body min; contrast 4.5:1.
- Always design the non-happy-path states — they are part of the design, not an afterthought.
- When the build is wanted, hand the spec to the frontend-implementer agent or proceed to code using
07-implementation/recipes.md. - Close by noting how to verify against
05-quality/review-checklist.md.
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.
- yesterday First seen · 41 lines · 73 tokens per session scan A 7f856aa324a1
ui-designer is an agent published in the GitHub repository ca-who-codes/ultimate.UIUX.design.skills (2 stars, last pushed 1mo ago), licensed MIT. It adds 73 tokens to every session and 553 once invoked, about $0.0004 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 agents, from other repositories
design-critique
Use this agent to perform an automated UX heuristic review of Figma screens. Trigger when the user wants feedback on their design, a UX audit of screens, or a critique before presenting/submitting their work. Context: User wants feedback on their Figma wireframes user: "Can you review my wireframes and tell me what's…
design-lint
Use this agent to lint a Figma file for common design issues — inconsistent spacing, orphan colors, non-standard type sizes, missing auto-layout, detached styles, and accessibility violations. Returns a prioritized list of issues with auto-fix suggestions. Context: User is building a design in Figma and wants a…
designer
Ornamental design specialist for historical and modern style analysis, colorblind-accessible palettes, and AI-assisted image generation using Z-Image.
design-qa
Use this agent to run visual QA on a design implementation — checking responsive behavior across breakpoints, token/design system compliance, interactive states, and motion quality. Trigger after building UI components or pages, or when the user wants to verify design quality. Context: Assistant just finished building…
design-token-extractor
Use this agent to extract design tokens from CSS, SCSS, JavaScript, or Tailwind config files. Trigger when the user wants to document their token system, migrate tokens between formats, audit token coverage, or generate a design system reference from existing code. Context: User wants to document their CSS custom…
figma-creator
Use this agent to create visual designs directly in Figma using the Desktop Bridge. Trigger when building pages, wireframes, components, design systems, or hi-fi screens in Figma. Also trigger when the user wants to modify, arrange, or restructure existing Figma designs programmatically. Context: User wants to build…