See React patterns for full reference.
Quick rules:
- Default to Server Components (no directive)
- Use
'use client'only for:onClick,useState,useEffect, browser APIs - Push client boundary to smallest component
- Tailwind only, use
dark:variants
Example:
// Server Component (default)
export function TaskCard({ task }: { task: Task }) {
return <div className="p-4 dark:bg-gray-800">{task.title}</div>
}
Checklist: Minimal client components, dark: variants, accessible inputs.