client-patterns

Document React and Next.js frontend patterns for components, hooks, performance, and accessibility.

2|Updated Jan 21, 2026

Search Tags:#performance #react #hooks #nextjs #state-management #frontend-patterns #component-patterns

Ready to run

npx skills add https://github.com/anton-dovnar/cursor --skill client-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: client-patterns
Source: https://github.com/anton-dovnar/cursor/tree/main/skills/client-patterns
Command: npx skills add https://github.com/anton-dovnar/cursor --skill client-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development patterns and best practices for React and Next.js to deliver maintainable, scalable user interfaces across teams.

Core Features & Use Cases

Component patterns: Composition Over Inheritance, Compound Components, and Render Props for reusable UI building blocks.
Custom hooks and state management: useToggle, useQuery, and Context + Reducer for predictable data flows and modular architectures.
Performance and accessibility: memoization, code splitting, virtualization, keyboard navigation, and focus management to optimize speed and inclusivity.
Real-world usage: patterns applied to UI components, data loading, forms, error boundaries, and animations.

Quick Start

Use the provided React/Next.js patterns and hooks to scaffold a modular UI.

Frequently Asked Questions about client-patterns

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

FAQPage Schema

What are the best React component patterns for building a scalable design system?▼

Compound Components, Composition Over Inheritance, and Render Props are key React component patterns for building scalable, reusable UI blocks. These patterns decouple logic from presentation, enabling predictable component composition across design systems.

How do I manage state in Next.js across routes without prop drilling?▼

You can manage state across Next.js routes by combining React Context with Reducers for predictable data flows. Custom hooks like useToggle and useQuery also help orchestrate state modularly without deep prop drilling.

How do I optimize React performance when rendering large lists and heavy components?▼

Optimize React performance using memoization, code splitting, and list virtualization to reduce unnecessary renders. These frontend patterns minimize the rendering workload for large UI components and data-heavy views.

Does this frontend guide cover accessibility patterns for React applications?▼

Yes, it covers accessibility patterns including keyboard navigation and focus management. These ensure your React and Next.js applications remain inclusive and resilient for users relying on assistive technologies.

When should I use Render Props instead of custom hooks in React?▼

Use Render Props when you need to share complex rendering logic with dynamic UI composition across components. Use custom hooks like useQuery when you only need to extract and reuse stateful data logic without affecting the component tree structure.