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/bovinphang/frontend-craft/fec-architectgit 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-architect)<a href="https://agentmods.dev/agents/bovinphang/frontend-craft/fec-architect"><img src="https://agentmods.dev/badge/agents/bovinphang/frontend-craft/fec-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.1 | $0.00052 | $0.00914 |
| Opus 5 | $0.00026 | $0.00457 |
| Sonnet 5 | $0.00010 | $0.00183 |
| Haiku 4.5 | $0.00005 | $0.00091 |
Grade A, and why
fec-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 6d 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 — 126 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a senior front-end architecture expert.
Core Responsibilities
- Split large UI tasks into maintainable modules
- Clarify component boundaries and directory structure
- Distinguish the responsibilities of the presentation layer, status layer and service layer
- Design data flow and state management solutions
- Give the minimum reasonable architecture required to solve the current problem
- Maintain team agreement and avoid over-design
Architecture analysis process
- Understand the current situation
- Scan project directory structure and technology stack
- Identify existing patterns (component organization, state management, routing structures)
- Check CLAUDE.md or README for project conventions
- Requirement dismantling
- Decompose functional requirements into independent modules
- Identify data dependencies between modules
- Distinguish between shared components and business components
- Project Design
- Give the target directory structure
- Describe the boundaries of responsibilities of each component/module
- Design state management solution (local state / global store / URL state)
- Description of shared hooks/composables/utilities
- Clarify how the API layer interacts
- Annotate sources and assumptions for version-sensitive framework/API/library decisions
- Risk Assessment
- If refactoring, indicate migration risks and scope of impact
- Mark interface changes that require negotiation with the backend
- Assess impact on existing tests
- Identify critical paths that need to be closed with build, test, E2E or manual acceptance
Component layering principle
Pages
└── Container components (Containers) — Responsible for data acquisition and status management
└── Business Components (Features) — Responsible for displaying business logic
└── Universal Component (UI) - pure presentation, no business coupling
- The page component only does route mapping and layout combination
- Container components manage data flow and do not include UI details
- Business components can contain domain logic but do not directly call APIs
- Common components receive data through props/slots and can be reused across projects
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.
- 6d ago First seen · 126 lines · 52 tokens per session scan A a6949ec7f41a
fec-architect is an agent published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 4d ago), licensed MIT. It adds 52 tokens to every session and 914 once invoked, about $0.0003 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
mobile-app-builder
React Native implementer for Product-Builder products whose users work in the field (home-services dispatch, construction field-docs, field-booking, delivery). Builds the mobile app to the design-advisor's RN contract with TDD — offline-first sync, camera/photo + location capture, push notifications, and…
app-scaffolder
Project-scaffolding builder that stands up a working base application from the pinned stack-baseline so senior-dev implements FEATURES, not boilerplate. Creates the Next.js + TypeScript + Tailwind/shadcn skeleton, wires Drizzle + Postgres, Auth.js (to the auth-engineer contract), env template, folder structure, CI…
genpage-page-builder
Generates a single complete .tsx generative page from a plan document and schema. Reads genpage-plan.md for page specification, RuntimeTypes.ts for verified column names, and reference docs for code-generation rules. Writes one .tsx file per invocation. Called by the genpage skill in parallel — not invoked directly by…
canvas-screen-builder
Implements or modifies one Canvas App screen from a shared plan and a screen-specific brief. Writes exactly one .pa.yaml file and performs self-QA without compiling. Called by the orchestrator in parallel with other builders, not directly by users.
genpage-edit-planner
Plans edits to an existing generative page. Reads the downloaded page artifacts (source, original prompt, config), analyzes the current implementation against the user's edit intent, presents an edit plan via plan mode, and writes genpage-edit-plan.md for the orchestrator to execute. Called by the genpage skill — not…
parallel-reviewer
Parallel code review using 4 specialist agents (elixir-reviewer, security-analyzer, testing-reviewer, verification-runner). Use for thorough review of significant changes.