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/laith0003/ux-skill/frontend-engineergit 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.svg" alt="Measured on agentmods" 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 | $0.00069 | $0.05303 |
| Opus 5 | $0.00034 | $0.02652 |
| Sonnet 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 3d 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.
- 3d 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 (65 stars, last pushed 1mo ago), licensed MIT. It adds 69 tokens to every session and 5,303 once invoked, about $0.0003 per session on Opus 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
component-example-creator
Use this agent when the user requests examples for a component, asks to add stories to a component, needs documentation examples updated, or mentions creating/updating component demonstrations. Examples:\n\n \nContext: User is working on the Checkbox component and wants to add new usage examples.\nuser: "Can you…
claude
Use these instructions when Claude is helping a user integrate the public @manycore/aholo-viewer npm package into a browser application.
preview-html-author
Use ONLY as part of the /design-md skill pipeline. Builds one self-contained preview HTML file (preview.html) carrying both themes, which visually demonstrates a design.md's tokens and components. Hero on top + component showcase grid below. Writes to staging only — never to public/preview/ directly.
preview-html-reviewer
Use ONLY as part of the /design-md skill pipeline. Scores preview.html against the approved design.md and references/rubric-preview.md, producing a preview-review-{N}.json. Read-only on inputs; writes only the review JSON.
research-collector
Use ONLY as part of the /design-md skill pipeline. Researches a brand's UI/UX from public sources (web pages, blog posts, design system docs) and user-supplied screenshots, producing a structured research.md with citation-numbered claims. Do not invent facts — every concrete claim must trace to a fetched source or a…
frontend-developer
像素级 Figma 稿件还原专家。在以下任何情况下激活： 用户提供了 Figma 链接（figma.com/design/ 或 figma.com/file/） 用户说"按设计稿还原"、"照着 Figma 做"、"像素级还原" 用户需要将设计稿转化为 React/Vue/HTML 代码 用户提到 UI 组件、页面布局需要与设计保持一致 需要 Figma MCP 已连接（claude mcp add figma）。 读取设计稿的真实数据：精确的颜色值、间距、字体、组件结构， 然后生成与稿件视觉完全一致的代码。绝不凭感觉估算，所有数值来自 Figma。.