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