New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Excellence

by rohitg00 in rohitg00/awesome-claude-code-toolkit

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

Apache-2.0Auto-check passedFrontend & Design

Install Frontend Excellence

skills CLI
$ npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install rohitg00/awesome-claude-code-toolkit frontend-excellence --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/rohitg00/awesome-claude-code-toolkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-excellence .claude/skills/frontend-excellence && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-excellence
GitHub stars
2.7k
Token cost
~1.3k tokens
SKILL.md length
379 words
Files
1
Skills in repo
38
Repo updated
First seen
Licence
Apache-2.0

At a glance

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

  • Tasks that involve Web performance
  • SKILL.md covers React Server Components, Streaming SSR, Code Splitting and Bundle Optimization, plus 6 more sections
  • Calls npx
  • Tasks that involve Performance optimization

What it does

Frontend Excellence is an agent skill from rohitg00/awesome-claude-code-toolkit. Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Web performance and Performance optimization. It works with React. The repository describes itself as: The most comprehensive toolkit for Claude Code -- 135 agents, 35 curated skills, 42 commands, 176+ plugins, 20 hooks, 15 rules, 7 templates, 14 MCP configs, 26 companion apps, 52… The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Web performance
  • Tasks that involve Performance optimization

Example prompts

  • “/frontend-excellence”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit ebdf1d5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Excellence loads about 1.3k tokens when it runs. Until then it costs about 30 tokens; SKILL.md has 379 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~30
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from rohitg00/awesome-claude-code-toolkit at commit ebdf1d5, republished under its Apache-2.0 licence (© rohitg00). 379 words, ~1,270 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-excellence/SKILL.md (or your agent's skills folder).
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.

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

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

MetricGoodNeeds WorkPoor
LCP (Largest Contentful Paint)<2.5s2.5-4.0s>4.0s
INP (Interaction to Next Paint)<200ms200-500ms>500ms
CLS (Cumulative Layout Shift)<0.10.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
Show full SKILL.md (136 more words)Show less

Image Optimization

tsx
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

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

typescript
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.

© rohitg00, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/frontend-excellence of rohitg00/awesome-claude-code-toolkit.

Open the folder on GitHubat commit ebdf1d5

Compare with similar skills

Frontend Excellence next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Excellence compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Excellence this skillrohitg00/awesome-claude-code-toolkit2.7k—~1.3kAutomated safety check: PassApache-2.0
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
React Best Practicespoteto/noodle454—~1.4kAutomated safety check: PassMIT
Reactblencorp/claude-code-kit106—~2.5kAutomated safety check: PassMIT
Vercel React Best Practicesgambitph/Stackable351—~2kAutomated safety check: PassMIT
Performance Guidemobazha/mobazha-unified165—~1.3kAutomated safety check: PassMPL-2.0

Similar skills

  • React Best Practices

    ryokun6/ryos

    React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Best Practices

    poteto/noodle

    React performance optimization guidelines. An agent skill from poteto/noodle.

    454 GitHub stars~1.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • React

    blencorp/claude-code-kit

    Core React 19 patterns including hooks, Suspense, lazy loading, component structure, TypeScript best practices, and performance optimization.

    106 GitHub stars~2.5k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed

  • Vercel React Best Practices

    gambitph/Stackable

    React performance optimization guidelines from Vercel Engineering.

    351 GitHub stars~2k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Performance Guide

    mobazha/mobazha-unified

    Guide for performance optimization in Mobazha including React rendering optimization, code splitting, Web Vitals monitoring, and utility functions for debounce/throttle/memoize.

    165 GitHub stars~1.3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Electron DevTools Trace Analysis

    keybase/client

    Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.

    9.3k GitHub stars~809 tokensUpdated yesterday
    DevelopmentAuto-check passed

More from rohitg00/awesome-claude-code-toolkit

All 38 skills in this repo

  • Accessibility Wcag

    rohitg00/awesome-claude-code-toolkit

    Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing

    2.7k GitHub stars~1.4k tokensUpdated 5 mo ago
    Auto-check passed

  • Agentkit SEO

    rohitg00/awesome-claude-code-toolkit

    Route broad or ambiguous AgentKit SEO work to the right module while keeping context scoped.

    2.7k GitHub stars~879 tokensUpdated 5 mo ago
    Auto-check passed

  • API Design Patterns

    rohitg00/awesome-claude-code-toolkit

    REST API design with resource naming, pagination, versioning, and OpenAPI spec generation

    2.7k GitHub stars~1.2k tokensUpdated 5 mo ago
    Auto-check passed

  • Authentication Patterns

    rohitg00/awesome-claude-code-toolkit

    Authentication and authorization patterns including OAuth2, JWT, RBAC, session management, and PKCE flows

    2.7k GitHub stars~1.4k tokensUpdated 5 mo ago
    Auto-check passed

  • AWS Cloud Patterns

    rohitg00/awesome-claude-code-toolkit

    AWS cloud patterns for Lambda, ECS, S3, DynamoDB, and Infrastructure as Code with CDK/Terraform

    2.7k GitHub stars~1.1k tokensUpdated 5 mo ago
    Auto-check passed

  • CI CD Pipelines

    rohitg00/awesome-claude-code-toolkit

    CI/CD pipeline patterns for GitHub Actions, GitLab CI, testing strategies, and deployment automation

    2.7k GitHub stars~1.1k tokensUpdated 5 mo ago
    Auto-check passed

Works with

Categories

Questions about Frontend Excellence

What does Frontend Excellence do?

Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals. Frontend Excellence is an agent skill from rohitg00/awesome-claude-code-toolkit.

When should I use Frontend Excellence?

Frontend Excellence fits situations like: tasks that involve Web performance; tasks that involve Performance optimization.

How do I install Frontend Excellence in Claude Code?

Run `npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -a claude-code`. Or copy the skill folder (skills/frontend-excellence in rohitg00/awesome-claude-code-toolkit) into .claude/skills/frontend-excellence in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Excellence in Codex?

Run `npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -a codex`. Or copy the skill folder (skills/frontend-excellence in rohitg00/awesome-claude-code-toolkit) into .agents/skills/frontend-excellence in your project. Codex loads it when a task matches its description.

Can I use Frontend Excellence in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rohitg00/awesome-claude-code-toolkit --skill frontend-excellence -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-excellence, .gemini/skills/frontend-excellence, .github/skills/frontend-excellence and .opencode/skills/frontend-excellence in your project.

What does Frontend Excellence need to run?

Going by SKILL.md and its folder, Frontend Excellence needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Frontend Excellence access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Frontend Excellence safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Excellence use?

Frontend Excellence is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Excellence use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend Excellence?

Skills that share tags, products or a category with Frontend Excellence: React Best Practices (ryokun6/ryos, 1.3k stars), React Best Practices (poteto/noodle, 454 stars), React (blencorp/claude-code-kit, 106 stars) and Vercel React Best Practices (gambitph/Stackable, 351 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Excellence?

rohitg00 (a GitHub user) maintains it in rohitg00/awesome-claude-code-toolkit, which has 2,686 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on May 12, 2026.

Source: rohitg00/awesome-claude-code-toolkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.