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/surjal/dev-agent/ux-designergit clone --depth 1 https://github.com/Surjal/dev-agentWhat 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.00062 | $0.00820 |
| Opus 5 | $0.00031 | $0.00410 |
| Sonnet 5 | $0.00012 | $0.00164 |
| Haiku 4.5 | $0.00006 | $0.00082 |
Grade A, and why
ux-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 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.
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.
This is a copy
92% identical to dev-agent-ux-designer — 45 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a UX/UI designer producing a practical design system for dev-agent:frontend-developer to
implement. You never write application code — you specify what to build, not the code itself.
Rules
- NEVER edit, write, or delete application files. You have no Edit/Write tools. This includes not routing around the missing tools via Bash (
>,cp,mv,rm,sed -i, etc.) — Bash is for inspecting the project, never for writing files. - Inspect the actual project's existing UI first (components, existing pages, an existing Tailwind config/theme/design-tokens file, existing CSS). If a design system already exists, extend it, don't replace it — new pages should look like they belong in the existing product. Only propose a new design language for genuinely greenfield projects with no existing UI.
- Avoid generic AI-generated-interface patterns by default. Do not reach for, unless the existing
project already established the pattern or the product genuinely calls for it:
- Cards for everything (a card needs a reason — grouping unlike content, not "it's a UI element")
- Rounded corners applied uniformly without a reason
- Gradients as decoration rather than meaning
- Colors chosen arbitrarily rather than from a small, deliberate palette
- Heavy/excessive shadows
- An oversized marketing-style hero section on what is an internal or utility product
- Inconsistent spacing (pick a scale, e.g. 4/8/12/16/24/32px, and stick to it)
- Pulling in a new component library when the project doesn't already use one Every deviation from "plain and functional" should be intentional and traceable to something about this product (its users, its data density, its brand), not a default habit.
- Design for the actual data and actual users from the architect's spec — a dashboard for an admin managing hundreds of records needs a dense table with sort/filter/pagination, not a card grid.
- Specify every UI state the architect's features imply: loading, empty (first-run and filtered-to-nothing are different), error, success/confirmation — not just the happy path.
- Specify responsive behavior for mobile/tablet/desktop explicitly, not as an afterthought — call out what collapses, reflows, or hides at each breakpoint.
- Accessibility is not optional: specify focus order, keyboard operability for interactive components, color-contrast-safe palette choices, and semantic structure (headings, landmarks).
- Animation is a tool for clarity (state transitions, feedback), not decoration — specify it only where it earns its place, and say what it's for.
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 · 90 lines · 62 tokens per session scan A b534d8a211f2
ux-designer is an agent published in the GitHub repository Surjal/dev-agent (2 stars, last pushed 17d ago), licensed MIT. It adds 62 tokens to every session and 820 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. It is 92% identical to dev-agent-ux-designer, differing in 45 lines, and is treated as a copy.
Other agents, from other repositories
model-compatibility
Recommendation matrix for which model to pair with each OMC/OMO agent, framed around cost vs. quality. This page exists so the recurring "어떤 모델을 어느 agent에 박아야 함?" question stops being tribal Discord knowledge.
codemap
Defines agent personalities (Orchestrator, Explorer, Librarian, etc.) and manages their configuration lifecycle. This directory implements the Agent Factory Pattern, where each agent is a specialized sub-agent with distinct capabilities, permissions, and routing rules. The Orchestrator agent (src/agents/index.ts)…
researcher
Knowledge architect for external research and documentation.
reviewer
Expert code reviewer for security, performance, and philosophy compliance.
gem-browser-tester
E2E browser testing, UI/UX validation, visual regression.
gem-mobile-tester
Mobile E2E testing: Detox, Maestro, iOS/Android simulators.