frontend-patterns

Provide reusable React and Next.js frontend architecture patterns with TypeScript examples.

11|2|Updated Mar 18, 2018

Search Tags:#typescript #architecture #performance #react #ui-patterns #frontend-patterns #component-patterns

Ready to run

npx skills add https://github.com/GiorgioBertolotti/dotfiles --skill frontend-patterns-giorgiobertolotti

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/GiorgioBertolotti/dotfiles/tree/main/claude/skills/frontend-patterns
Command: npx skills add https://github.com/GiorgioBertolotti/dotfiles --skill frontend-patterns-giorgiobertolotti

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a guided collection of proven frontend patterns for React and Next.js, with practical code examples to improve maintainability, reusability, and performance.

Core Features & Use Cases

Composition Over Inheritance: reuse card patterns and layout primitives to build complex UI.
Compound Components, Render Props, and Custom Hooks: flexible, composable API surfaces for dynamic UIs.
Performance & Accessibility: memoization, code splitting, virtualization, and accessible keyboard navigation.
Real-world Scenarios: building component libraries, dashboards, forms, and responsive UIs with consistent UX.

Quick Start

Review the patterns and implement a sample Card component using composition and slots in your React project.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema

How do I build scalable React components using composition patterns?▼

Compound components in React let you build flexible, composable API surfaces for dynamic UIs by grouping related components, sharing implicit state through context, and providing customizable rendering structures without rigid prop hierarchies.

What's the best way to handle React performance optimizations in a TypeScript dashboard?▼

React performance optimizations for dashboards involve applying memoization, code splitting, and virtualization techniques. These patterns prevent unnecessary re-renders and keep large data-heavy interfaces responsive under heavy user interaction.

When do I need custom hooks versus render props for React UI patterns?▼

Custom hooks are needed for reusable stateful logic, while render props suit dynamic component rendering. Both UI patterns offer flexible composition, but hooks separate logic from presentation more cleanly in modern React applications.

Can I use these frontend architecture patterns for Next.js web apps?▼

These frontend architecture patterns apply directly to Next.js web apps. They include TypeScript examples for component composition, accessibility, error handling, and performance optimizations suitable for React-based dashboards and component libraries.

How do I implement accessible keyboard navigation in a React component library?▼

Accessible keyboard navigation in a React component library requires applying frontend patterns that enforce focus management, semantic HTML structure, and ARIA attributes, ensuring consistent UX across responsive interfaces and dynamic forms.