React & Modern Frontend Pro Prompt Pack
React & Modern Frontend Pro Prompt PackTagline: Ship production-grade React 19 apps with Server Components, Actions, and the modern frontend stack — 23+ Copilot/Cursor/Claude prompts that turn vague AI suggestions into shippable code.Who it's forFrontend engineers, full-stack developers, and engineering leads using Copilot, Cursor, or Claude Code. Whether you're shipping Next.js apps, migrating from React 18 to 19, wrangling Server Components, or just want your AI assistant to stop suggesting class components — this bundle gives it the modern frontend brain it needs.What you get React 19 Engineer agent — <Activity>, useEffectEvent, use(), Server Actions, the Compiler. Next.js App Router specialist — RSC vs. client boundaries, route handlers, parallel routes, intercepted routes. State management agent — when to use useState, useReducer, Zustand, Jotai, TanStack Query, Redux Toolkit (and when not). Forms agent — useActionState, useFormStatus, server actions, Zod validation, optimistic UI. Performance agent — Core Web Vitals, INP optimization, bundle analysis, React Compiler, code splitting. Accessibility agent — WCAG 2.2 AA, semantic HTML, ARIA done right, keyboard navigation, screen reader testing. Tailwind v4 expert — CSS-first config, design tokens, container queries, the @theme directive. Animation agent — Framer Motion / Motion One, CSS view transitions, scroll-driven animations. Component library agent — Radix, shadcn/ui, headless patterns, design system architecture. Migration instructions — React 18 → 19, JS → TS, Pages Router → App Router. Stop pasting "act as a senior React engineer" into every chat. Drop these into .github/, .cursorrules, or ~/.claude/agents/ and your assistant becomes a real frontend specialist.How to useFor GitHub Copilot (VS Code): Drop agents/*.agent.md into .github/agents/ in your repo. Drop instructions/*.instructions.md into .github/instructions/. Drop skills/ folders into .github/skills/. Reload VS Code. Pick the agent in Copilot Chat or let instructions auto-apply. For Cursor: Concatenate instructions/*.instructions.md into .cursorrules at repo root. Use agents/*.agent.md as @-mention starter prompts. For Claude Code / Claude Desktop: Place agents/ files in ~/.claude/agents/ (or project-local). Place skills/<name>/SKILL.md folders in ~/.claude/skills/. Invoke via @agent-name or auto-trigger by skill description. For ChatGPT / Custom GPTs:Open the .md, copy the body, paste as system instructions.Files includedAgents (9) agents/A01-React-19-Engineer.agent.md agents/A02-Nextjs-App-Router.agent.md agents/A03-React-State-Architect.agent.md agents/A04-React-Forms-Server-Actions.agent.md agents/A05-Frontend-Performance.agent.md agents/A06-Web-Accessibility.agent.md agents/A07-Tailwind-V4-Expert.agent.md agents/A08-React-Animation.agent.md agents/A09-Component-Library-Architect.agent.md Instructions (6) instructions/I01-React-19-Idiomatic.instructions.md instructions/I02-Nextjs-App-Router-Patterns.instructions.md instructions/I03-Tailwind-V4-Conventions.instructions.md instructions/I04-A11y-WCAG-2-2.instructions.md instructions/I05-TypeScript-React-Strict.instructions.md instructions/I06-React-Testing-Library.instructions.md Skills (8) skills/S01-React-19-Migration/ skills/S02-Nextjs-Project-Bootstrap/ skills/S03-Server-Action-Form/ skills/S04-Web-Vitals-Audit/ skills/S05-A11y-Audit/ skills/S06-Component-API-Design/ skills/S07-Bundle-Size-Optimizer/ skills/S08-Design-System-Bootstrap/ Total: ~23 prompts/skillsWhen to invoke each agent A01-React-19-Engineer — Default for any React file. Knows new hooks, Server Components, the Compiler. A02-Nextjs-App-Router — Activate inside Next.js 14+/15 projects. Routing, data fetching, server actions, middleware. A03-React-State-Architect — Designing state. Picks the right tool (useState vs. Zustand vs. TanStack Query) with reasoning. A04-React-Forms-Server-Actions — Forms work. useActionState, useFormStatus, validation, optimistic UI. A05-Frontend-Performance — Slow page or bad Core Web Vitals score. Profiles, fixes, names tradeoffs. A06-Web-Accessibility — Pre-merge a11y review. Catches issues before users / lawyers do. A07-Tailwind-V4-Expert — Tailwind v4 work. CSS-first config, @theme, container queries, design tokens. A08-React-Animation — Adding animation. Picks lib (Motion vs. CSS) and writes performant code. A09-Component-Library-Architect — Building reusable components. API design, headless patterns, accessibility. When each instruction auto-applies I01-React-19-Idiomatic — **/*.{tsx,jsx}. Bans class components, mandates functional + hooks, prefers RSC where appropriate. I02-Nextjs-App-Router-Patterns — Next.js projects. Server vs. client component boundaries, async components, route conventions. I03-Tailwind-V4-Conventions — Tailwind v4 projects. CSS-first config, no tailwind.config.js, design tokens via @theme. I04-A11y-WCAG-2-2 — Repo-wide. Semantic HTML, ARIA discipline, focus management, keyboard support. I05-TypeScript-React-Strict — **/*.{tsx,ts}. as const, satisfies, no any, exhaustive prop types. I06-React-Testing-Library — **/*.test.{tsx,ts}. RTL idioms, no getByTestId overuse, async with findBy. When to trigger each skill S01-React-19-Migration/ — Migrate React 18 → 19. Audit + step-by-step plan with deps, code, tests. S02-Nextjs-Project-Bootstrap/ — Fresh Next.js project: App Router, TS, Tailwind, Auth.js, Drizzle, CI. S03-Server-Action-Form/ — Build a form with server action: validation, optimistic UI, error handling. S04-Web-Vitals-Audit/ — Audits a page for LCP / INP / CLS regressions; outputs prioritized fix list. S05-A11y-Audit/ — Walks a component for a11y issues; reports with severity and fix. S06-Component-API-Design/ — Designs a component's prop API: variants, slots, a11y, headless option. S07-Bundle-Size-Optimizer/ — Analyzes bundle, identifies big deps, proposes alternatives + dynamic imports. S08-Design-System-Bootstrap/ — Bootstraps a design system: tokens, primitives, docs, Storybook. Why this bundle vs. free prompts 2026-current: React 19, Next.js 15, Tailwind v4, no 2022-era patterns. Whole stack: code → state → forms → perf → a11y → tests in one pack. State agnostic: picks the right tool with reasoning, doesn't push one library. Cross-tool: Copilot, Cursor, Claude Code, ChatGPT.
Get it → saisatyakam.gumroad.com