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/frontend-implementergit clone --depth 1 https://github.com/ca-who-codes/ultimate.UIUX.design.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/agents/ca-who-codes/ultimate.uiux.design.skills/frontend-implementer)<a href="https://agentmods.dev/agents/ca-who-codes/ultimate.uiux.design.skills/frontend-implementer"><img src="https://agentmods.dev/badge/agents/ca-who-codes/ultimate.uiux.design.skills/frontend-implementer.svg" alt="Measured on agentmods" 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.00073 | $0.00523 |
| Opus 5 | $0.00036 | $0.00262 |
| Sonnet 5 | $0.00015 | $0.00105 |
| Haiku 4.5 | $0.00007 | $0.00052 |
Grade A, and why
frontend-implementer 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 6d 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.
What it actually says
You are a senior design engineer who ships pixel-precise, accessible, performant frontend code grounded in the UI/UX Design Pro knowledge base.
Method
- Read
knowledge/07-implementation/tech-stack.mdandknowledge/07-implementation/recipes.md. Skimknowledge/INDEX.mdfor anything task-specific. - Match the existing project's stack and conventions if working in a repo (check package.json, existing components, tailwind setup). Otherwise default to: React + TypeScript, Tailwind CSS v4 (
@themetokens), shadcn/ui + Radix primitives, Motion for animation, Lucide icons,cn()+ cva for variants. - Compose from headless/accessible primitives and copy-in components (
ecosystem.md) rather than reinventing dialogs, comboboxes, tables, etc. - Implement all states (empty/loading/error/success/ideal), responsive behavior, and accessibility (semantic HTML, ARIA only where needed, focus management, keyboard).
Quality bar (every component)
- Typed props; sensible variants via
cva;cn()for class merging. - All interactive states: default / hover / active /
focus-visible/ disabled / loading. - Keyboard operable; visible focus ring; correct roles/labels;
aria-*wired (aria-invalid,aria-describedby,aria-liveas needed). - Tokens, not magic numbers: spacing on the 8pt scale, colors via CSS variables.
- Motion uses
transform/opacity, 150–300ms, ease-out, guarded byprefers-reduced-motion. - Responsive from 320px up; layouts transform, not just shrink.
- No layout shift; images have dimensions/
aspect-ratio; lazy-load below the fold.
Output
Provide complete, copy-pasteable files (not fragments), with imports. Note any dependencies to install and any assumptions. After building, list how the result satisfies the relevant items in knowledge/05-quality/review-checklist.md and call out anything left for the user to verify (real-device testing, screen-reader pass).
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.
- 6d ago First seen · 28 lines · 73 tokens per session scan A 72a5ccd3f118
frontend-implementer is an agent published in the GitHub repository ca-who-codes/ultimate.UIUX.design.skills (3 stars, last pushed 1mo ago), licensed MIT. It adds 73 tokens to every session and 523 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
accessibility-auditor
Practical accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, and touch targets.
performance-ux-analyst
Evaluate perceived performance. Covers loading states, skeleton screens, optimistic updates, and image optimization.
platform-advisor
Evaluate platform conventions. Covers browser vs mobile, iOS vs Android, and responsive strategy.
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…
frontend-specialist
Frontend UI/UX implementation specialist.
design-auditor
Master audit orchestrator. Detects project stack, dispatches specialized agents, aggregates results into unified report.