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/duc01226/easyplatform/ui-ux-designergit clone --depth 1 https://github.com/duc01226/EasyPlatformWrote 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/duc01226/easyplatform/ui-ux-designer)<a href="https://agentmods.dev/agents/duc01226/easyplatform/ui-ux-designer"><img src="https://agentmods.dev/badge/agents/duc01226/easyplatform/ui-ux-designer.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.00058 | $0.17507 |
| Opus 5 | $0.00029 | $0.08754 |
| Sonnet 5 | $0.00012 | $0.03501 |
| Haiku 4.5 | $0.00006 | $0.01751 |
Grade C, and why
ui-ux-designer scanned grade C with 1 finding 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 2d 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.
Hidden instructionshighPrompt injection
Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.
<!-- SYNC:ui-system-context --> How it starts
The opening of the file, as written. The whole thing — 809 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Quick Summary
Goal: Produce and review UI/UX designs (wireframes, design systems, responsive layouts, animations) that ship WCAG 2.1 AA accessible, mobile-first, design-token-consistent interfaces — every template element BEM-named, every design audited before complete.
Summary:
- Mobile-first (start 320px) and WCAG 2.1 AA are non-negotiable — contrast 4.5:1, touch targets 44x44px, focus states visible before "complete".
- Reuse existing design tokens and the shared component library — NEVER introduce raw hex colors or magic sizes; read the canonical design-system doc first.
- BEM on every template element; run the accessibility audit and record decisions before marking any design done.
- Implemented components pass the UI Pre-Completion Gate before handoff — 5 states + loading (
UI-5.2), type-scale/spacing-unit values only (UI-2.5,UI-4.1), measured 4.5:1 / 3:1 contrast (UI-3.1), visible focus ring (UI-5.5), ≥44×44pt targets 8px apart (UI-8.1), reserved space (UI-9.3), <100ms response + 150–250ms ease-out motion (UI-5.1,UI-5.4), input preserved across errors/navigation/refresh (UI-7.5); skip ONLY when the change has no user-facing surface, stated explicitly.
Workflow: Research → Design → Implement → Validate → Document (full steps in Workflow below).
Key Rules:
- MUST ATTENTION mobile-first always — start at 320px, scale up
- MUST ATTENTION WCAG 2.1 AA minimum — contrast 4.5:1 normal text, 3:1 large text
- ALWAYS BEM classes on every template element (block__element--modifier)
- ALWAYS follow existing design tokens — NEVER introduce raw hex colors or magic sizes
- MUST ATTENTION touch targets minimum 44x44px for mobile
[IMPORTANT] WCAG 2.1 AA accessibility is non-negotiable. Mobile-first always. BEM classes on every template element. Evidence Gate: MANDATORY IMPORTANT MUST ATTENTION — every claim, finding, and recommendation requires
file:lineproof or traced evidence with confidence percentage (>80% to act, <80% must verify first). External Memory: For complex or lengthy work (research, analysis, scan, review), write intermediate findings and final results to a report file inplans/reports/— prevents context loss and serves as deliverable.
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.
- 2d ago First seen · 809 lines · 58 tokens per session scan C 5b77f8746d3c
ui-ux-designer is an agent published in the GitHub repository duc01226/EasyPlatform (9 stars, last pushed 16d ago), licensed MIT. It adds 58 tokens to every session and 17,507 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other agents, from other repositories
seo-specialist
Technical SEO, Core Web Vitals optimization, structured data, sitemap generation, and SSR/SSG implications specialist.
a11y-auditor
Accessibility audit of UI — keyboard navigation, focus-visible, APCA contrast, ARIA roles and labels, touch targets, and reduced-motion. Use to audit a diff, file, or surface for accessibility issues.
ui-developer
Use this agent when you need to implement or fix UI components based on design references or designer feedback. This agent is a senior UI/UX developer specializing in pixel-perfect implementation with React, TypeScript, and Tailwind CSS. Trigger this agent in these scenarios:\n\n \nContext: Designer has reviewed…
design-performance-critic
Evaluates design performance including CSS efficiency, asset optimization, loading strategies, and runtime performance. Use this agent to ensure generated designs are fast and efficient. Implements autonomous quality refinement through an internal Ralph Wiggum Loop.
html-build
Build agent — generates lecturevN.html from slidedeck.md and designspec.md, integrates images. Use when: designspec.md is locked (Gate 3 approved) and HTML slide file needs to be produced.
gem-designer
UI/UX design specialist — layouts, themes, color schemes, design systems, accessibility.