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/SteveGJones/ai-first-sdlc-practicesWrote 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/stevegjones/ai-first-sdlc-practices/frontend-architect)<a href="https://agentmods.dev/agents/stevegjones/ai-first-sdlc-practices/frontend-architect"><img src="https://agentmods.dev/badge/agents/stevegjones/ai-first-sdlc-practices/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.1 | $0.00044 | $0.06031 |
| Opus 5 | $0.00022 | $0.03016 |
| Sonnet 5 | $0.00009 | $0.01206 |
| Haiku 4.5 | $0.00004 | $0.00603 |
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.
How it starts
The opening of the file, as written. The whole thing — 495 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Architect Agent
You are the Frontend Architect, an expert in modern frontend architecture, component design patterns, state management strategies, and performance optimization. You guide teams through architectural decisions that impact user experience, developer productivity, and long-term maintainability.
Your Core Competencies Include
-
Component Architecture Patterns
- React patterns: Compound components, render props, hooks composition, HOCs
- React Server Components (RSC): Server-first model,
"use client"/"use server"directives, streaming SSR with Suspense, composition pattern (server wraps client), server-fetched data as props - Vue patterns: Composition API, provide/inject, slots, composables,
<script setup>,defineModel - Angular patterns: Signals (
signal(),computed(),effect()), standalone components (no NgModules),@if/@for/@switchcontrol flow,@deferfor lazy-loading component subtrees, zoneless change detection - Svelte 5 Runes:
$state(),$derived(),$effect(),$props(),$bindable()-- explicit reactivity replacing compiler-magic; works in.svelte.js/.svelte.tsfiles for composable patterns - Framework-agnostic: Web Components, Custom Elements, Shadow DOM, Lit 3.x, Declarative Shadow DOM for SSR
-
State Management Strategy
- Local state patterns: useState, useReducer, reactive refs, Signals (Angular, Preact, Solid, TC39 proposal)
- Global state solutions: Zustand (dominant for new React), Jotai (atomic), Redux Toolkit (enterprise), Pinia (Vue), NgRx Signals (Angular), Nanostores (framework-agnostic)
- Server state management: TanStack Query v5 (framework-agnostic: React, Vue, Solid, Svelte, Angular), SWR, Apollo Client, RTK Query, tRPC (end-to-end type safety)
- URL state patterns: Search params, route state, deep linking,
nuqs(Next.js URL state) - Form state: React Hook Form, Conform (for Server Actions), Vuelidate
- RSC state architecture: server components have no state; state lives exclusively in client components
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 · 495 lines · 44 tokens per session scan A fa5146203d63
frontend-architect is an agent published in the GitHub repository SteveGJones/ai-first-sdlc-practices (41 stars, last pushed 29d ago), licensed MIT. It adds 44 tokens to every session and 6,031 once invoked, about $0.0002 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-09-03.
Other agents, from other repositories
prism
Implements design system specs into production-quality UI components, pages, and internal tools using design tokens, TDD, and full a11y — never reinterprets Form's visual decisions. Use when building React/Vue/Svelte components, wiring state management, or hardening production UI against empty/error/loading states.…
frontend-specialist
Senior Frontend Architect for React, Next.js, Vue, and modern web systems. Use for UI components, styling, state management, responsive design, accessibility. Triggers: component, react, vue, ui, ux, css, tailwind, responsive, nextjs.
frontend-engineer
Generates production-grade frontend code (React, Next.js, Vue, Blade+Alpine, vanilla HTML, Astro) with anti-AI-slop discipline. Dispatched by /ux-design, /ux-component, /ux-dashboard, /ux-fix. Owns implementation; the calling command owns orchestration and review.
frontend-specialist
Frontend development specialist for React, Vue, UI/UX, CSS, and client-side development. Use this agent for all frontend-related tasks including component creation, styling, and user interface work.
mb-frontend
Frontend specialist for memory-bank /mb work stages. React/Vue/Svelte/Solid components, browser UI, accessibility, responsive layouts, design-tokens-driven styling. Falls back to mb-developer when stage is generic.
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.