frontend-patterns

Guide React and Next.js engineers in implementing reusable UI patterns with TypeScript examples.

Updated Nov 21, 2025

Search Tags:#frontend #react #hooks #patterns #nextjs #design-systems #component-patterns

Ready to run

npx skills add https://github.com/MBarry01/dousell-immo --skill frontend-patterns-mbarry01

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/MBarry01/dousell-immo/tree/main/.claude/skills/frontend-patterns
Command: npx skills add https://github.com/MBarry01/dousell-immo --skill frontend-patterns-mbarry01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often duplicate patterns across React and Next.js projects, leading to inconsistent UI, higher maintenance costs, and slower delivery.

Core Features & Use Cases

Reusable patterns: composition over inheritance, compound components, render props, and custom hooks to build scalable UI libraries.
Pattern catalog: a reference set for state management, performance optimizations, accessibility, and code-splitting strategies suitable for modern frontends.
Use Case: refactor a monolithic component into a composable Card system with a header and body, enabling consistent styling and behavior across pages.

Quick Start

Begin by auditing a current component library and applying the Frontend Patterns guidelines to convert a set of isolated components into a cohesive, reusable system.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema

How do I refactor a monolithic React component into composable UI patterns?▼

Refactor monolithic React components into composable UI patterns by applying composition over inheritance, compound components, and render props to build a cohesive, reusable system with consistent styling and behavior across pages.

What are the best frontend patterns for building a scalable design system in Next.js?▼

The best scalable frontend patterns for Next.js design systems include custom hooks, state management recipes, performance optimizations, and code-splitting strategies, all supported by concrete TypeScript examples and best-practice guidance.

When should I use compound components vs render props in a React component library?▼

Use compound components to build a composable system with shared implicit state like a Card with header and body, and apply render props when you need flexible rendering logic within your reusable React UI library.

Does this frontend pattern catalog provide TypeScript examples for React hooks and state management?▼

Yes, the frontend pattern catalog provides concrete TypeScript examples and best-practice recipes for implementing custom hooks, state management, and accessibility patterns in React and Next.js projects.

How do I audit an existing component library for scalable pattern adoption?▼

Audit an existing component library by reviewing isolated components and applying frontend pattern guidelines to convert them into a cohesive, reusable system using composition, hooks, and shared state management strategies.

What frontend patterns help with performance optimization and accessibility in React?▼

Frontend patterns for performance optimization and accessibility in React include code-splitting strategies, custom hooks for state management, and compound component architecture to ensure scalable, accessible UI delivery.