---
name: ecc-frontend-patterns
description: Frontend development patterns for React + Next.js — composition, compound components, render-props, custom hooks (useToggle/useQuery/useDebounce), Context+Reducer state, performance (memoization/code-splitting/virtualization with @tanstack/react-virtual), controlled forms with validation, error boundaries, Framer Motion list/modal animations, accessible keyboard navigation and focus management.
category: frontend
version: 0.1.0
tags: [react, next, frontend, hooks, framer-motion, a11y]
recommended_npm: ["react", "next", "framer-motion", "@tanstack/react-virtual", "zod"]
license: MIT
author: affaan-m
source: https://github.com/affaan-m/everything-claude-code/blob/main/skills/frontend-patterns/SKILL.md
---

Modern React + Next.js patterns for maintainable, performant UIs.

## When to activate

- Building React components (composition, props, rendering)
- Managing state (`useState`, `useReducer`, Zustand, Context)
- Data fetching (SWR, React Query, server components)
- Performance (memoization, virtualization, code splitting)
- Forms (validation, controlled inputs, Zod schemas)
- Accessible, responsive UI patterns

## Pattern menu

- **Composition over inheritance** — `<Card><CardHeader/><CardBody/></Card>` beats prop trees.
- **Compound components** with React Context (e.g. `<Tabs/><TabList/><Tab id=…/>`).
- **Render props** for data-loader patterns: `<DataLoader url=…>{(data, loading, error) => …}</DataLoader>`.
- **Custom hooks**: `useToggle`, `useQuery` (with `onSuccess`/`onError`/`enabled`), `useDebounce`.
- **Context + Reducer** for cross-cutting state.
- **Memoization**: `useMemo` for expensive computation, `useCallback` for callbacks passed down, `React.memo` for pure leaves.
- **Code splitting**: `lazy(() => import('./HeavyChart'))` + `Suspense`.
- **Virtualization**: `@tanstack/react-virtual` for lists ≥ 200 items.
- **Forms**: controlled inputs + per-field error map + `validate()` before submit.
- **Error boundaries** for crash isolation.
- **Framer Motion** with `AnimatePresence` for enter/exit animations.
- **Accessibility**: `role="listbox"`, `aria-activedescendant`, focus restoration on modal close.

See [github.com/affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code/tree/main/skills/frontend-patterns) for full code examples.