skills.rest
anton-dovnar
anton-dovnarCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/anton-dovnar/cursor --skill client-patterns
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
sehoon787sehoon787
16

frontend-patterns

Implement reusable React and Next.js frontend patterns for components, state, and performance.

Community
Intermediate
emiled16emiled16

frontend-patterns

Standardize React and Next.js frontend architecture with component, state, and performance patterns.

Community
Advanced
msichtermanmsichterman

vercel-composition-patterns

Refactor React component libraries by replacing boolean props with composition patterns.

Community
Advanced
vuralserhat86vuralserhat86
43

web_artifacts_builder

Generate React web interfaces with Tailwind CSS and shadcn/ui components.

Community
Intermediate