frontend-componentlisted

# Frontend Component Skill **Purpose**: Guidance for creating Next.js components following server/client patterns and existing component structures. ## Overview Next.js 16+ uses App Router with Server Components by default. Client Components are only used when interactivity is needed (hooks, event handlers, browser APIs). ## Server vs Client Components ### Server Components (Default) **When to Use**: - Pages and layouts - Static content - Data fetching from API (when possible) - SEO-optimized content **Pattern**: ```typescript // No "use client" directive import { Metadata } from "next"; export const metadata: Metadata = { title: "Page Title", }; export default function PageComponent() { return <div>Static content</div>; } ``` **Example**: `frontend/app/layout.tsx`, `frontend/app/page.tsx` ### Client Components (When Needed) **When to Use**: - Interactive elements (buttons, forms, inputs) - Event handlers (onClick, onChange, etc.) - React hooks (useState, useEffect, useRouter, etc.) - Browser APIs (localStorage, window, document, etc.) - Real-time updates - Drag and drop functionality **Pattern**: ```typescript "use client"; // MUST be first line import { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; interface ComponentProps { prop1: string; prop2?: number; } export default function ComponentName({ prop1, prop2 }: ComponentProps) { const router = useRouter(); const [state, setState] = useState(""); useEffect(()