frontend-excellence

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

不碰外部（只输出文字）无严重或高危命中rohitg00/awesome-claude-code-toolkit

它会碰到什么

扫了多少1 个文本文件，5 KB

它会碰到什么不碰外部（只输出文字）

命中总数0 处

命中统计严重 0 · 高 0 · 中 0 · 低 0

这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。

技能内容

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.

// 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

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

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

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ['lucide-react', '@heroicons/react', 'lodash-es'],
  },
};

Checklist:

Run npx next build and review the output size per route
Use @next/bundle-analyzer to identify large dependencies
Replace moment with date-fns or dayjs (save ~200KB)
Import specific functions: import { debounce } from 'lodash-es/debounce'
Prefer CSS over JS for animations (no runtime cost)
Tree-shake icon libraries: import { Search } from 'lucide-react'

Core Web Vitals Targets

|--------|------|------------|------|

| LCP (Largest Contentful Paint) | <2.5s | 2.5-4.0s | >4.0s |

| INP (Interaction to Next Paint) | <200ms | 200-500ms | >500ms |

| CLS (Cumulative Layout Shift) | <0.1 | 0.1-0.25 | >0.25 |

LCP Optimization

Preload hero images: <link rel="preload" as="image" href="..." />
Use priority prop on above-the-fold <Image> components
Inline critical CSS, defer non-critical stylesheets
Avoid client-side rendering for above-the-fold content
Set explicit width/height on images to prevent layout shifts

Image Optimization

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Descriptive alt text"
  width={1200}
  height={630}
  priority              // preload for LCP images
  sizes="(max-width: 768px) 100vw, 50vw"
  placeholder="blur"
  blurDataURL={base64}  // inline tiny placeholder
/>

Use next/image or equivalent (automatic WebP/AVIF, responsive srcset)
Set sizes attribute to avoid downloading oversized images
Use placeholder="blur" with a base64 data URL for perceived performance
Lazy load below-the-fold images (default behavior)

Font Loading Strategy

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',       // show fallback font immediately
  preload: true,
  variable: '--font-inter',
});

export default function RootLayout({ children }) {
  return (
    <html className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

Use next/font for zero-CLS font loading with automatic subsetting
Set display: 'swap' to avoid invisible text during load
Self-host fonts instead of loading from Google CDN (saves DNS lookup)
Limit to 2 font families maximum

CLS Prevention

Always set width and height on images and videos
Use aspect-ratio CSS for responsive media containers
Reserve space for dynamic content (ads, embeds) with min-height
Avoid inserting content above existing content after load
Use CSS contain: layout for components that change size

Performance Monitoring

import { onCLS, onINP, onLCP } from 'web-vitals';

onCLS(console.log);
onINP(console.log);
onLCP(console.log);

Measure real user metrics (RUM), not just lab scores. Vercel Analytics and Google Search Console provide field data.

想直接用这个技能？

本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。

去原始仓库

它属于哪个仓库

仓库rohitg00/awesome-claude-code-toolkit

星标★ 2,617

本站分层T1

该仓技能数40

原文件路径skills/frontend-excellence/SKILL.md

同一个仓库里的其他技能

看这个仓库的全部 40 个技能