skills.rest
yandy-r
yandy-rCOMMUNITY
Explore all skills by this author →
GitHub

frontend-patterns

Document React and Next.js frontend patterns for scalable UI architectures.

1|Updated Mar 4, 2026
Search Tags:#accessibility#react#nextjs#state-management#frontend-patterns#component-patterns
One-click install
npx skills add https://github.com/yandy-r/claude-plugins --skill frontend-patterns-yandy-r
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/yandy-r/claude-plugins/tree/main/.cursor-plugin/skills/frontend-patterns
Command: npx skills add https://github.com/yandy-r/claude-plugins --skill frontend-patterns-yandy-r

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns and best practices to build scalable, maintainable frontend UIs with React and Next.js.

Core Features & Use Cases

  • Composition over inheritance using compound components and render props
  • State management patterns with Context, useReducer, and lightweight stores
  • Data fetching strategies and integration guidance for React Query and SWR
  • Performance optimization techniques such as memoization, virtualization, and lazy loading
  • Accessibility and keyboard/navigation patterns to build inclusive interfaces
  • Practical examples and guidelines for modern frontend development

Quick Start

Start by selecting a pattern (e.g., compound components) and implement it in your React app using the examples provided.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
What are the best React component patterns for building scalable UIs?▼

Scalable React UIs benefit from composition over inheritance, specifically using compound components and render props to build flexible, maintainable frontend architectures.

How do I manage state in a scalable React application without prop drilling?▼

State management patterns using Context, useReducer, and lightweight stores provide structured state handling in React, preventing prop drilling and ensuring scalable data flow.

How should I handle data fetching in Next.js to optimize performance?▼

Data fetching strategies in Next.js integrate with tools like React Query and SWR, applying specific patterns to cache, fetch, and synchronize remote data efficiently.

What performance optimization techniques work best for large React lists?▼

Performance optimization techniques for large React lists include memoization, virtualization, and lazy loading to minimize re-renders and reduce initial JavaScript payload.

How do I implement accessibility and keyboard navigation in React components?▼

Accessibility and keyboard navigation patterns build inclusive interfaces by applying specific focus management and semantic HTML structures tailored for modern React engineering.

When should I use compound components instead of standard component composition?▼

Compound components are ideal when building scalable UIs requiring flexible component composition, allowing explicit state sharing without rigid prop hierarchies in React.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
7a336e6e7a336e6e
1

bundling-frontend

Configure Vite for optimized production builds with code splitting and tree-shaking.

Community
Intermediate
diegocamara89diegocamara89
3

frontend-patterns

Provide React and Next.js frontend patterns for scalable, accessible interfaces.

Community
Intermediate
3commas-io3commas-io
4

react-state-management

Compare Redux Toolkit, Zustand, Jotai, and React Query for React state management.

Official
Intermediate