# Frontend Excellence

Modern frontend patterns for React Server Components, performance optimization, and...

- Repository: https://github.com/rohitg00/awesome-claude-code-toolkit (2800 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-05-12
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -g -a claude-code -y`
Codex: `npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -g -a codex -y`
Cursor: `npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add rohitg00/awesome-claude-code-toolkit`

## Description

Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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>
  );
}
```

Each `Suspense` boundary streams independently. Place boundaries around data-fetching components to avoid blocking the entire page.

## Code Splitting

```tsx
import dynamic from 'next/dynamic';

const HeavyEditor = dynamic(() => import('@/components/Editor'), {
  loading: () => <EditorSkeleton />,
  ssr: false,
});

const AdminPanel = dynamic(() => import('@/components/AdminPanel'));
```

Split on:
- Route boundaries (automatic in Next.js App Router)
- Conditionally rendered components (modals, drawers, admin panels)
- Heavy libraries (chart libraries, rich text editors, maps)
- Below-the-fold content

## Bundle Optimization

The rest: https://github.com/rohitg00/awesome-claude-code-toolkit/blob/HEAD/skills/frontend-excellence/SKILL.md