skills.rest
xu-xiang
xu-xiangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Consolidate modern React and Next.js frontend patterns for scalable UIs.

1.8k|303|Updated Jan 27, 2026
Search Tags:#React#frontend#TypeScript#Next.js#state-management#UI-patterns
One-click install
npx skills add https://github.com/xu-xiang/everything-claude-code-zh --skill frontend-patterns-xu-xiang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/xu-xiang/everything-claude-code-zh/tree/main/docs/zh-TW/skills/frontend-patterns
Command: npx skills add https://github.com/xu-xiang/everything-claude-code-zh --skill frontend-patterns-xu-xiang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend-patterns solve the challenge of inconsistent UI architecture by providing reusable patterns for React and Next.js, enabling teams to ship robust interfaces with less boilerplate and better maintainability.

Core Features & Use Cases

  • Component composition: Build flexible, reusable components through composition rather than inheritance.
  • State management: Apply Context + Reducer, custom hooks, and lightweight stores to manage data flow predictably.
  • Performance & accessibility: Use memoization, code-splitting, virtualization, keyboard navigation, and focus management to deliver responsive, accessible UIs.
  • Use Case: When building a dashboard, use these patterns to compose a consistent Card, Tabs, and Modal system with accessible interactions and predictable state.

Quick Start

Get started by integrating the provided component patterns into your React/Next.js project. Create a minimal UI using the Card, Tabs, and Modal patterns shown in the examples. Then adapt the patterns to your app's design system and accessibility goals.

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 and Next.js user interfaces with reusable patterns?▼

Build scalable React and Next.js user interfaces using component composition, state management with Context + Reducer, and custom hooks to reduce boilerplate and ensure maintainability. These reusable patterns enable predictable data flow and flexible component reuse across large frontend applications.

What is the best way to manage state predictably in a large React dashboard?▼

Manage state predictably in a large React dashboard by applying Context + Reducer, custom hooks, and lightweight stores. These approaches consolidate data flow, ensuring consistent UI architecture when composing systems like Cards, Tabs, and Modals.

How do I optimize React performance and accessibility for existing projects?▼

Optimize React performance and accessibility by applying memoization, code-splitting, virtualization, keyboard navigation, and focus management. These patterns deliver responsive, accessible UIs suitable for immediate integration into existing projects.

Can I use these component composition patterns with my existing TypeScript project?▼

Yes, you can integrate these component composition patterns into existing TypeScript projects. They are designed for immediate integration, allowing you to adapt the Card, Tabs, and Modal examples to your app's specific design system and accessibility goals.

When should I use component composition instead of inheritance in Next.js?▼

Use component composition instead of inheritance in Next.js when you need to build flexible, reusable components. This approach solves inconsistent UI architecture by allowing you to compose predictable Card, Tabs, and Modal systems with less boilerplate.

Related Skills

Explore More Software Engineering Skills→
wlfmnstrwlfmnstr

component-patterns

Design type-safe React component APIs using compound components, render props, and hooks.

Community
Basic
MadAppGangMadAppGang
7

vue-typescript

Develop Vue 3 components with TypeScript using script setup and Pinia.

Official
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 design tokens and CVA components.

Official
Advanced
michsindlingermichsindlinger
1

State Management

Implements scalable state management patterns for React, Vue, and Angular applications.

Community
Advanced