React Architect

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

Expert-level React application architecture covering component patterns, hooks design, state management selection, performance optimization, server components, and scalable folder structures.

A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.

File: SKILL.md
Length: 525 lines2,090 words, about 10 min read
Category: Web developmentfrontend frameworks
Level: Intermediate
License: Apache-2.0

More web development skills.

The full skill.

The whole file, exactly as it downloads. Read it before you rely on it.

SKILL.md

525 lines · 2,090 words

Download

React Architect

Purpose

Guide the design and implementation of production-grade React applications with emphasis on maintainability, performance, and developer experience. This skill covers architectural decisions from project inception through scaling.

Component Pattern Selection

Decision Tree

Need shared state between parent and children?
  YES -> Compound Components
Need to customize rendering behavior?
  YES -> Is the consumer advanced?
    YES -> Render Props
    NO  -> Slots via children
Need cross-cutting behavior (logging, auth, analytics)?
  YES -> Higher-Order Components or Custom Hooks
Need polymorphic rendering?
  YES -> Polymorphic Component with `as` prop
Default -> Simple function component with props

Put this skill to work.

Questions.

What is the React Architect skill?

Expert-level React application architecture covering component patterns, hooks design, state management selection, performance optimization, server components, and scalable folder structures.

How much does it cost?

Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.

Can I change it?

Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.

Give your first job to Murage.

Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.

Download Murage

No account needed · Runs on the AI plan you already pay for

Need shared state between parent and children? YES -> Compound Components Need to customize rendering behavior? YES -> Is the consumer advanced? YES -> Render Props NO -> Slots via children Need cross-cutting behavior (logging, auth, analytics)? YES -> Higher-Order Components or Custom Hooks Need polymorphic rendering? YES -> Polymorphic Component with `as` prop Default -> Simple function component with props

Requirement	Solution
Component-local UI state	useState / useReducer
Shared between sibling components	Lift state up
Deep prop drilling (theme, auth, locale)	Context + useContext
Complex client state with devtools	Zustand or Redux Toolkit
Server state (cache, sync, refetch)	TanStack Query / SWR
URL-driven state	URL search params (nuqs)
Form state	React Hook Form / Formik
Complex workflows / state machines	XState
Fine-grained reactivity (perf-critical)	Jotai / Signals

React Architect

More web development skills.

The full skill.

React Architect

Purpose

Component Pattern Selection

Decision Tree

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

React Architect

More web development skills.

The full skill.

React Architect

Purpose

Component Pattern Selection

Decision Tree

Put this skill to work.

Questions.

Give your first job to Murage.

Create a bot and use this skill.

Ask Ember to create the bot

Open the bot’s skills

Find React Architect and switch it on

Ask the bot for the job

About this skill.

Compound Components

Render Props (Advanced Customization)

Higher-Order Components (Cross-Cutting Concerns)

Hooks Architecture

Custom Hook Design Principles

Hook Composition Pattern

Rules for useEffect

State Management Selection

Decision Matrix

Context Performance Trap -- and Solution

Folder Structure

Feature-Based Architecture (Recommended for Scale)

Barrel File Rules

Performance Optimization

Memoization Decision Framework

Code Splitting Strategy

Suspense Architecture

Server Components (RSC)

Mental Model

Composition Pattern

Error Boundaries

Production Error Boundary

Granular Error Boundaries

Testing Strategy

Testing Trophy (Recommended Approach)

Component Test Example

Architecture Checklist

When to Use

Output Format

Example

Edge Cases