React 19 & Next.js Specialist

What it does

React 19 & Next.js Specialist is a Cursor agent playbook named react-specialist. AgenticKit installs it so a session can adopt this role instead of acting as a generic coding assistant.

The react-specialist agent brings deep expertise in React 19, Next.js App Router, streaming UI, Suspense boundaries, and micro-interactions. It eliminates layout shifts, optimizes Core Web Vitals, and writes clean, reusable TypeScript UI components.

Builds modern React 19 UI, Server Components, and sleek client interactions. Frontend engineer for Cursor specializing in Next.js App Router, React Server Components, Server Actions, Tailwind/Vanilla CSS, and responsive layouts.

Why it exists

A pile of agent files is not a team. react-specialist exists so one job, react 19 & next.js specialist, has a written brief, required skills, and a stop condition.

It ships in the Engineering Kit. Skills it must read: Next.js App Router & Server Components; Design Systems, Tokens & Vanilla CSS Architecture; Web Performance & Core Web Vitals Optimization; Strict TypeScript Standards & Type Safety. Commands that adopt this role: /build-page: UI Page & Responsive Component Builder; /ship: End-to-End Feature Pipeline Shipper; /landing-fix: Landing Page CRO Audit & Copy Optimizer.

When to use it

• Building responsive landing pages and dashboard interfaces
• Refactoring client components to React Server Components
• Fixing hydration errors and React state re-render bottlenecks

When not to use it

• Do not ask react-specialist to do a different role's job. If you need a launch post, switch agents.
• Do not keep the same chat after this agent has finished its artifact. Start a reviewer in a new thread.
• Do not invoke every agent in the kit for a small change.

Example workflow

1. Install the Engineering Kit so .cursor/agents/react-specialist is on disk.
2. Run /build-page: UI Page & Responsive Component Builder, or start a chat and tell Cursor to adopt the react-specialist role.
3. The agent should read: Next.js App Router & Server Components; Design Systems, Tokens & Vanilla CSS Architecture; Web Performance & Core Web Vitals Optimization; Strict TypeScript Standards & Type Safety.
4. It produces the artifact for this role only, then stops.
5. A different agent or you review. Same-chat self-review is not a review.

Example usage

Example: "You are react-specialist. Building responsive landing pages and dashboard interfaces. Read next-app-router before you edit."

Or let the pipeline invoke it: /build-page: UI Page & Responsive Component Builder.

Capabilities you should actually see: Next.js App Router architectures (layouts, loading states, error boundaries)

Example output

• react-specialist should leave files or a written verdict, not a vibe check. Next.js App Router architectures (layouts, loading states, error boundaries) React Server Components (RSC) and Server Actions optimization
• Engineering agents should touch the slice they were given (schema, route, test, or review note) and nothing else.

Best practices

• Next.js App Router architectures (layouts, loading states, error boundaries)
• React Server Components (RSC) and Server Actions optimization
• Responsive, accessible design with zero layout shift (CLS)
• Optimistic UI state updates and client cache synchronization
• One role per chat unless a command is explicitly orchestrating a sequence.

Common mistakes

• Using react-specialist as a synonym for 'the Cursor agent'. It is a brief, not the product.
• Skipping the required skills and hoping the role name is enough.
• Letting the writer approve its own PR.
• Invoking this agent and three unrelated ones in the same prompt.