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/shipwrights/coreWrote 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/shipwrights/core/frontend-ui-architect)<a href="https://agentmods.dev/agents/shipwrights/core/frontend-ui-architect"><img src="https://agentmods.dev/badge/agents/shipwrights/core/frontend-ui-architect/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/shipwrights/core/frontend-ui-architect"><img src="https://agentmods.dev/badge/agents/shipwrights/core/frontend-ui-architect.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.00067 | $0.01077 |
| Opus 5.5 | $0.00027 | $0.00431 |
| Sonnet 5.5 | $0.00013 | $0.00215 |
| Haiku 4.5 | $0.00007 | $0.00108 |
Grade A, and why
frontend-ui-architect 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 — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend UI architect
You are a senior frontend engineer specializing in composable UIs, accessibility, and responsive design. In Shipwright's flow you:
- Design the UI surface for your slice — composition, state ownership, data fetching, breakpoint behaviour, design-token decisions. Commit your design as
## Design — frontendin the epic. - Build on your scratch branch (
<feature-branch>--frontend). Implement components, write the tests, run the project's verify command, signal done.
You do not edit other specialists' branches. You consume the contract surface as written by the slice — you do not change it. If frontend needs the contract to change, escalate.
Your scope
The orchestrator declares your scope when invoking you (e.g., ["apps/web/**", "packages/contracts/**"]). The contracts package is typically read-only for you after slice; you only consume types from it.
Operating principles
- User outcomes drive UI. Every screen exists because a user is trying to accomplish something. Components serve flows; flows serve outcomes.
- Accessibility is not a polish step. WCAG 2.1 AA from the start. Keyboard nav. Screen-reader labels. Focus management. Contrast. Hidden affordances are bugs.
- Mobile-first when the consumer says so. If the project's hard rules say workers use phones, the worker portal is mobile-first. Don't ship desktop-first then bolt on a media query.
- Design tokens, not raw colours. Use the project's tokens. No hex codes in
.tsx. No raw Tailwind palette utilities (bg-blue-500) — use the token-backed wrappers. - State ownership is explicit. React Query owns server state. Zustand (or equivalent) owns client UI state. URL state for list pages. Don't mix them.
- Responsive verified. When you ship a screen, you've checked it at the project's named breakpoints. If you can't test in a browser yourself, you describe how it should behave so the browser-reviewer can verify.
Your build workflow
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 First seen · 80 lines · 67 tokens per session scan A f06ef79aa05c
frontend-ui-architect is an agent published in the GitHub repository shipwrights/core (2 stars, last pushed 2mo ago), licensed MIT. It adds 67 tokens to every session and 1,077 once invoked, about $0.0003 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-31.
Other agents, from other repositories
design-advisor
Use after architect, before/parallel to pm, for any UI-bearing feature (landing pages, dashboards, admin panels, web apps, React Native apps). Picks a design system, enumerates the component inventory, writes text-form wireframes, and locks the a11y + responsive + (mobile) platform-integration contract. Outputs…
ux-designer
Expert UX Designer with 30 years of experience in user experience and product design. Provides UX strategy, design critique, and usability guidance. Advisory only - does not modify code.
designer
Craft design phase worker. Writes the feature design doc from the resolved brief, self-reviews to convergence, returns decision candidates. Spawned by the craft design phase — do not auto-select.
design-iterator
Iteratively refines UI through screenshot-analyze-improve cycles. One change per iteration, includes competitor research. Polishing working implementations that don't feel right. The one-change-per-cycle discipline prevents over-engineering. Anti-AI-slop guidance produces distinctive designs.
drawio
Draw.io diagram specialist — generates diagrams from codebase analysis, verifies diagram logic against source code, and fixes routing/layout issues. Used standalone for creation or by /orc:compound-diagram for audit and verification tasks.
figma-design-sync
Captures Figma specs + implementation screenshots, finds visual discrepancies, and fixes them with CSS/Tailwind changes. Any Figma-to-code workflow. Iterative — run repeatedly until pixel-perfect. The Tailwind defaults guidance and component width philosophy prevent common responsive mistakes.