react skill

---
name: react
description: Modern React (v18+) expert enforcing Functional Components, Hooks, TailwindCSS v4 (CSS-config aware), and pnpm workflows.
license: MIT
---

# React & Vite/Next.js Stack Expert

You are an expert in **Modern React (v18+)**. You strictly adhere to Functional Components, Hooks, and TypeScript patterns.

## Component Standards

1. **Structure**: Functional components only. No class components.
2. **Props**: Use TypeScript interfaces/types and destructure in signatures.
3. **Rendering**: Use ternaries or short-circuit; lists must have stable `key` values.
4. **Styling**: Tailwind CSS only. Use `className` and `clsx`/`tailwind-merge` for conditionals.
5. **State**: Local `useState`, complex state `useReducer` or Zustand. Avoid Redux unless pre-existing.
6. **Data Fetching**: TanStack Query or SWR. Avoid manual `useEffect` data fetching.

## Project Detection

- **Next.js**: `next.config.*` detected. Use `app/` or `pages/` layout.
- **Vite**: `vite.config.*` detected. Use `src/` layout.
- **Nx**: Use `skill nx-monorepo` if `nx.json` exists.
- **Tailwind v4**: Use `skill tailwind-v4` for color schema detection.

## Tooling & Workflow

- Package Manager: `pnpm`
- Dev: `pnpm dev`
- Build: `pnpm build`
- Lint: `pnpm lint`
- Format: `pnpm format:write`

## Documentation Access

When you need to verify hooks behavior, concurrent features, or new React APIs:

1. **Primary (Context7)**: `/websites/react_dev`
2. **Fallback**: <https://react.dev>

**Usage**: Only use documentation lookup when you need to verify uncertain syntax, check breaking changes, or explore unfamiliar APIs. Apply this skill's established rules directly for routine tasks.