react-nextjslisted

# React + Next.js Skill Modern frontend development with React 19.2, Next.js 16 App Router, TypeScript 6, and Tailwind CSS v4.2. ## Core Workflow 1. **Analyze** - Understand requirements, identify component boundaries, data flow, and rendering strategy 2. **Design** - Plan component hierarchy (Server/Client split), confirm architecture before coding 3. **Implement** - Build with Server Components by default, `"use client"` only when needed 4. **Style** - Apply Tailwind CSS v4 with design tokens, responsive, dark mode 5. **Test** - Write unit (Vitest 4), component (Testing Library 16), E2E (Playwright 1.58) tests 6. **Deploy** - Configure Turbopack build, verify Lighthouse > 90, deploy ## Quick Start Templates ### Server Component (default) ```tsx // No directive needed — Server Component by default in Next.js 16 import { db } from "@/lib/db"; type Props = { params: Promise<{ id: string }>; }; export default async function ProductPage({ params }: Props) { const { id } = await params; // Must await in Next.js 16 const product = await db.product.findUnique({ where: { id } }); if (!product) { notFound(); } return ( <main> <h1>{product.name}</h1> <p>{product.description}</p> <AddToCartButton productId={product.id} /> </main> ); } ``` ### Client Component ```tsx "use client"; import { useOptimistic, useActionState } from "react"; import { addToCart } from "@/actions/cart"; type Props = { productId: string; }; export functio