React Patterns

Enforces React hooks rules, proper component boundaries, appropriate state management, and correct use of Next.js Server vs Client Components.

Purpose

Enforce React hooks rules, proper component boundaries, appropriate state management, and correct use of Next.js Server vs Client Components.

Trigger

Apply when writing or reviewing React or Next.js code, or when the user asks about:

• "React patterns", "hooks rules", "React best practices"
• "Next.js patterns", "SSR SSG", "React conventions"
• "寫 React", "React 規範", "Next.js 最佳實踐"

Do NOT trigger for:

• Backend-only code with no React components
• Vue or Svelte projects — different frameworks
• Pure styling work — use the ui-ux-pro-max skill instead