frontend-excellence

npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# Frontend Excellence ## React Server Components Server Components run on the server and send rendered HTML to the client. They can directly access databases, filesystems, and internal APIs without exposing them to the browser. ```tsx // app/products/page.tsx (Server Component by default) async function ProductsPage() { const products = await db.query("SELECT * FROM products WHERE active = true"); return ( <main> <h1>Products</h1> <ProductList products={products} /> <AddToCartButton /> {/* Client Component */} </main> ); } ``` Rules: - Server Components cannot use `useState`, `useEffect`, or browser APIs - Mark interactive components with `'use client'` at the top of the file - Pass serializable props from Server to Client Components (no functions, no classes) - Keep `'use client'` boundary as deep in the tree as possible ## Streaming SSR ```tsx import { Suspense } from 'react'; export default function Dashboard() { return ( <div> <Header /> {/* renders immediately */} <Suspense fallback={<ChartSkeleton />}> <AnalyticsChart /> {/* streams when ready */} </Suspense> <Suspense fallback={<TableSkeleton />}> <RecentOrders /> {/* streams independently */} </Suspense> </div> ); } ``` Eac