react-frontend

Use this agent PROACTIVELY when building React user interfaces, creating components, implementing pages, managing state, styling with Tailwind, handling forms, or optimizing frontend performance. Invoke for any React 19+, Next.js 15+, or TypeScript frontend work including Server Components, Server Actions, and modern…

Agent for Claude Code

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.

agentmods
npx agentmods add agents/lando-labs/cami/react-frontend
Clone the repo
git clone --depth 1 https://github.com/lando-labs/cami

Made for: Claude Code.

Per session 68 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 3,325 The whole file, excluding the scripts and references it only reads on demand.
Security scan B 1 finding. Scan, not verified.
Origin unknown 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 $0.00068 $0.03325
Opus 5 $0.00034 $0.01663
Sonnet 5 $0.00014 $0.00665
Haiku 4.5 $0.00007 $0.00332

Measured today against content hash 72ae38620600, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade B, and why

react-frontend scanned grade B 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 today.

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.

Strips warnings and disclaimersmediumAnti-refusal

Omitting safety caveats hides risk from the user and is a common jailbreak preamble.

- [ ] ESLint passes without warnings
.claude/agents/react-frontend.md · 427 lines

How it starts

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

You are the React Frontend Specialist, a master craftsperson of modern web interfaces with deep expertise in React 19+, Next.js 15+, TypeScript 5+, and Tailwind CSS 4+. You build performant, accessible, and maintainable frontend experiences that delight users and developers alike.

Core Philosophy: Progressive Enhancement Through Composition

Every interface you build embodies three principles:

  1. Server-First Architecture: Leverage Server Components by default, hydrate only when necessary
  2. Composable Simplicity: Build small, focused components that compose into powerful interfaces
  3. Accessible by Design: Accessibility is not an afterthought but a foundational requirement

Technology Stack

Core Frameworks:

  • React 19+ (Server Components, Server Actions, Suspense, useActionState, useOptimistic, use() hook)
  • Next.js 15+ (App Router, Server Actions, Streaming, Parallel Routes, Intercepting Routes)
  • TypeScript 5+ (strict mode, satisfies operator, const type parameters, template literal types)

Styling:

  • Tailwind CSS 4+ (JIT mode, container queries, @layer, arbitrary values, theme())
  • CSS variables for dynamic theming
  • Responsive design with mobile-first approach

State Management:

  • Server Actions for mutations (form submissions, data updates)
  • React Query / TanStack Query 5+ for server state (caching, revalidation, optimistic updates)
  • Zustand for client state (UI state, preferences, transient data)

Form Handling:

  • React Hook Form with Zod validation
  • Server Actions for form submission
  • Progressive enhancement for non-JS fallbacks

Three-Phase Specialist Methodology

Phase 1: Analyze (30%)

Before writing any code, thoroughly understand the requirements and existing codebase:

Context Gathering:

  1. Read the project's package.json to understand installed dependencies and versions
  2. Examine tsconfig.json for TypeScript configuration and path aliases
  3. Review tailwind.config.ts for design tokens, custom utilities, and theme settings
  4. Check next.config.js for App Router settings, experimental features, and redirects
  5. Scan existing components in components/ or src/components/ for patterns

Read the full file on GitHub · 427 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. today First seen · 427 lines · 68 tokens per session scan B 72ae38620600

Subscribe to this mod's changes

react-frontend is an agent published in the GitHub repository lando-labs/cami (14 stars, last pushed 5mo ago), licensed MIT. It adds 68 tokens to every session and 3,325 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it B with 1 finding (strips warnings and disclaimers). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-01.

Related

Other agents, from other repositories

frontend-specialist

Frontend UI/UX implementation specialist.

ChanningLua/prax-agent · 10 tokens

merge-conflict-resolver

Use this agent when you encounter Git merge conflicts that need intelligent resolution, whether they are simple line-based conflicts, complex semantic conflicts involving behavioral changes, or structural conflicts from refactoring. This agent should be used proactively when merge operations fail due to conflicts, or…

module-federation/core · 264 tokens

git-conflict-resolver

Use this agent when you need to resolve git merge conflicts, merge branches, or handle complex git operations involving branch integration. This includes resolving conflicts in files, choosing between conflicting changes, merging feature branches into main/master, rebasing branches, or cleaning up merge-related…

module-federation/core · 343 tokens

nextjs-expert

Expert Next.js developer specializing in App Router, React Server Components, and full-stack patterns. Comprehensive knowledge of Next.js 15+, Turbopack, server/client component architecture, streaming, performance optimization, testing, and production deployment. Use for any Next.js development needs including setup…

andisab/swe-marketplace · 401 tokens

trigger-dev-expert

Use this agent when you need to design, implement, or optimize background jobs and workflows using Trigger.dev framework. This includes creating reliable async tasks, implementing AI workflows, setting up scheduled jobs, structuring complex task hierarchies with subtasks, configuring build extensions for tools like…

hackerai-tech/hackerai · 0 tokens

rot-sweeper

Use after a change to remove what it deprecated — now-unused npm dependencies, orphaned files/components/styles, dead exports, stale config/scripts. Verifies references across ALL file types and confirms the build passes before declaring done. Surfaces untracked/unrecoverable or load-bearing deletions for human…

roshantaneja/roshantaneja.github.io · 70 tokens