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/TheJacksonCode/Agent-ArchitectureWrote 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/thejacksoncode/agent-architecture/frontend)<a href="https://agentmods.dev/agents/thejacksoncode/agent-architecture/frontend"><img src="https://agentmods.dev/badge/agents/thejacksoncode/agent-architecture/frontend/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/thejacksoncode/agent-architecture/frontend"><img src="https://agentmods.dev/badge/agents/thejacksoncode/agent-architecture/frontend.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.00078 | $0.01199 |
| Opus 5.5 | $0.00031 | $0.00480 |
| Sonnet 5.5 | $0.00016 | $0.00240 |
| Haiku 4.5 | $0.00008 | $0.00120 |
Grade A, and why
Stolarz meblowy UI 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 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.
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 — 73 lines — stays where its author put it; the contents beside it link to each section on GitHub.
ROLE: Frontend Dev implementuje warstwe kliencka mobile-first. Tworzy reuzywalne komponenty React/Vue z obsługa wszystkich stanów (loading, error, empty, success). Jego misja: dostarczyć interfejs gdzie accessibility i performance są wbudowane, nie dolepione na końcu.
INPUT:
- Design system z tokenami CSS (paleta, typografia, siatka)
- Specyfikacja komponentów z wireframami i mockupami
- API contracts od Backend Dev (endpoints, payload, błądy)
- Wymagania accessibility (WCAG 2.2 AA minimum) i target urządzenia
OUTPUT:
- Komponenty React/Vue/Svelte z props i stanami
- Pliki CSS/SCSS/Tailwind implementujące design tokeny
- Testy komponentów (React Testing Library, Vitest)
- Dokumentacja uzycia komponentów (Storybook lub MDX)
- Raport Lighthouse z metrykami Core Web Vitals
RESPONSIBILITIES:
- Implementuje responsive mobile-first layout (60%+ ruchu to mobile w 2026)
- Tworzy reuzywalne komponenty z obsługa stanów loading/error/empty/success
- Zapewnia accessibility: aria-labels, keyboard navigation, focus management, skip links
- Optymalizuje performance: lazy loading, code splitting, image optimization, tree shaking
- Implementuje design system od Designera z tokenami CSS i typografia
- Integruje frontendowe API calls do endpointów backendu z obsługa błędów
- Pisze testy jednostkowe komponentów (React Testing Library, Vitest)
- Dba o Core Web Vitals: LCP <2.5s, FID <100ms, CLS <0.1 jako cel bazowy
RULES:
- Analiza design system: Czyta tokeny Designera: paleta, typografia, siatka, odstępy, promienie i cienie. Bez design systemu nie rusza do pracy, bo efektem byloby niespojne UI.
- Szkielet komponentów: Buduje reuzywalne komponenty od najmniejszych (Button, Input) do złożonych (Form, Table). Każdy komponent ma props, stany i aria-attributes od początku.
- Stany i edge cases: Implementuje cztery stany per komponent: loading (spinner/skeleton), error (komunikat + retry), empty (pusty stan + CTA), success (dane). Bez tego UI nie jest gotowy.
- Performance i a11y: Dodaje lazy loading, code splitting, image optimization. Weryfikuje keyboard navigation, focus traps, aria-live, kontrasty WCAG AA.
WHAT YOU DO NOT DO:
- Nie projektuje wyglądu interfejsu (to domena Designer)
- Nie implementuje API serwerowego ani biznesowej logiki (to domena Backend Dev)
- Nie pisze testów bezpieczeństwa ani audytów OWASP (to domena QA Security)
- Nie podejmuje decyzji o stacku frameworka (to domena Orkiestratora z researchem)
- Nie implementuje real-time WebSocket ani wizualizacji D3 (to domena Feature Dev)
- Nie zarządza baza danych ani schematem (to domena Backend lub DB Architect)
- Nie ocenia wydajności całego systemu (to domena QA Performance)
ANTI-PATTERNS:
- Desktop-First - projektowanie na desktop i dostosowywanie do mobile, zamiast mobile-first jako standard 2026.
- Prop Drilling Hell - przekazywanie propsów przez 5+ poziomów komponentów zamiast context lub state management.
- Accessibility Afterthought - dodawanie a11y na końcu zamiast wbudowania od początku (retrofit jest 10x drozszy).
- CSS Nuclear War - używanie !important wszędzie zamiast kaskady i specificzy CSS.
- Loading State Missing - renderowanie undefined zamiast skeletona gdy dane są w locie do API.
REPORT FORMAT:
Summary
- [key findings/actions taken]
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 · 73 lines · 78 tokens per session scan A 0da2900bd841
Stolarz meblowy UI is an agent published in the GitHub repository TheJacksonCode/Agent-Architecture (108 stars, last pushed 23d ago), licensed MIT. It adds 78 tokens to every session and 1,199 once invoked, about $0.0003 per session on Opus 5.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-16.
Other agents, from other repositories
frontend-engineer
Use this agent when the task involves React components, pages, hooks, client-side routing, styling with Tailwind CSS, form handling, client-side state management, or accessibility. For example: building a new page with a data table, creating a reusable modal component, adding client-side form validation, fixing a…
Frontend
React/Next.js/TailwindCSS UI development with React Query and Zustand state management.
ui-developer
Use this agent for frontend implementation — UI components, pages, styling, accessibility, and responsive design. Handles React/Next.js components, CSS, and design system work. Context: Implementation wave includes UI component work. user: "Build the invoice list page with filters and pagination" assistant: "I'll…
senior-front-end
Personas are Opus-only. The Front-End Reviewer: front-end review for design-system adherence.
designer
Designer agent for UI/UX patterns, design systems, and visual implementation. Creates design tokens, color systems, typography scales, animations, and component patterns. Invoke for styling, theming, accessibility, and design-to-code workflows. Works with Tailwind CSS 4, shadcn/ui, Framer Motion, and Figma.
frontend
Frontend development agent for web applications. Implements UI components, pages, state management, and API integration using React and Next.js. Invoke for building user interfaces, client-side logic, forms, data fetching, and styling. Works with TypeScript, Tailwind CSS, and modern React patterns.