/frontend-excellence
Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals
$ npx -y skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/frontend-excellence
Context preview
The summary Claude sees to decide when to auto-load this skill.
Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals
SKILL.md
frontend-excellence.SKILL.mdname: frontend-excellence
description: Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals
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
| Metric | Good | Needs Work | Poor | |--------|------|------------|------| | 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.
Read more
name: frontend-excellence description: Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals
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
| Metric | Good | Needs Work | Poor | |--------|------|------------|------| | 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.
The most comprehensive toolkit for Claude Code -- 135 agents, 35 curated skills (+400,000 via SkillKit), 42 commands, 176+ plugins, 20 hooks, 15 rules, 7 templates, 15 MCP configs, 26 companion apps, 53 ecosystem entries, and more.
Repo: rohitg00/awesome-claude-code-toolkit
Other skills on rohitg00-claude-code-toolkit.
- /accessibility-wcag
Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing
Open skill - /agentkit-seo
Route broad or ambiguous AgentKit SEO work to the right module while keeping context scoped. Use when a request spans multiple surfaces, asks for overall digital-presence strategy, involves provider or install architecture, needs agent-context planning, or the correct platform
Open skill - /api-design-patterns
REST API design with resource naming, pagination, versioning, and OpenAPI spec generation
Open skill - /authentication-patterns
Authentication and authorization patterns including OAuth2, JWT, RBAC, session management, and PKCE flows
Open skill - /aws-cloud-patterns
AWS cloud patterns for Lambda, ECS, S3, DynamoDB, and Infrastructure as Code with CDK/Terraform
Open skill - /ci-cd-pipelines
CI/CD pipeline patterns for GitHub Actions, GitLab CI, testing strategies, and deployment automation
Open skill