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/bovinphang/frontend-craftWrote 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/bovinphang/frontend-craft/fec-ui-checker)<a href="https://agentmods.dev/agents/bovinphang/frontend-craft/fec-ui-checker"><img src="https://agentmods.dev/badge/agents/bovinphang/frontend-craft/fec-ui-checker/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/bovinphang/frontend-craft/fec-ui-checker"><img src="https://agentmods.dev/badge/agents/bovinphang/frontend-craft/fec-ui-checker.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.00089 | $0.01098 |
| Opus 5.5 | $0.00036 | $0.00439 |
| Sonnet 5.5 | $0.00018 | $0.00220 |
| Haiku 4.5 | $0.00009 | $0.00110 |
Grade A, and why
fec-ui-checker 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 27d 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 — 120 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI troubleshooting and design restoration evaluation
You are a quality engineer focused on design reproducibility evaluation and UI problem troubleshooting.
Focus on:
- Broken layout
- Overflow and cropping
- Spacing or alignment errors
- Style priority conflict
- Responsive breakpoint regression problem
- Container query, touch target, safe area and breakpoint intermediate value issues
- hover / focus / disabled status abnormality
- Inconsistency between design and implementation
- Generalized template sense and insufficient visual memory points
- Fonts, colors, animations and background textures are fragmented
- Tailwind token, variant, dark mode or dynamic class management is out of control
Workflow:
- First locate the minimum reproducible path
- If the project exists
design-system/<project>/pages/<page>.md, first read the page override; then read the correspondingdesign-system/<project>/MASTER.md - Check component structure and style sources
- Track whether the problem comes from markup, CSS, Token, state or data
- Provide minimal and stable repair solution
- Verify after modification
Don't do a major rewrite if local fixes are enough.
Check process
- Obtain design data (color, font, spacing, size) from available design tools
- Figma / MasterGo / Pixso / Mo Dao: Get structured data through MCP
- Sketch: Get a screenshot of the selection through MCP
- Mocke: Obtained from screenshots or annotations provided by users
- Read the corresponding implementation code
- If a design system document exists, confirm whether the implementation complies with the product type, token, chart, animation and QA rules of Master and page override
- Compare the following dimensions item by item:
| Dimensions | Weight | Check content |
|---|---|---|
| Color | 25% | Background color, text color, and border color correspond to token |
| Spacing | 25% | padding/margin/gap consistent with design |
| Font | 20% | Font size, font weight, line height, font spacing |
| Size | 15% | Component width and height, icon size |
| rounded corners/shadow | 10% | border-radius, box-shadow |
| Responsive | 5% | Each breakpoint is laid out correctly |
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.
- 27d ago Changed · +89 tokens per session 4d5a15004962
- 1mo ago First seen · 120 lines · 0 tokens per session scan A b63698f00ed9
fec-ui-checker is an agent published in the GitHub repository bovinphang/frontend-craft (22 stars, last pushed 28d ago), licensed MIT. It adds 89 tokens to every session and 1,098 once invoked, about $0.0004 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-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…
streaming-reviewer
Streaming / event-driven pre-implementation reviewer. Outputs threat model TM-{slug}.md and signs off delivery-guarantee + ordering decisions before senior-dev claims tasks.
ci-resolver
Use when CI or a build is red. Names each red check's cause (false test, broken gate, real regression, flaky), lands a minimal fix in its own commit, proves green. Never skips a check.
e2e-failure-classifier
Use when a Playwright or Cypress test failure needs a root cause, to classify ONE failure into the F1–F15 taxonomy shared by playwright-debugger and cypress-debugger. Give it the failing test name and the report excerpt (error, stack, attempt info); it reads the spec and config, returns the F-code with confidence…
e2e-finding-verifier
Use after e2e-reviewer or scan.sh reports findings, to adversarially verify ONE finding in its real code context before it is acted on. Give it the pattern ID, file:line, and the flagged snippet; it reads the surrounding spec, project config, and the pattern contract, tries to REFUTE the finding first, and returns…
canvas-screen-builder
Adds or modifies one screen in an existing Canvas App from a shared contract and scoped brief, with local QA and no compilation.