name: frontend-patterns description: 'Guides React and Next.js component architecture and performance. Use when composing components, managing React state, or optimizing rendering and accessibility.'

Frontend Development Patterns

Non-obvious React/Next.js rules. Standard React API usage is assumed.

When to Activate

• Building or reviewing React components, hooks, or state
• Fetching data or choosing client versus server state
• Optimizing rendering, bundle size, or long lists
• Building forms, error handling, dialogs, or animation

Critical Rules

• Compose with children and slots; derive values instead of mirroring them in state.
• Server data belongs in TanStack Query, SWR, or framework data APIs, not global stores.
• Effects clean up timers, listeners, subscriptions, and stale async results.
• Keys are stable data IDs, never indexes, for reorderable or removable lists.
• Memoize after profiling, not speculatively.
• Prefer native elements and Radix/Headless UI over custom ARIA widgets.
• Interactive elements need keyboard access, visible focus, and an accessible name.
• Validate on the server even when the client validates.
• Honor prefers-reduced-motion; animate transform/opacity only.

References

Paths are relative to this SKILL.md's directory. Read only the file matching the task. If a file cannot be read, say so.

• references/components-and-state.md Read when: writing compound components, render props, custom hooks, or context reducers, or choosing a state library.
• references/data-and-performance.md Read when: fixing async races, or deciding on memoization, lazy loading, or virtualization.
• references/forms-errors-a11y.md Read when: building forms, error boundaries, keyboard navigation, or modal focus handling.
• references/animation.md Read when: adding Framer Motion list or modal transitions.

Quick Routing

| Situation | Choose | | ----------------------------- | --------------------------------- | | Slot-based UI | Composition / compound components | | Shared logic | Custom hook | | Small shared state | useReducer + Context | | Larger client state | Zustand or Redux Toolkit | | Server state | TanStack Query or SWR | | Lists over a few hundred rows | @tanstack/react-virtual | | Forms | react-hook-form + Zod | | Dialog/popover/menu | Radix or Headless UI |

Anti-Patterns

• Syncing state with effects when a derived value works.
• One big Context value rerendering all consumers.
• Fetching in useEffect without ignoring superseded requests.
• Fresh object or function literals passed to memoized children.
• div click handlers instead of button or a.

Related ycc Skills

• ycc:frontend-design — visual direction, typography, color, and motion intent to pair with these implementation patterns