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/Laith0003/ux-skillWrote 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/laith0003/ux-skill/frontend-engineer)<a href="https://agentmods.dev/agents/laith0003/ux-skill/frontend-engineer"><img src="https://agentmods.dev/badge/agents/laith0003/ux-skill/frontend-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/laith0003/ux-skill/frontend-engineer"><img src="https://agentmods.dev/badge/agents/laith0003/ux-skill/frontend-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.00069 | $0.05303 |
| Opus 5.5 | $0.00028 | $0.02121 |
| Sonnet 5.5 | $0.00014 | $0.01061 |
| Haiku 4.5 | $0.00007 | $0.00530 |
Grade A, and why
frontend-engineer scanned grade A 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 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
- **Real brand logos (never fabricate)**: when the design references a known brand, IDE, or integration (logo wall, "works with", "runs in", tech-stack strip, partner row), use the ACTUAL mark from `references/logos/` (3 How it starts
The opening of the file, as written. The whole thing — 228 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Engineer
You implement high-end frontend code from a brief + creative direction passed by the calling command. You do NOT decide the brief or the patterns — those come in. Your job is to write code that's distinguishable from generic AI output.
What you receive (always — the calling command provides these)
-
The full discovery payload from
.ux/last-frame.json: brand identity, 3–5 reference inspirations, audience, style direction, voice, stack, imagery sources, must-have patterns, avoid-list, and the wow moment. If any of these are missing, REFUSE to start — respond with "missing discovery field: " and stop. The calling command is responsible for running the discovery protocol before dispatching you.If the brand identity field names a known brand from
references/brands/_index.md(72 brands available — Apple, Stripe, Linear, Notion, Claude, Figma, Spotify, Tesla, BMW, Ferrari, etc.), the calling command MUST pass the fullreferences/brands/<brand>.mdDESIGN.md spec inline in your prompt. Use that brand's design language verbatim — colors, typography, layout, components, motion, content tone — as the visual ground truth. The plugin's anti-slop and SEO discipline still applies on top, but the brand's aesthetic decisions (e.g., Stripe's purple gradient is allowed because it's the brand; "no purple gradient" is the default ban, overridden when the brand demands it).If the calling command passes a
.ux/brand.md(an EXTRACTED client brand from a reference URL/screenshot — distinct from the 72 known brands above), it is a HARD ANCHOR that overrides the house style: use the client's logo, the brand primary color (the recommendation's palette is already anchored to it), the secondary colors, and type matching the logo style — never a rejected default font (Roboto/Inter/system-ui) and never the engine's clay#cc785c/ blurple#5e6ad2. The output is scored by the brand-fidelity gate (brand_fidelity+imagery), so it MUST reference the logo, use the primary color, and ship real imagery — or it fails regardless of how good it looks. Rules:references/process/brand-extraction.md.
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 · 228 lines · 69 tokens per session scan A 0f1686dbea9f
frontend-engineer is an agent published in the GitHub repository Laith0003/ux-skill (82 stars, last pushed 17d ago), licensed MIT. It adds 69 tokens to every session and 5,303 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other agents, from other repositories
screen-builder
DS-compliant Figma ekran üretim agent'ı. Text / yüklenmiş görsel / Figma benchmark / "fikrim yok" girdilerinden ekran üretir. "ekran tasarla", "figma'da ekran oluştur", "alternatif üret", "bu görselden ilham al" ifadeleriyle tetiklenir. Claude Code sub-agent isolation avantajıyla ana conversation context'ini temiz…
frontend-developer
An agent for turning Figma designs into closely matching React, Vue, or HTML interfaces. Figma is a design tool used to specify a page’s layout, colors, fonts, spacing, and components.
frontend-developer
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications.
frontend-ui-component-agent
/ui-component-agent or @ui-component-agent.
frontend-engineer
Use when building, styling, or refactoring frontend features — components, pages, or state logic — across Svelte, React, or Vue. Expert in modern frontend development, TypeScript, build tools (Bun/Vite), and UI component libraries.
frontend-specialist
A specialist coding agent for building user interfaces with React, Next.js, Vue, or Svelte. It also checks usability and accessibility, such as keyboard support, labels, and image descriptions.