React Agent Skill
Modern React hooks, composition, and Suspense — no class components.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Modern React hooks, composition, and Suspense — no class components.
homepage: https://yepapi.com/skills/react
metadata:
tags: [react, hooks, components, frontend]
---
# React
## Rules
- Functional components only — no class components
- Hooks at the top level only — never inside conditions, loops, or nested functions
- `useMemo`/`useCallback` only when there's a measured performance issue — don't premature-optimize
- Error boundaries for crash recovery (still class-based, that's fine)
- Suspense for async data with fallback UI
- Composition over prop drilling — use children, render props, or context
- Custom hooks for shared stateful logic — prefix with `use`
- Keys on list items — use stable IDs, never array index (unless static list)
- Controlled inputs for forms — value + onChange
- `useEffect` cleanup for subscriptions, timers, listeners
## Avoid
- Class components (except error boundaries)
- `forwardRef` in React 19+ (ref is a regular prop now)
- `useEffect` for derived state — compute during render instead
- `useEffect` for event handlers — handle in the event callback
- Prop drilling through 3+ levels — use context or compositionInstall
Why Use the React Skill?
Without this skill, your AI guesses at react patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the React skill installed. Your AI knows the context and writes code that fits.
"Refactor this component to use modern React patterns with hooks and composition"
"Build a component library with proper TypeScript types, forwardRef, and compound patterns"
"Create a React app with Suspense boundaries, error boundaries, and optimistic updates"
Works Great With
React skill — FAQ
It enforces modern React hooks, composition patterns, and Suspense usage. Your AI writes React code with proper hook patterns and never falls back to deprecated class components.
Run `npx skills add YepAPI/skills --skill react` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
The skill covers both client and server component patterns. It enforces use client only when needed and keeps server components as the default, which is the modern React approach.