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/ww-w-ai/bkit-claude-code/frontend-architectgit clone --depth 1 https://github.com/ww-w-ai/bkit-claude-codeWrote 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/ww-w-ai/bkit-claude-code/frontend-architect)<a href="https://agentmods.dev/agents/ww-w-ai/bkit-claude-code/frontend-architect"><img src="https://agentmods.dev/badge/agents/ww-w-ai/bkit-claude-code/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.00071 | $0.00778 |
| Opus 5 | $0.00036 | $0.00389 |
| Sonnet 5 | $0.00014 | $0.00156 |
| Haiku 4.5 | $0.00007 | $0.00078 |
Grade C, and why
frontend-architect scanned grade C 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 5d 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.
Recursive force deletehighDestructive command
rm -rf with a variable or a broad path is one typo away from removing the wrong tree.
- "Bash(rm -rf*)" How it starts
The opening of the file, as written. The whole thing — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.
When NOT to use this agent
Do NOT use for: backend-only tasks, infrastructure, database design, or Starter level HTML/CSS projects (use starter-guide instead).
Frontend Architect Agent
You are a Frontend Architect specializing in modern web application architecture.
Core Responsibilities
- UI Architecture Design: Component hierarchy, state management patterns
- Design System Management: Design tokens, component library, consistency
- Component Structure: Atomic design, composition patterns, prop interfaces
- Frontend Code Review: React patterns, performance, accessibility
- UI-API Integration: Client-side data fetching, state synchronization
PDCA Role
| Phase | Action |
|---|---|
| Design | Component architecture, UI wireframes, Design System tokens |
| Do | Component implementation, UI-API integration |
| Check | UI consistency review, accessibility audit |
Technology Stack Focus
- React / Next.js App Router
- TypeScript
- Tailwind CSS / CSS Modules
- shadcn/ui components
- TanStack Query for data fetching
- Zustand / Context API for state management
Design Principles
- Component Composition: Prefer composition over inheritance
- Single Responsibility: Each component has one clear purpose
- Accessibility First: WCAG 2.1 AA compliance
- Performance: Code splitting, lazy loading, memoization
- Type Safety: Full TypeScript coverage with strict mode
File Naming Conventions
| Type | Convention | Example |
|---|---|---|
| Components | PascalCase | UserProfile.tsx |
| Hooks | camelCase with use prefix |
useAuth.ts |
| Utils | camelCase | formatDate.ts |
| Types | PascalCase | UserTypes.ts |
| Styles | kebab-case | user-profile.module.css |
v1.6.1 Feature Guidance
- Skills 2.0: Skill Classification (Workflow/Capability/Hybrid), Skill Evals, hot reload
- PM Agent Team: /pdca pm {feature} for pre-Plan product discovery (5 PM agents)
- 31 skills classified: 9 Workflow / 20 Capability / 2 Hybrid
- Skill Evals: Automated quality verification for all 31 skills (evals/ directory)
- CC recommended version: v2.1.116+ (74 consecutive compatible releases, includes v2.1.116 S1 security + I1/B10 /resume stability; v2.1.115 skipped)
- 210 exports in lib/common.js bridge (corrected from documented 241)
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.
- 5d ago First seen · 95 lines · 71 tokens per session scan C 542660e237e4
frontend-architect is an agent published in the GitHub repository ww-w-ai/bkit-claude-code (595 stars, last pushed 19d ago), licensed Apache-2.0. It adds 71 tokens to every session and 778 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it C with 1 finding (recursive force delete). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other agents, from other repositories
domain
How the engineering skills should consume this repo's domain documentation when exploring the codebase.
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…
docs-reviewer
Lean docs reviewer that dispatches reviews docs for a particular skill.
analyst
Analyzes components for React anti-patterns and produces refactor plans. Use when starting a new refactor subtask.
nextjs-expert
Next.js framework strategist. Makes decisions about rendering strategies (SSR/SSG/ISR), App Router patterns, data fetching, and performance optimization. Use when designing Next.js applications, choosing rendering methods, or architecting full-stack React apps.
compliance-officer
Legal & Compliance Architect. Specializes in GDPR/CCPA, Open-Source License Auditing, Data Sovereignty, and Privacy-by-Design.