frontend-patterns

Provide React and Next.js frontend patterns with code examples.

Updated Feb 17, 2026

Search Tags:#performance #accessibility #state management #react #next.js #ui development #frontend patterns

Ready to run

npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill frontend-patterns-gatsbyhateyou

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/Gatsbyhateyou/gatsby-website/tree/main/.agents/skills/frontend-patterns
Command: npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill frontend-patterns-gatsbyhateyou

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides developers with a comprehensive guide and practical examples for implementing robust, performant, and accessible frontend patterns in React and Next.js applications.

Core Features & Use Cases

Component Patterns: Demonstrates composition, compound components, and render props for reusable UI.
Custom Hooks: Offers patterns for state management, async data fetching, and debouncing.
State Management: Illustrates Context API with Reducer for complex state.
Performance Optimization: Covers memoization, code splitting, and virtualization.
Form Handling: Provides examples for controlled forms with validation.
Accessibility: Includes patterns for keyboard navigation and focus management.
Use Case: When building a new feature that requires complex state management and optimized rendering, consult this Skill for best practices and code examples.

Quick Start

Show me examples of the compound components pattern in React.

Frequently Asked Questions about frontend-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage complex state in React without external libraries?▼

To manage complex state in React without external libraries, implement the Context API combined with a Reducer. This pattern provides a scalable, maintainable structure for passing data through the component tree.

What is the best way to optimize React performance using memoization and code splitting?▼

The best way to optimize React performance is applying memoization to prevent unnecessary re-renders and using code splitting to load features dynamically. Virtualization further improves UI responsiveness for large lists.

How do I build reusable React components for scalable UI development?▼

Build reusable React components using composition, compound components, and render props. These patterns allow you to create flexible, maintainable, and scalable user interface elements with isolated logic.

How does custom hook creation work for async data fetching and state management?▼

Creating custom hooks works by extracting component logic into reusable functions for state management, async data fetching, and debouncing. This separates concerns and simplifies complex component implementations.

Can I implement accessibility best practices for keyboard navigation in Next.js?▼

You can implement accessibility best practices in Next.js by applying specific patterns for keyboard navigation and focus management. This ensures your user interfaces remain fully accessible and maintainable.

How do I handle controlled forms with validation in React?▼

Handle controlled forms with validation in React by binding form inputs to state and adding validation logic. This approach provides predictable form handling and immediate user feedback for data input.