Frontend Patterns

This covers the component patterns and hooks you'll actually use in production React apps. It pushes composition over inheritance, shows you compound components for complex UI, and includes proper custom hooks for data fetching and state management. The performance section hits the important stuff like memoization, code splitting, and virtualization for long lists. What I like is that it shows both the patterns and anti-patterns, so you can see what good component architecture looks like versus the messy stuff that's hard to maintain.

skills.sh installs: 8.6K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --skill frontend-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Development Patterns

Modern frontend patterns for React, Next.js, and performant user interfaces.

When to Activate

Building React components (composition, props, rendering)
Managing state (useState, useReducer, Zustand, Context)
Implementing data fetching (SWR, React Query, server components)
Optimizing performance (memoization, virtualization, code splitting)
Working with forms (validation, controlled inputs, Zod schemas)
Handling client-side routing and navigation
Building accessible, responsive UI patterns

Component Patterns

Composition Over Inheritance

// PASS: GOOD: Component composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

SKILL.md on GitHub