frontend-patterns

Consolidate React and Next.js frontend patterns into a reusable developer reference.

Updated Jul 30, 2025
One-click install
npx skills add https://github.com/tmarsbr/portifolio --skill frontend-patterns-tmarsbr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/tmarsbr/portifolio/tree/main/skill-ux/skills/cc-skill-frontend-patterns
Command: npx skills add https://github.com/tmarsbr/portifolio --skill frontend-patterns-tmarsbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often reinvent patterns for components, state management, and UI, leading to duplicated effort and inconsistent user experiences across projects.

Core Features & Use Cases

  • Component Patterns: Composition over inheritance, compound components, and render props to compose flexible UIs.
  • Custom Hooks & State Patterns: State management hooks, data fetching hooks, and debouncing for clean, reusable logic.
  • Performance & Accessibility: Memoization, code splitting, virtualization, and keyboard/focus accessibility practices to keep interfaces fast and usable.
  • Use Case: Apply these patterns to build a scalable dashboard with reusable components and robust state flow.

Quick Start

Review the patterns and start integrating reusable patterns into your React or Next.js projects.

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?

The best React component patterns for scalable UIs include composition over inheritance, compound components, and render props. These approaches compose flexible interfaces while keeping component architectures maintainable across large production projects.

How do I manage state and data fetching in Next.js with custom hooks?

Manage state and data fetching in Next.js by building custom hooks for state management and data retrieval. Applying these state patterns encapsulates reusable logic cleanly, providing robust state flow for complex applications without duplicating effort across projects.

How do I optimize React rendering performance and accessibility?

Optimize React rendering performance and accessibility by applying memoization, code splitting, and virtualization alongside keyboard and focus management practices. These proven patterns keep frontend interfaces fast and usable for production-grade applications.

Can I use these frontend state management patterns for a large dashboard project?

Yes, you can use these frontend state management patterns for a large dashboard project. They provide robust state flow and reusable component architectures specifically designed for building scalable dashboards with consistent user experiences.

Why should I use composition over inheritance in React component architecture?

Use composition over inheritance in React component architecture to avoid rigid component hierarchies and duplicated effort. This pattern provides flexible, reusable UI compositions that ensure consistent user experiences across different frontend projects.