--- name: frontend-patterns description: Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. --- # Frontend Development Patterns ## Pseudo Multi-Agent Protocol (Codex) Codex does not support native subagents. Simulate role handoffs with explicit sections. Required sections (in order): ``` [ANALYST] Summary + constraints [ARCHITECT] Approach + components [EXECUTOR] Actions + changes [REVIEWER] Verification + risks ``` Modern frontend patterns for React, Next.js, and performant user interfaces. ## Component Patterns ### Composition Over Inheritance ```typescript \/\/ ✅ GOOD: Component composition interface CardProps { children: React.ReactNode variant?: 'default' | 'outlined' } export function Card({ children, variant = 'default' }: CardProps) { return

{children}<\/div> } export function CardHeader({ children }: { children: React.ReactNode }) { return

{children}<\/div> } export function CardBody({ children }: { children: React.ReactNode }) { return

{children}<\/div> } \/\/ Usage Title<\/CardHeader> Content<\/CardBody> <\/Card> ``` ### Compound Components ```typescript interface TabsContextValue { activeTab: string setActiveTab: (tab: string) => void } const TabsContext = createContext(undefined) export function Tabs({ children, defaultTab }: { children: React.ReactNode defaultTab: string }) { const [activeTab, setActiveTab] = useState(defaultTab) return ( {children} <\/TabsContext.Provider> ) } export function TabList({ children }: { children: React.ReactNode }) { return

{children}<\/div> } export function Tab({ id, children }: { id: string, children: React.ReactNode }) { const context = useContext(TabsContext) if (!context) throw new Error('Tab must be used within Tabs') return (

Something went wrong<\/h2> {this.state.error?.message}<\/p>

Something went wrong<\/h2>
{this.state.error?.message}<\/p>