skills.rest
xxih
xxihCOMMUNITY
Explore all skills by this author →
GitHub

frontend-patterns

Implement React and Next.js patterns for component composition, state hooks, and performance.

1|Updated Mar 18, 2026
Search Tags:#typescript#accessibility#react#next.js#state-management#component-patterns#performance-optimization
One-click install
npx skills add https://github.com/xxih/ai-harness-zh --skill frontend-patterns-xxih
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/xxih/ai-harness-zh/tree/main/references/translations/everything-claude-code/docs/zh-CN/skills/frontend-patterns
Command: npx skills add https://github.com/xxih/ai-harness-zh --skill frontend-patterns-xxih

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front‑end developers often struggle to choose consistent patterns for building React and Next.js applications, leading to duplicated code, performance bottlenecks, and maintenance headaches.

Core Features & Use Cases

  • Component Composition – Build reusable UI pieces using composition over inheritance.
  • State Management Hooks – Leverage useState, useReducer, Zustand, and Context for scalable state.
  • Performance Optimizations – Apply memoization, code‑splitting, lazy loading, and list virtualization.
  • Accessibility & Error Handling – Implement error boundaries, keyboard navigation, and focus management.
    Use case: When creating a dashboard with dynamic data tables, this skill guides you to structure components, fetch data efficiently, and keep the interface responsive and accessible.

Quick Start

Ask the assistant to generate a React component that fetches data with React Query and displays it using a virtualized list.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I structure React components for high performance and maintainability?▼

Structure React components by applying composition over inheritance to build reusable UI pieces, leveraging hooks for state management, and applying memoization or list virtualization to optimize performance.

What is the best way to manage state in Next.js applications?▼

Manage Next.js state by leveraging useState and useReducer for local component logic, while utilizing Zustand and Context for scalable global state across your application architecture.

How do I optimize React data fetching and rendering with React Query?▼

Optimize React data fetching by using React Query to orchestrate asynchronous requests, combined with code-splitting and lazy loading to keep dynamic interfaces responsive and maintainable.

Do I need TypeScript to implement these React component patterns?▼

Familiarity with TypeScript is required to implement these React component patterns, as the skill uses it alongside React and Next.js to orchestrate data fetching, state handling, and animations.

How do I add accessibility and error handling to a React dashboard?▼

Add accessibility and error handling to a React dashboard by implementing error boundaries for crash resilience and applying keyboard navigation and focus management for accessible interfaces.

Related Skills

Explore More Software Engineering Skills→
jungaijungai
2

frontend-dev

Bootstrap React frontends with TypeScript, Tailwind, Next.js, and TanStack tooling.

Community
Intermediate
rajyeole6rajyeole6

agency-frontend-developer

Build accessible, responsive web applications with React, Vue, or Angular.

Community
Advanced
YuebyYueby
173

frontend-patterns

Document React and Next.js frontend development patterns for components, hooks, and performance.

Community
Advanced
michelhaussairemichelhaussaire

react-state-management

Implement React state management patterns with Redux Toolkit, Zustand, Jotai, or React Query.

Community
Advanced