React Expert
Jeffallan/claude-skills
Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.
Install Moai Ref React Patterns
$ npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install modu-ai/moai-adk moai-ref-react-patterns --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/modu-ai/moai-adk.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/moai-ref-react-patterns .claude/skills/moai-ref-react-patterns && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "moai-ref-react-patterns" agent skill from https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-ref-react-patterns into .claude/skills/moai-ref-react-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "moai-ref-react-patterns", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-ref-react-patternsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install modu-ai/moai-adk moai-ref-react-patterns --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/modu-ai/moai-adk.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/moai-ref-react-patterns .agents/skills/moai-ref-react-patterns && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "moai-ref-react-patterns" agent skill from https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-ref-react-patterns into .agents/skills/moai-ref-react-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "moai-ref-react-patterns", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install modu-ai/moai-adk moai-ref-react-patterns --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/modu-ai/moai-adk.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/moai-ref-react-patterns .cursor/skills/moai-ref-react-patterns && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "moai-ref-react-patterns" agent skill from https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-ref-react-patterns into .cursor/skills/moai-ref-react-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "moai-ref-react-patterns", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/modu-ai/moai-adk.git --path .claude/skills/moai-ref-react-patterns--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install modu-ai/moai-adk moai-ref-react-patterns --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/modu-ai/moai-adk.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/moai-ref-react-patterns .gemini/skills/moai-ref-react-patterns && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "moai-ref-react-patterns" agent skill from https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-ref-react-patterns into .gemini/skills/moai-ref-react-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "moai-ref-react-patterns", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install modu-ai/moai-adk moai-ref-react-patternsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/modu-ai/moai-adk.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/moai-ref-react-patterns .github/skills/moai-ref-react-patterns && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "moai-ref-react-patterns" agent skill from https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-ref-react-patterns into .github/skills/moai-ref-react-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "moai-ref-react-patterns", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install modu-ai/moai-adk moai-ref-react-patterns --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/modu-ai/moai-adk.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/moai-ref-react-patterns .opencode/skills/moai-ref-react-patterns && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "moai-ref-react-patterns" agent skill from https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-ref-react-patterns into .opencode/skills/moai-ref-react-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "moai-ref-react-patterns", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
moai-ref-react-patterns- GitHub stars
- 1.2k
- Token cost
- ~1.8k tokens
- SKILL.md length
- 582 words
- Files
- 1
- Skills in repo
- 48
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.
- Works in 4 steps: Compound Components → Custom Hooks (Extraction Pattern) → Container/Presentational Separation → …
- Tasks that involve React components
- SKILL.md covers Target Spawn, Component Design Patterns, State Management Selection Guide and Next.js App Router Structure, plus 7 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Moai Ref React Patterns is an agent skill from modu-ai/moai-adk. React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design, database modeling, DevOps, mobile apps.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering React components, State management and Design patterns. It works with Next.js, React and TanStack. The repository describes itself as: Agentic development harness for Claude Code — SPEC-driven plan/run/sync, TRUST 5 quality gates, model+effort routing, and Claude×GLM multi-LLM cost control. Single Go binary, 16… The licence is Apache-2.0.
When your agent uses it
- Tasks that involve React components
- Tasks that involve State management
- Tasks that involve Design patterns
Example prompts
- “/moai-ref-react-patterns”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 6c55321. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Moai Ref React Patterns loads about 1.8k tokens when it runs. Until then it costs about 95 tokens; SKILL.md has 582 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from modu-ai/moai-adk at commit 6c55321, republished under its Apache-2.0 licence (© modu-ai). 582 words, ~1,809 tokens.
Download SKILL.mdSave it as
.claude/skills/moai-ref-react-patterns/SKILL.md (or your agent's skills folder).- name
- moai-ref-react-patterns
- description
- React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design, database modeling, DevOps, mobile apps.
- when_to_use
- Use for React/Next.js component design patterns: state-management strategies, hooks, component composition, and project structure. Amplifies frontend domain…
- user-invocable
- false
- metadata.version
- 1.0.0
- metadata.category
- domain
- metadata.status
- active
- metadata.updated
- 2026-03-30
- metadata.tags
- react, nextjs, component, patterns, frontend, reference
- progressive_disclosure.enabled
- true
- progressive_disclosure.level1_tokens
- 100
- progressive_disclosure.level2_tokens
- 3000
React Patterns Reference
Target Spawn
Frontend domain work spawned via Agent(general-purpose) with frontend instructions - Applies these patterns directly to component design and state management.
Component Design Patterns
1. Compound Components
Parent and child share implicit state via Context.
Suited for: Tab, Accordion, Dropdown, Select
Structure: <Select> + <Select.Trigger> + <Select.Option>
2. Custom Hooks (Extraction Pattern)
Extract state logic into reusable hooks.
Suited for: Form management, API calls, localStorage, debounce
Naming: use prefix required - useForm, useDebounce, useAuth
3. Container/Presentational Separation
Separate data logic (Container) from UI (Presentational).
Suited for: Large apps, when testability is needed Container: Data fetch, state management, event handlers Presentational: Renders only from props, functionally pure
4. Headless Component
Provides behavior/state without UI.
Suited for: Design system-independent logic
Examples: headless useCombobox, useDialog, useTable
State Management Selection Guide
| State Type | Tool | Rationale |
|---|---|---|
| UI Local | useState, useReducer | Component-internal |
| Server State | React Query / TanStack Query | Caching, refetch, optimistic |
| Global Client | Zustand | Concise, minimal boilerplate |
| Complex Global | Zustand + Immer | Immutability convenience |
| URL State | nuqs / useSearchParams | Filters, pagination |
| Form State | React Hook Form + Zod | Integrated validation |
| Theme/i18n | Context + Provider | Low change frequency |
Decision Flow
Restorable from URL? -> URL state (nuqs)
Server data? -> React Query
Shared across components? -> Zustand
Component-internal? -> useState
Complex transitions? -> useReducerNext.js App Router Structure
src/
├── app/ # App Router
│ ├── (auth)/ # Auth route group
│ │ ├── login/page.tsx
│ │ └── register/page.tsx
│ ├── (main)/ # Main route group
│ │ ├── dashboard/page.tsx
│ │ └── settings/page.tsx
│ ├── api/ # API Routes
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home
├── components/
│ ├── ui/ # Base UI (Button, Input, Modal)
│ └── features/ # Feature components
│ ├── auth/
│ └── dashboard/
├── hooks/ # Custom hooks
├── lib/ # Utilities, config
├── stores/ # Zustand stores
├── types/ # TypeScript types
└── styles/ # Global stylesComponent Quality Standards
| Item | Standard |
|---|---|
| Component Size | Under 200 lines (split if exceeded) |
| Props | 5 or fewer (group into object if exceeded) |
| Custom Hooks | Always extract when reusing logic |
| Error Boundaries | Set at the page level |
| Loading States | Provide loading UI for all async ops |
| Form Validation | Validate on both client and server |
Performance Patterns
| Pattern | When | Tool |
|---|---|---|
| Memoization | Expensive computation | useMemo, React.memo |
| Lazy Loading | Bundle size | React.lazy, next/dynamic |
| Virtualization | 1000+ item lists | @tanstack/react-virtual |
| Image Optimization | Image loading | next/image |
| Optimistic Updates | Immediate feedback | React Query onMutate |
| Debounce | Search, input | useDeferredValue or custom hook |
Error Handling
Hierarchical Error Boundaries
RootErrorBoundary (global)
└── LayoutErrorBoundary (per section)
└── ComponentErrorFallback (individual)API Error Handling
| HTTP Status | Client Handling |
|---|---|
| 401 | Auto logout + redirect |
| 403 | Unauthorized UI |
| 404 | Not Found page |
| 422 | Per-field form error |
| 429 | Retry + wait notice |
| 500 | Generic error + retry button |
Accessibility Checklist
- Alt text on all images
- Keyboard navigation (Tab, Enter, Escape)
- ARIA labels (aria-label, role)
- Color contrast 4.5:1 or above
- Visible focus indicator
- Semantic HTML (button, nav, main, section)
<!-- moai:evolvable-start id="rationalizations" -->Show full SKILL.md (247 more words)Show less
Common Rationalizations
| Rationalization | Reality |
|---|---|
| "useEffect is fine for data fetching in React 19" | React 19 provides use() and server components for data fetching. useEffect for fetch is a legacy pattern that causes waterfalls. |
| "Global state is simpler than prop drilling" | Global state couples distant components. Prop drilling or composition via children is more predictable and testable. |
| "I will add TypeScript types later" | Untyped components accumulate any-typed callers. Retrofitting types into a used component is much harder than starting typed. |
| "This component does not need memoization" | Premature memoization is waste, but components rendering lists or expensive trees should be profiled, not assumed fast. |
| "CSS-in-JS is fine, everyone uses it" | CSS-in-JS adds runtime overhead and bundle size. Tailwind or CSS Modules achieve the same scoping without the cost. |
<!-- moai:evolvable-end --><!-- moai:evolvable-start id="red-flags" -->Red Flags
- useEffect used for data fetching when server components or use() are available
- Component receives more than 5 props without decomposition or object grouping
- State management library used for server-cacheable data (use React Query or SWR instead)
- Inline styles or hardcoded pixel values instead of design tokens
- Component missing error boundary wrapping for async operations
<!-- moai:evolvable-end --><!-- moai:evolvable-start id="verification" -->Verification
- Data fetching uses server components, use(), or React Query (not useEffect + fetch)
- Components have TypeScript interfaces for all props
- Error boundaries wrap components with async operations
- Accessibility checklist completed (alt text, keyboard nav, ARIA, contrast, focus, semantics)
- No inline styles or hardcoded color/spacing values (design tokens used)
- Component renders correctly in React Strict Mode (no double-effect issues)
<!-- moai:evolvable-end -->© modu-ai, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/moai-ref-react-patterns of modu-ai/moai-adk.
Open the folder on GitHubat commit 6c55321
Compare with similar skills
Moai Ref React Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Moai Ref React Patterns this skillmodu-ai/moai-adk | 1.2k | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| React ExpertJeffallan/claude-skills | 12k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Component Patternsrevfactory/harness-100 | 1.3k | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Frontend Developeraiskillstore/marketplace | 430 | 6 repos | ~1.9k | Automated safety check: Pass | None | |
| Typescript Rulesshinpr/claude-code-workflows | 690 | — | ~1.8k | Automated safety check: Pass | MIT | |
| React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase | 10k | 2 repos | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
Component Patterns
revfactory/harness-100
React/Next.js component design pattern library. An agent skill from revfactory/harness-100.
Frontend Developer
aiskillstore/marketplace
Build React components, implement responsive layouts, and handle client-side state management.
Typescript Rules
shinpr/claude-code-workflows
React/TypeScript frontend development rules including type safety, component design, state management, and error handling.
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
Frontend Patterns
kurealnum/dotfiles
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
More from modu-ai/moai-adk
All 48 skills in this repoSVG Technical Infographic Author
modu-ai/moai-adk
Builds hand-editable SVG diagrams from computed layout coordinates, lints the source and renders a 2x PNG, with rules for when mermaid is the better choice.
MoAI Foundation Core
modu-ai/moai-adk
Reference for MoAI-ADK's core development principles: TRUST 5 quality gates, SPEC-first domain-driven workflow, agent delegation and token budgeting.
MoAI SPEC Workflow
modu-ai/moai-adk
Manages SPEC documents for MoAI-ADK development, with GEARS or EARS requirement notation, acceptance criteria and a link into the Plan-Run-Sync workflow.
MoAI TDD Workflow
modu-ai/moai-adk
Drives test-first development through the RED, GREEN, REFACTOR cycle, with a config switch that selects between TDD and a DDD workflow for existing code.
MoAI Worktree Management
modu-ai/moai-adk
Gives each SPEC its own Git worktree with a registry of active workspaces, base-branch sync and cleanup of merged ones, inside the MoAI-ADK workflow.
CI Watch and Auto-Fix Loop
modu-ai/moai-adk
Watches a pull request's CI checks after creation, separates required from auxiliary failures, applies limited safe fixes and escalates anything semantic to you.
Related
Categories
Questions about Moai Ref React Patterns
What does Moai Ref React Patterns do?
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Moai Ref React Patterns is an agent skill from modu-ai/moai-adk.js component design patterns, state management strategies, and project structure reference for frontend development.
When should I use Moai Ref React Patterns?
Moai Ref React Patterns fits situations like: tasks that involve React components; tasks that involve State management; tasks that involve Design patterns.
How do I install Moai Ref React Patterns in Claude Code?
Run `npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a claude-code`. Or copy the skill folder (.claude/skills/moai-ref-react-patterns in modu-ai/moai-adk) into .claude/skills/moai-ref-react-patterns in your project. Claude Code loads it when a task matches its description.
How do I install Moai Ref React Patterns in Codex?
Run `npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a codex`. Or copy the skill folder (.claude/skills/moai-ref-react-patterns in modu-ai/moai-adk) into .agents/skills/moai-ref-react-patterns in your project. Codex loads it when a task matches its description.
Can I use Moai Ref React Patterns in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add modu-ai/moai-adk --skill moai-ref-react-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/moai-ref-react-patterns, .gemini/skills/moai-ref-react-patterns, .github/skills/moai-ref-react-patterns and .opencode/skills/moai-ref-react-patterns in your project.
What does Moai Ref React Patterns need to run?
SKILL.md names no scripts, command-line tools or credentials: Moai Ref React Patterns is instructions for the agent only.
Does Moai Ref React Patterns access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Moai Ref React Patterns safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Moai Ref React Patterns use?
Moai Ref React Patterns is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Moai Ref React Patterns use?
About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Moai Ref React Patterns?
Skills that share tags, products or a category with Moai Ref React Patterns: React Expert (Jeffallan/claude-skills, 12k stars), Component Patterns (revfactory/harness-100, 1.3k stars), Frontend Developer (aiskillstore/marketplace, 430 stars) and Typescript Rules (shinpr/claude-code-workflows, 690 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Moai Ref React Patterns?
modu-ai (a GitHub organization) maintains it in modu-ai/moai-adk, which has 1,230 GitHub stars. The repository holds 48 skills in this directory. The repository was last updated on October 7, 2026.
Source: modu-ai/moai-adk on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.