Agent skill · software engineering · affaan-m
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
Why this skill is useful
Provides specific patterns and best practices for React and Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
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 Compound Components Render Props Pattern Custom Hooks Patterns State Management Hook Async Data Fetching Hook Debounce Hook State Management Patterns Context + Reducer Pattern Performance Optimization Memoization Code Splitting & Lazy Loading Virtualization for Long Lists Form Handling Patterns Controlled Form with Validation Error Boundary Pattern Animation Patterns Framer Motion Animations Accessibility Patterns Keyboard Navigation Focus Management Remember: Modern frontend patterns enable maintainable, performant user interfaces. Choose patterns that fit your project complexity.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/frontend-patterns--2bbd23