Comprehensive Claude Code Skill — Frontend Patterns

A Claude Code skill providing modern frontend development patterns for React, Next.js, and performant user interfaces. Covers component architecture, state management, data fetching, performance optimization, and accessibility — following composition-over-inheritance principles.

When to Use This Skill

Choose CC Skill Frontend Patterns when:

• You need established patterns for React/Next.js development
• You want best practices for component composition and state management
• You're implementing data fetching, caching, or real-time updates
• You need performance optimization guidance for frontend applications
• You want consistent frontend patterns across your codebase

Consider alternatives when:

• You need backend patterns (use a backend patterns skill)
• You want visual design direction (use a design/UI skill)
• You need mobile-specific patterns (use a mobile design skill)

Quick Start

Copy
# Install the skill
claude install comprehensive-cc-skill-frontend

# Apply component patterns
claude "Refactor this component using composition pattern: [paste monolithic component]"

# Optimize performance
claude "This page has a 4-second LCP. Here's the component: [paste]. How do I optimize it?"

# Implement data fetching
claude "Implement data fetching with React Query for a paginated list of products with optimistic updates"

Core Concepts

Component Composition

Copy
// ✅ GOOD: Composable components
<Card>
  <CardHeader>
    <CardTitle>Dashboard</CardTitle>
    <CardActions><Button>Edit</Button></CardActions>
  </CardHeader>
  <CardBody>
    <DataTable data={data} />
  </CardBody>
</Card>

// ❌ BAD: Monolithic prop-driven
<Card
  title="Dashboard"
  actions={[{ label: 'Edit', onClick: handleEdit }]}
  bodyContent={<DataTable data={data} />}
/>

State Management Decision Tree

Is this state...
├── Only used by one component?
│   → useState
├── Shared between parent and child?
│   → Lift state up + props
├── Shared between distant components?
│   → Context (if rarely changes) or Zustand (if changes often)
├── Server data (API responses)?
│   → React Query / SWR
├── URL state (filters, pagination)?
│   → URL search params / router state
└── Form state?
    → React Hook Form

Performance Patterns

Pattern	When to Use	Implementation
Code Splitting	Large routes/features	React.lazy() + Suspense
Memoization	Expensive computations	useMemo, React.memo
Virtualization	Long lists (100+ items)	react-window, @tanstack/virtual
Image Optimization	Any page with images	Next.js <Image>, lazy loading
Bundle Analysis	Regular performance audits	@next/bundle-analyzer
Streaming SSR	Initial page load speed	Next.js App Router streaming

Configuration

Parameter	Type	Default	Description
framework	string	"nextjs"	Framework: nextjs, remix, vite_react
state_management	string	"react_query"	State: react_query, zustand, redux, context
styling	string	"tailwind"	Styling: tailwind, css_modules, styled
form_library	string	"react_hook_form"	Forms: react_hook_form, formik
testing	string	"vitest"	Testing: vitest, jest, playwright

Best Practices

1. Composition over configuration — Build components that accept children and compose with other components rather than components with many props. <Dialog><DialogTitle /><DialogBody /><DialogActions /></Dialog> is more flexible than <Dialog title="" body="" actions={[]}/>.

2. Use React Query for all server state — Don't store API data in useState or Redux. React Query handles caching, refetching, optimistic updates, and error states automatically. Your components become simpler and your data is always fresh.

3. Co-locate state with usage — Keep state as close to where it's used as possible. If only one component needs a value, use local state. Only lift state or use global stores when genuinely necessary for cross-component coordination.

4. Optimize images aggressively — Images are typically the largest page assets. Use Next.js Image component for automatic optimization, serve WebP format, lazy-load below-fold images, and specify width/height to prevent layout shift.

5. Measure before optimizing — Use React DevTools Profiler to identify actual bottlenecks. Most performance problems come from 2-3 components, not the entire app. Focus optimization where profiling data shows the most impact.

Common Issues

Component re-renders too often — Use React DevTools to identify which state changes trigger re-renders. Common fixes: lift state down instead of up, use React.memo for expensive pure components, and avoid creating new objects/arrays in render.

Hydration mismatch errors — Server and client rendering produce different HTML. Common causes: using Date.now() or Math.random() during render, accessing window or localStorage during SSR, and conditional rendering based on client-only data.

Bundle size too large — Analyze with @next/bundle-analyzer or source-map-explorer. Common bloat: importing entire libraries (import _ from 'lodash' instead of import debounce from 'lodash/debounce'), unused dependencies, and large polyfills.