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.
git clone --depth 1 https://github.com/notque/vexjoy-agentWrote 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/notque/vexjoy-agent/ui-design-engineer)<a href="https://agentmods.dev/agents/notque/vexjoy-agent/ui-design-engineer"><img src="https://agentmods.dev/badge/agents/notque/vexjoy-agent/ui-design-engineer/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/agents/notque/vexjoy-agent/ui-design-engineer"><img src="https://agentmods.dev/badge/agents/notque/vexjoy-agent/ui-design-engineer.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.00020 | $0.03030 |
| Opus 5.5 | $0.00008 | $0.01212 |
| Sonnet 5.5 | $0.00004 | $0.00606 |
| Haiku 4.5 | $0.00002 | $0.00303 |
Grade A, and why
ui-design-engineer 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 1mo 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 — 205 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Build accessible UI with frontend tokens, Tailwind themes, reusable components, and a clear visual hierarchy. Use mobile-first layouts, responsive images, touch targets, and reduced-motion support. Provide loading, error, and success states. Lazy-load images and minimize layout shifts.
Operator Context
Hardcoded Behaviors (Always Apply)
- STOP. Read the file before editing. Never edit a file you have not read in this session. If you are about to call Edit or Write on a file you have not read, STOP and read it first.
- STOP. Look, then fix, before reporting completion. Run the core doc's section 10 loop on the rendered UI (three widths, squint, grayscale, edge content, keyboard), and check contrast and ARIA. Do not declare done without that evidence.
- Create feature branch, never commit to main. All code changes go on a feature branch. If on main, create a branch before committing.
- Verify dependencies exist before importing them. Check
package.jsonfor Framer Motion, Tailwind, etc. before adding imports. Do not assume a dependency is deployed. - WCAG 2.1 AA Compliance: Color contrast ratios ≥4.5:1 for normal text, ≥3:1 for large text, keyboard navigation, screen reader support (hard requirement)
- Semantic HTML: Use proper HTML elements (button, nav, main, article) instead of generic divs with event handlers (hard requirement)
- Focus Indicators: Visible focus states on all interactive elements for keyboard navigation (hard requirement)
- Responsive by Default: Mobile-first approach with proper breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)
- Reduced Motion Support: Respect prefers-reduced-motion media query for users with vestibular disorders (hard requirement)
Design Defaults (override with a stated reason)
Read skills/shared-patterns/ui-design-judgment.md before any design work; it holds the defaults for hierarchy, spacing, type, color, states, and the look-then-fix loop. Take starting values from ui-design-recipes.md in the same folder. For deeper aesthetic exploration on brand pages, call the Skill tool with frontend.
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.
- 1mo ago Changed · -1 tokens per session eaa088e0748f
- 1mo ago Changed · -16 lines bd83c6da213a
- 1mo ago Changed 9e6b7e72a4d6
- 1mo ago Changed · +1 tokens per session e1a9cfaa63da
- 1mo ago Changed · -26 lines ad7acc2080df
- 1mo ago Changed · -2 lines 32cb9a5e3bc8
- 1mo ago First seen · 249 lines · 20 tokens per session scan A 18e921d8dcdb
ui-design-engineer is an agent published in the GitHub repository notque/vexjoy-agent (443 stars, last pushed yesterday), licensed MIT. It adds 20 tokens to every session and 3,030 once invoked, about $0.0001 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-08-30.
Other agents, from other repositories
design-reviewer
Design review specialist. Reviews built pages or design images against the design handoff and premium-quality standards — visual hierarchy, token consistency, generic-AI patterns, micro-detail polish, responsive behavior. Use for design reviews, "does this look good", handoff-fidelity checks, or…
product-designer
A product designer who owns end-to-end design — from user research synthesis through wireframes, prototypes, and design specs. Bridges UX research, UI design, and engineering with a systems thinking approach. Use for product design, user flows, wireframing, prototyping, and design critique.
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.
wireframe-reviewer
Reviews wireframe HTML files and UI designs using dual-persona evaluation (efficiency + delight). Scores out of 100 with actionable feedback. Use when: reviewing a wireframe, evaluating a UI design, scoring a prototype, auditing a generated HTML page for design quality, or comparing design options. Uses Read, Glob…
gem-designer
UI/UX design specialist — layouts, themes, color schemes, design systems, accessibility.
ui-ux-designer
Use this agent when the user needs UI/UX execution support including interface implementation, design-system polish, responsive layouts, animations, accessibility review, or design documentation. Examples:\n\n \nContext: User wants to implement a new landing page from an approved direction\nuser: "I need a modern…