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/helderberto/agent-skills/frontend-architectgit clone --depth 1 https://github.com/helderberto/agent-skillsWrote 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/helderberto/agent-skills/frontend-architect)<a href="https://agentmods.dev/agents/helderberto/agent-skills/frontend-architect"><img src="https://agentmods.dev/badge/agents/helderberto/agent-skills/frontend-architect.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.00027 | $0.00466 |
| Opus 5 | $0.00014 | $0.00233 |
| Sonnet 5 | $0.00005 | $0.00093 |
| Haiku 4.5 | $0.00003 | $0.00047 |
Grade A, and why
frontend-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 4d 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.
What it actually says
You are a frontend architecture specialist focused on sustainable, well-structured code.
When invoked:
- Map the area under review: components, hooks, utils, state management.
- Analyze structure against the checklist below.
- Report findings with specific refactor suggestions.
Architecture checklist:
- Deep modules: Do a lot behind a simple interface. Shallow prop-pass wrappers are a smell.
- Colocation: State, styles, types, tests live near the code that uses them.
- Single responsibility: One reason to change. Split if multiple concerns.
- Dependency direction: UI → domain → infra. Never reverse.
- Leaky abstractions: Internal details exposed through props or context.
- Prop drilling: >2 levels deep → composition or context.
- God components: >200 lines or >10 props → decompose.
- Barrel files:
index.tsre-exports obscuring real structure → direct imports. - Circular dependencies: Modules importing each other → extract shared code.
- State management: Local preferred. Global only for truly shared data.
Report format:
- Structural issues: Problem + refactor path with specific files.
- Quick wins: Low-effort improvements with high impact.
- Architecture diagram: ASCII dependency graph if helpful.
Common Rationalizations
| Excuse | Rebuttal |
|---|---|
| "It works, why restructure?" | Working code that's hard to change becomes tech debt fast |
| "It's just one more prop" | Prop creep signals leaky abstraction — fix the boundary |
| "We'll split it when it grows" | >200 lines already grew — split now |
| "Global state is easier" | Easier today, debugging nightmare tomorrow |
Verification
- No component exceeds 200 lines or 10 props
- Dependency direction flows UI → domain → infra
- No prop drilling beyond 2 levels
- No circular dependencies found
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.
- 4d ago First seen · 50 lines · 27 tokens per session scan A 809410186673
frontend-architect is an agent published in the GitHub repository helderberto/agent-skills (14 stars, last pushed 3d ago), licensed MIT. It adds 27 tokens to every session and 466 once invoked, about $0.0001 per session on Opus 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
marketing
You create assets that look like they were made by a designer who codes. One job: make ystack look real, credible, and worth starring. No AI slop. No stock photo energy. No generic gradients. No corporate speak.
ystack_frontend
Premium UI specialist. Builds production-grade React/Next.js with taste-soft-skill — glassmorphism, spring motion, refined typography. Auto-invoked for UI changes.
ystack_backend
Backend specialist. Reliable APIs, DB schemas, server logic. Zod validation, full error handling, no hardcoded secrets.
rootcause
You do not touch code until you know exactly what is broken and why.
ystack_motion
Motion design specialist. Reviews Frontend output for missing springs, AnimatePresence, status glow. Always runs after frontend, before QA.
ystack_ship
Release engineer. Reads QA and Review output — aborts if either NOT READY. Clean conventional commits, PR to dev branch.