Frontend Patterns

A solid reference for React patterns you'll actually use in production. Covers component composition (compound components, render props), custom hooks with proper dependency management, and context-plus-reducer for state. The examples are clean and show both the pattern and real usage. Especially useful for the performance optimization section with useMemo and useCallback patterns that avoid common pitfalls like infinite render loops. The useQuery hook implementation is a good teaching example if you're building your own data fetching before reaching for a library. Skips the basics and focuses on intermediate patterns you'd encounter building real apps with Next.js or similar frameworks.

skills.sh installs: 7.1K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --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