skills.rest
taewook486
taewook486COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-ref-react-patterns

Codify React/Next.js component patterns for consistent frontend development.

Updated Mar 25, 2026
Search Tags:#frontend#react#components#patterns#nextjs#state-management#design-system
One-click install
npx skills add https://github.com/taewook486/anki_rag --skill moai-ref-react-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-ref-react-patterns
Source: https://github.com/taewook486/anki_rag/tree/main/.claude/skills/moai-ref-react-patterns
Command: npx skills add https://github.com/taewook486/anki_rag --skill moai-ref-react-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs and documents proven React/Next.js component patterns and state-management practices to help teams build scalable, maintainable frontend architectures with consistent conventions.

Core Features & Use Cases

  • Progressive patterns for Compound Components, Custom Hooks, and Container/Presentational separation to improve reusability and testability.
  • Guidance on state management choices (UI local state, server state, global client state) and how to apply tools like React Query, Zustand, and hooks to real-world apps.
  • Next.js App Router structure references and design-system-oriented patterns to speed up UI development and collaboration across teams.

Quick Start

Apply the compound components pattern to a sample UI control in your project to observe shared state via context and improved composability.

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 structure scalable React components and state management for a Next.js app?▼

Structure scalable React components and state management by applying container/presentational separation, compound components, and custom hooks to standardize UI architecture and improve testability across teams.

What is the compound components pattern in React and when should I use it?▼

The compound components pattern in React shares state via context to build highly composable UI controls. Use it to improve reusability when building consistent UI libraries and design systems.

How do I choose between React Query, Zustand, and local hooks for state management?▼

Choose state management tools by separating UI local state, server state, and global client state. Apply React Query for server state, Zustand for global client state, and hooks for UI state.

Does this React patterns guidance work for building a design system from scratch?▼

Yes, this React patterns guidance works for building a design system from scratch by providing codified component conventions and Next.js app-structure references to speed up UI development and collaboration.

When should I not use container and presentational component separation?▼

Avoid container and presentational component separation when building simple, isolated UI elements where the abstraction overhead outweighs the maintainability and testability benefits for your React architecture.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
nhonvonhonvo

state-management-expert

Design scalable React state management architectures with Redux Toolkit, Zustand, Jotai, TanStack Query, and Context API.

Community
Advanced
belokonmbelokonm
8

react-specialist

Provide expert React 18+ patterns, hooks, and state management guidance.

Community
Advanced
vinwangvinwang

frontend-patterns

Identify and adopt React/Next.js frontend patterns for scalable interfaces.

Community
Intermediate