Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

rohitg00/frontend-excellence

Name: frontend-excellence
Author: rohitg00

skills/frontend-excellence/SKILL.md

npx skillsauth add rohitg00/awesome-claude-code-toolkit frontend-excellence

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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.

rohitg00/frontend-excellence

skills/frontend-excellence/SKILL.md

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

1,330 stars

development

Updated Apr 19, 2026

$ install --global

skillsauth

npx skillsauth add rohitg00/awesome-claude-code-toolkit frontend-excellence

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 19, 2026, 3:33 AM7.4s1 file scanned

SKILL.md

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

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.

Related Skills

rohitg00/skills/styleseed

development

VerifiedTrustedCommunity

# StyleSeed — Design Judgment Engine > Teaches Claude Code design judgment, not just design data. 69 visual rules that make AI output look designed, not generated. ## What It Teaches - **Color discipline** — `#2A2A2A` as refined black, 5-level grayscale, one accent color maximum - **Spatial rhythm** — alternating section heights, 2:1 number-to-unit ratios - **Information hierarchy** — card/background separation, progressive density - **Shadow & elevation** — 4% opacity ceiling, dark mode bord

1,622SKILL.mdUpdated May 12, 2026

rohitg00/skills/styleseed

rohitg00/agentkit-seo

data-ai

VerifiedTrustedCommunity

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 skill is unclear.

1,622SKILL.mdUpdated May 12, 2026

rohitg00/agentkit-seo

rohitg00/websocket-realtime

development

VerifiedTrustedCommunity

Real-time communication patterns with WebSocket, Socket.io, Server-Sent Events, and scaling strategies

1,330SKILL.mdUpdated Apr 19, 2026

rohitg00/websocket-realtime

rohitg00/typescript-advanced

development

VerifiedTrustedCommunity

Advanced TypeScript patterns including generics, conditional types, mapped types, template literals, and type guards

1,330SKILL.mdUpdated Apr 19, 2026

rohitg00/typescript-advanced

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/rohitg00/awesome-claude-code-toolkit.git

# Copy into Claude Code skills folder (global)
cp -r awesome-claude-code-toolkit/skills/frontend-excellence ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

rohitg00/awesome-claude-code-toolkit

1,330 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT