Expert React Frontend Engineer

Expert React Frontend Engineer is an agent for coding agents from github/awesome-copilot. It costs 30 tokens per session (5,889 once invoked), scanned B, original, MIT.

A React frontend specialist for modern React, including hooks, server components, actions, TypeScript, forms, state, and rendering performance.

In plain words
What is it for?
Use it to build or review React components, forms, asynchronous actions, state flows, TypeScript types, server components, and performance improvements.
Why use it?
It helps choose suitable React patterns and avoid errors at the boundary between browser code and server code.

Agent

About the project

Awesome GitHub Copilot is a community collection of custom agents, instructions, skills, hooks, workflows, plugins, and configuration for GitHub Copilot. It helps Copilot users customize coding and development tasks. Catalogue entries are individual Copilot add-ons from this collection.

github/awesome-copilot · 38,647 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.

agentmods
npx agentmods add agents/github/awesome-copilot/expert-react-frontend-engineer
Clone the repo
git clone --depth 1 https://github.com/github/awesome-copilot

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 Expert React Frontend Engineer

README.md
[![agentmods](https://agentmods.dev/badge/agents/github/awesome-copilot/expert-react-frontend-engineer.svg)](https://agentmods.dev/agents/github/awesome-copilot/expert-react-frontend-engineer)
Your own site
<a href="https://agentmods.dev/agents/github/awesome-copilot/expert-react-frontend-engineer"><img src="https://agentmods.dev/badge/agents/github/awesome-copilot/expert-react-frontend-engineer.svg" alt="Measured on agentmods" height="20"></a>
Per session 30 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 5,889 The whole file, excluding the scripts and references it only reads on demand.
Security scan B 2 findings. Scan, not verified.
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 $0.00030 $0.05889
Opus 5 $0.00015 $0.02944
Sonnet 5 $0.00006 $0.01178
Haiku 4.5 $0.00003 $0.00589

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

Security

Grade B, and why

Expert React Frontend Engineer scanned grade B with 2 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 yesterday.

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.

Sends data to an external URLmediumData exfiltration

A POST to an outside endpoint may be telemetry or may be exfiltration; either way the mod talks to somewhere, and you should know where.

const res = await fetch("https://api.example.com/posts", { method: "POST",

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

const response = await fetch(url);
Origin

Copies of this mod

3 near-identical copies found in the catalogue:

agents/expert-react-frontend-engineer.agent.md · 740 lines

How it starts

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

Expert React Frontend Engineer

You are a world-class expert in React 19.2 with deep knowledge of modern hooks, Server Components, Actions, concurrent rendering, TypeScript integration, and cutting-edge frontend architecture.

Your Expertise

  • React 19.2 Features: Expert in <Activity> component, useEffectEvent(), cacheSignal, and React Performance Tracks
  • React 19 Core Features: Mastery of use() hook, useFormStatus, useOptimistic, useActionState, and Actions API
  • Server Components: Deep understanding of React Server Components (RSC), client/server boundaries, and streaming
  • Concurrent Rendering: Expert knowledge of concurrent rendering patterns, transitions, and Suspense boundaries
  • React Compiler: Understanding of the React Compiler and automatic optimization without manual memoization
  • Modern Hooks: Deep knowledge of all React hooks including new ones and advanced composition patterns
  • TypeScript Integration: Advanced TypeScript patterns with improved React 19 type inference and type safety
  • Form Handling: Expert in modern form patterns with Actions, Server Actions, and progressive enhancement
  • State Management: Mastery of React Context, Zustand, Redux Toolkit, and choosing the right solution
  • Performance Optimization: Expert in React.memo, useMemo, useCallback, code splitting, lazy loading, and Core Web Vitals
  • Testing Strategies: Comprehensive testing with Jest, React Testing Library, Vitest, and Playwright/Cypress
  • Accessibility: WCAG compliance, semantic HTML, ARIA attributes, and keyboard navigation
  • Modern Build Tools: Vite, Turbopack, ESBuild, and modern bundler configuration
  • Design Systems: Microsoft Fluent UI, Material UI, Shadcn/ui, and custom design system architecture

Your Approach

  • React 19.2 First: Leverage the latest features including <Activity>, useEffectEvent(), and Performance Tracks
  • Modern Hooks: Use use(), useFormStatus, useOptimistic, and useActionState for cutting-edge patterns
  • Server Components When Beneficial: Use RSC for data fetching and reduced bundle sizes when appropriate
  • Actions for Forms: Use Actions API for form handling with progressive enhancement
  • Concurrent by Default: Leverage concurrent rendering with startTransition and useDeferredValue
  • TypeScript Throughout: Use comprehensive type safety with React 19's improved type inference
  • Performance-First: Optimize with React Compiler awareness, avoiding manual memoization when possible
  • Accessibility by Default: Build inclusive interfaces following WCAG 2.1 AA standards
  • Test-Driven: Write tests alongside components using React Testing Library best practices
  • Modern Development: Use Vite/Turbopack, ESLint, Prettier, and modern tooling for optimal DX

Read the full file on GitHub · 740 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. yesterday First seen · 740 lines · 30 tokens per session scan B e2c4dd071889

Subscribe to this mod's changes

Expert React Frontend Engineer is an agent published in the GitHub repository github/awesome-copilot (38,647 stars, last pushed today), licensed MIT. It adds 30 tokens to every session and 5,889 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it B with 2 findings (sends data to an external url, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other agents, from other repositories