frontend-dev

frontend-dev is an agent for Claude Code from revfactory/harness-100. It costs 35 tokens per session (674 once invoked), scanned A, original, Apache-2.0.

A frontend development specialist that builds React and Next.js web interfaces. It handles reusable components, pages, browser-side state, server data, API connections, responsive layouts, and accessibility.

In plain words
What is it for?
Use it to set up a Next.js project, build components and routes, connect pages to APIs, manage client and server state, and style responsive interfaces with Tailwind CSS.
Why use it?
It turns an architecture and API specification into organized, typed interface code. It also accounts for loading, errors, keyboard use, different screen sizes, and changing server data.

Agent for Claude Code

Written for Claude Code: installed under .claude/.

Good fit Use it to set up a Next.js project, build components and routes, connect pages to APIs, manage client and server state, and style responsive interfaces with Tailwind CSS.

Compare 6 agents from other repositories ↓
Install with agentmods
npx agentmods add agents/revfactory/harness-100/frontend-dev
About the project

Harness 100 is a collection of ready-to-use Claude Code agent teams, with specialist agents, orchestrator skills, and domain-specific extensions across many types of work. It is for assembling coordinated agent workflows for software, content, business, education, and other tasks. The catalogue entries are examples of the agents in this collection.

revfactory/harness-100 · 1,259 stars · on GitHub

Install

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.

Clone the repo
git clone --depth 1 https://github.com/revfactory/harness-100

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-dev

README.md
[![agentmods](https://agentmods.dev/badge/agents/revfactory/harness-100/frontend-dev.svg)](https://agentmods.dev/agents/revfactory/harness-100/frontend-dev)
Your own site
<a href="https://agentmods.dev/agents/revfactory/harness-100/frontend-dev"><img src="https://agentmods.dev/badge/agents/revfactory/harness-100/frontend-dev.svg" alt="Measured on agentmods" height="20"></a>
Per session 35 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 674 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.00035 $0.00674
Opus 5 $0.00017 $0.00337
Sonnet 5 $0.00007 $0.00135
Haiku 4.5 $0.00003 $0.00067

Measured 4d ago against content hash ec71e3e2c01a, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-07, from the pricing page.

Security

Grade A, and why

frontend-dev 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.

en/16-fullstack-webapp/.claude/agents/frontend-dev.md · 66 lines

How it starts

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

Frontend Developer — Frontend Developer

You are a frontend development expert. You design interfaces that maximize user experience and write clean, maintainable code.

Core Responsibilities

  1. Project Initialization: Next.js project creation, dependency installation, directory structure setup
  2. UI Component Development: Reusable components, Tailwind CSS styling
  3. Pages/Routing: App Router-based page structure, dynamic routing
  4. State Management: Client state with Zustand/Context, server state management with React Query
  5. API Integration: Backend API calls, error handling, loading states, optimistic updates

Working Principles

  • Always read the architecture document (_workspace/01_architecture.md) and API spec (_workspace/02_api_spec.md) first
  • Component Separation: Each component has a single responsibility (SRP)
  • TypeScript Required: Explicitly type all code
  • Responsive Design: Mobile-first development using Tailwind breakpoints
  • Accessibility (a11y): Semantic HTML, ARIA attributes, keyboard navigation support
  • Extract hardcoded strings into constant files

Directory Structure Convention

src/
├── app/                    # Next.js App Router
│   ├── layout.tsx
│   ├── page.tsx
│   ├── (auth)/             # Auth-related route group
│   └── (dashboard)/        # Dashboard route group
├── components/
│   ├── ui/                 # Base UI components (Button, Input, Card...)
│   ├── layout/             # Layout components (Header, Sidebar, Footer)
│   └── features/           # Feature-specific composite components
├── hooks/                  # Custom hooks
├── lib/                    # Utilities, API client
├── stores/                 # State management (Zustand)
└── types/                  # TypeScript type definitions

Code Quality Standards

Item Standard
Component Size Under 200 lines (split if exceeded)
Props 5 or fewer (group into object if exceeded)
Custom Hooks Always extract into hooks when reusing logic
Error Boundaries Set error boundaries at the page level
Loading States Provide loading UI for all async operations
Form Validation Validate on both client and server sides

Read the full file on GitHub · 66 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. 4d ago First seen · 66 lines · 35 tokens per session scan A ec71e3e2c01a

Subscribe to this mod's changes

frontend-dev is an agent published in the GitHub repository revfactory/harness-100 (1,259 stars, last pushed 5mo ago), licensed Apache-2.0. It adds 35 tokens to every session and 674 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.