agentmods.dev

chappie: Agent for Claude Code

.claude/agents/frontend-builder.md

frontend-builder is an agent for Claude Code from robconery/chappie. It costs 16 tokens per session (562 once invoked), scanned A, original, MIT.

A frontend coding agent for building React components and pages and Blazor Server pages for a specific .NET financial platform.

In plain words
What is it for?
Implementing dashboards, data visualisations, internal tools, layouts, and browser-side interactions in React or Blazor, then running the relevant tests.
Why use it?
It gives frontend work a defined process for following the project’s existing patterns, requirements, and tests. This reduces the chance of building UI that does not fit the codebase.

Agent for Claude Code

Written for Claude Code: installed under .claude/. Also seen: model in frontmatter; mentions CLAUDE.md.

This is robconery/chappie's own configuration. It tells Claude Code how to work on chappie itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything chappie configures →

not rated 11repo 6mo ago A scan 16 tokens original MIT
View source ↗ robconery/chappie
Reuse

Borrowing it

Nothing to install: this file belongs to robconery/chappie. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/robconery/chappie/main/.claude/agents/frontend-builder.md
Clone the repo
git clone --depth 1 https://github.com/robconery/chappie

Made for: Claude Code.

Wrote 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.

agentmods badge for frontend-builder

README.md
[![agentmods](https://agentmods.dev/badge/agents/robconery/chappie/frontend-builder/github.svg)](https://agentmods.dev/agents/robconery/chappie/frontend-builder)
Your own site
<a href="https://agentmods.dev/agents/robconery/chappie/frontend-builder"><img src="https://agentmods.dev/badge/agents/robconery/chappie/frontend-builder/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.

agentmods 80×15 button for frontend-builder

Your own site · 80×15
<a href="https://agentmods.dev/agents/robconery/chappie/frontend-builder"><img src="https://agentmods.dev/badge/agents/robconery/chappie/frontend-builder.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 16 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 562 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00016 $0.00562
Opus 5.5 $0.00006 $0.00225
Sonnet 5.5 $0.00003 $0.00112
Haiku 4.5 $0.00002 $0.00056

Measured 2mo ago against content hash 35516fa2dc41, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-builder 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 2mo 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.

.claude/agents/frontend-builder.md · 52 lines

How it starts

The opening of the file, as written. The whole thing — 52 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Frontend Builder

You implement UI components, pages, and client-side logic for Nephila Capital. The platform has two frontends:

  • React (Nephila.Web/) — external-facing dashboards and data visualization
  • Blazor Server (Nephila.Blazor/) — internal tooling and operations UI

Role

You build components, pages, layouts, and client-side interactions for whichever frontend the task requires. You match existing component patterns and report what you built, flagging any UX decisions.

Process

  1. Read the PRD. Load the current docs/prds/prd-*.json and identify tasks assigned to you (type: frontend or both).
  2. Read existing code. Before writing anything, read related components to match existing patterns. Check CLAUDE.md for conventions.
  3. Read the tests. The test-writer has already written tests for your tasks. Read them to understand expected behavior.
  4. Implement. Write the components and pages to satisfy the PRD and pass the tests.
  5. Run the tests. Execute dotnet test for Blazor tests; check React test command in Nephila.Web/package.json.
  6. Report. Print a short summary of what you built, UX decisions made, and anything that needs design review.

Stack

React (Nephila.Web/)

  • TypeScript strict mode
  • Vite for bundling
  • Fetches from the ASP.NET Core API — no direct DB access
  • Named exports, never default exports

Blazor Server (Nephila.Blazor/)

  • Component files end in .razor
  • Inject services via @inject — no static service locators
  • Use @code blocks for component logic
  • EventCallbacks for parent-child communication

Guidelines

  • Never create documentation files in the project. Reports go to stdout only.
  • Keep components focused. One job per component.
  • Loading and error states for every async operation the user can see.
  • Accessible by default: semantic HTML, proper labels, keyboard navigation.
  • React: named exports only, no default exports.
  • Blazor: @inject only, never service locators or static access.
  • If the PRD doesn't specify a UX detail, make a reasonable choice and flag it in your report.
  • Financial data display: always show units (currency, %, bps). Never display raw numbers without context.

Read the full file on GitHub · 52 lines

Changes

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.

  1. 2mo ago First seen · 52 lines · 16 tokens per session scan A 35516fa2dc41

Subscribe to this mod's changes

frontend-builder is an agent published in the GitHub repository robconery/chappie (11 stars, last pushed 6mo ago), licensed MIT. It adds 16 tokens to every session and 562 once invoked, about $0.0001 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-08-30.

FrontendReact
Related

Other agents, from other repositories

react18-class-surgeon

Class component migration specialist for React 16/17 → 18.3.1. Migrates all three unsafe lifecycle methods with correct semantic replacements (not just UNSAFE prefix). Migrates legacy context to createContext, string refs to React.createRef(), findDOMNode to direct refs, and ReactDOM.render to createRoot. Uses memory…

github/awesome-copilot · 81 tokens

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, and returns a proposed edit plan for the orchestrator to present for approval. Writes genpage-edit-plan.md, for the orchestrator to…

microsoft/power-platform-skills · 141 tokens

confluence-searcher

Searches Confluence and related tickets for product, architecture, rollout, and test-data context. Use when implementation or verification needs internal documentation without loading raw pages into main context.

HoangNguyen0403/agent-skills-standard · 40 tokens

react-portfolio-engineer

React portfolio/gallery sites for creatives: React 18+, Next.js App Router, image optimization.

notque/vexjoy-agent · 25 tokens

webgl-perf-profiler

Cross-cutting GL frame-rate profiler for apps/landing - measures the worst t-segment via a Chrome DevTools performance trace, then applies the landing degradation ladder IN ORDER, stopping at the first rung that passes. Has write access to apply rungs. GL frame-rate only - distinct from performance-profiler (desktop…

saeedkolivand/ai-job-hunter-app · 82 tokens

docs-app-builder

Use this agent to build a documentation application as a React app — from a repo's README, docs folder, or code. Trigger on "build a docs site", "documentation app for this project", "turn these docs into a website", "docs portal with navigation", or requests to make existing docs browsable/interactive. Returns a…

aayushostwal/nexus · 97 tokens