component-development

---

name: component-development description: Use when creating or modifying React components. Ensures proper Server/Client component patterns, performance optimization, and accessibility. allowed-tools: Read, Edit, Write, Glob, Grep

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:

Copy// 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.