skills.rest
jjjh7401
jjjh7401COMMUNITY
Explore all skills by this author →
GitHub

moai-ref-react-patterns

Provides React and Next.js component design patterns, state management guidance, and quality standards.

Updated Jul 24, 2026
Search Tags:#state management#Zustand#React#frontend#hooks#nextjs#component patterns
One-click install
npx skills add https://github.com/jjjh7401/AI-Lighting_Console --skill moai-ref-react-patterns-jjjh7401
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-ref-react-patterns
Source: https://github.com/jjjh7401/AI-Lighting_Console/tree/main/.claude/skills/moai-ref-react-patterns
Command: npx skills add https://github.com/jjjh7401/AI-Lighting_Console --skill moai-ref-react-patterns-jjjh7401

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend developers often make inconsistent architectural choices when designing React components, selecting state management tools, or structuring Next.js projects, leading to unmaintainable code and performance issues. ## Core Features & Use Cases - Component Design Patterns: Reference implementations for compound components, custom hooks, container/presentational separation, and headless components. - State Management Selection Guide: Decision flow mapping state types (server, global, URL, form) to tools like React Query, Zustand, nuqs, and React Hook Form. - Quality & Performance Standards: Concrete rules for component size, props limits, error boundaries, memoization, lazy loading, and accessibility checklists. - Use Case: When building a Next.js dashboard, consult this reference to decide between Zustand and React Query for shared data, structure the App Router directories, and apply error boundary hierarchies. ## Quick Start Ask the agent to design a React component or review frontend code using the React patterns reference for state management and structure guidance.

Frequently Asked Questions about moai-ref-react-patterns

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

FAQPage Schema
How do I choose between Zustand and React Query for state management?▼

Use React Query for server state that needs caching, refetching, and optimistic updates. Use Zustand for global client state shared across components, adding Immer when complex immutable transitions are needed.

What component design patterns should I use in React?▼

Common patterns include compound components for Tabs and Dropdowns, custom hooks for reusable logic like useForm and useDebounce, container/presentational separation for testability, and headless components for design-system-independent behavior.

How should I structure a Next.js App Router project?▼

Organize routes under src/app with route groups like (auth) and (main), place base UI in components/ui and feature components in components/features, and keep hooks, stores, types, and utilities in dedicated top-level folders.

Is useEffect acceptable for data fetching in React 19?▼

No. React 19 provides use() and server components for data fetching. Using useEffect with fetch is a legacy pattern that causes request waterfalls; prefer server components, use(), or React Query instead.

When should I not use global state in React?▼

Avoid global state for server-cacheable data, which belongs in React Query or SWR, and for cases solvable by prop drilling or children composition. Global state couples distant components and reduces predictability and testability.

Related Skills

Explore More Software Engineering Skills→
OpenElementsLabsOpenElementsLabs

web-frontend-builder

Scaffold Next.js frontends with TypeScript, Tailwind CSS, and shadcn/ui.

Official
Advanced
vishaltailor01vishaltailor01

DevOps & CI/CD Skill

Manage CI/CD pipelines, Docker containerization, and infrastructure as code for Next.js applications.

Community
Advanced
aberrantCodeaberrantCode
1

typescript

Configure strict TypeScript compilation, ESLint, Jest, and Husky pre-commit checks.

Community
Intermediate
ImaginerLabsImaginerLabs

web-design-reviewer

Inspect web UI layouts and apply source-level fixes for visual issues.

Official
Advanced