frontend-patterns

Installation
Summary

React and Next.js patterns for component composition, state management, performance optimization, and accessible UI.

  • Covers component patterns including composition, compound components, and render props for flexible, reusable UI architecture
  • Provides custom hooks for state management, async data fetching, debouncing, and form handling with validation
  • Includes performance techniques: memoization, code splitting with lazy loading, and virtualization for large lists
  • Demonstrates error boundaries, keyboard navigation, focus management, and Framer Motion animations for accessibility and user experience
SKILL.md

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

Related skills
Installs
6.6K
GitHub Stars
179.7K
First Seen
Jan 22, 2026