Run any Skill in Manus with one click

react-nextjs-patterns

Stars5

Forks3

UpdatedMay 21, 2026 at 23:43

Modern React + Next.js patterns. Use when building Next.js apps (App Router, Server Components, streaming, parallel routes), implementing React state management (Redux Toolkit, Zustand, Jotai, React Query), or applying Next.js framework best practices (file conventions, RSC boundaries, metadata, image/font optimization).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

The-AIOS

The-AIOS/aios

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

4 files

SKILL.md

readonly

name	react-nextjs-patterns
description	Modern React + Next.js patterns. Use when building Next.js apps (App Router, Server Components, streaming, parallel routes), implementing React state management (Redux Toolkit, Zustand, Jotai, React Query), or applying Next.js framework best practices (file conventions, RSC boundaries, metadata, image/font optimization).

React + Next.js Patterns

Modern Next.js (App Router) + React state-management practices for production apps.

When to load which reference

Working on	Read
Next.js framework conventions (file structure, metadata, RSC, async APIs)	references/next-best-practices.md
Next.js 14+ App Router (Server Components, streaming, parallel routes, data fetching)	references/nextjs-app-router-patterns.md
React state management (Redux Toolkit, Zustand, Jotai, React Query, server state)	references/react-state-management.md

Core decisions

Server Components first — only opt into client ('use client') when you actually need state/effects/handlers.
State management hierarchy: local useState → context only for true app-wide concerns → React Query for server state → Zustand for client-shared state → Redux only if the codebase is already there.
File-system as router — App Router conventions are load-bearing; respect them.

For frontend design quality beyond patterns, see anthropic/frontend-design.

More from this repository

same repository

comprehension-debt

The-AIOS/aios

Keep the operator's understanding from falling behind what their agents ship — the gap between what the vault and repos contain and what the operator actually grasps. Use when agents (spawned workers, overnight sessions, autonomous loops, /aios:update self-modification) have shipped work the operator didn't author, when deciding whether to trust an autonomous loop, when a repo or venture starts feeling opaque, or during /close-session and /aios:housekeeping. The defensive complement to Arc sessions — arcs build understanding as work happens; this guards it from eroding when agents outrun the operator.

2026-06-305

commons-governance

The-AIOS/aios

Govern shared resources well using Elinor Ostrom's design principles for the commons — applied to AIOS shared substrate: multi-operator vaults, collaboration spaces, company-synced infrastructure, and multiple agents writing one git repo. Use when designing rules for a shared space, deciding who-decides-what across collaborators or agents, preventing tragedy-of-the-commons or write-collision dynamics, setting boundaries on a shared repo/folder, or standing up collab/company governance. Distributed authority done right, grounded in governance science rather than top-down control.

2026-06-305

sustainable-cadence

The-AIOS/aios

Treat the operator's capacity, pace, and rhythm as first-class design inputs — not afterthoughts to optimize away. Use when planning workload or cadence, deciding whether to push hard or pace deliberately, judging whether carried/slow/deferred work is genuine avoidance vs. a legitimate quality gate or rhythm, designing rituals and routines, sequencing a heavy week, or guarding against burnout-by-velocity. The generative complement to the system's defensive anti-values: it says what conditions let work (and the person doing it) sustain, not just what to never become.

2026-06-305

team-archetypes

The-AIOS/aios

Compose a team (of people OR agents) by lifecycle posture, not job title, using the five product archetypes — Prototyper, Builder, Sweeper, Grower, Maintainer — and the rule that a healthy mix depends on product stage. Use when deciding which agents/people to deploy on a project, diagnosing why a team or agent bundle feels lopsided (all builders, no maintainers), choosing what posture to take on a given piece of work, staffing a pre-PMF vs growing vs mature product, or selecting an agent mix in /7plan or /emerge. The team-composition complement to leverage-points: leverage-points says WHERE to intervene; this says WITH WHAT POSTURE.

2026-06-305

leverage-points

The-AIOS/aios

Decide WHERE to intervene in a system for maximum effect using Donella Meadows' leverage-points lens — push interventions toward high-leverage places (goals, rules, self-organization, paradigm) and away from low-leverage ones (parameters, buffers, taxes/subsidies). Use when choosing where to act on a complex system, prioritizing competing fixes, designing a policy/intervention/process change, diagnosing why a problem keeps recurring despite effort, or when a past fix didn't stick. The systems-science sharpening of "fix the system, not the symptom."

2026-06-255

infographic-builder

The-AIOS/aios

Turn a structured document (an /ingest reflection, role report, weekly-learnings digest, deck outline, research note) into a beautiful, self-contained HTML infographic — a visual one-pager — with brand-aware theme selection. Use when the user asks to "make an infographic," "visualize this note/report," "turn this into a one-pager/poster," or accepts the post-ingest "generate a visual infographic?" offer.

2026-05-285

name	react-nextjs-patterns
description	Modern React + Next.js patterns. Use when building Next.js apps (App Router, Server Components, streaming, parallel routes), implementing React state management (Redux Toolkit, Zustand, Jotai, React Query), or applying Next.js framework best practices (file conventions, RSC boundaries, metadata, image/font optimization).

React + Next.js Patterns

Modern Next.js (App Router) + React state-management practices for production apps.

When to load which reference

Working on	Read
Next.js framework conventions (file structure, metadata, RSC, async APIs)	references/next-best-practices.md
Next.js 14+ App Router (Server Components, streaming, parallel routes, data fetching)	references/nextjs-app-router-patterns.md
React state management (Redux Toolkit, Zustand, Jotai, React Query, server state)	references/react-state-management.md

Core decisions

Server Components first — only opt into client ('use client') when you actually need state/effects/handlers.
State management hierarchy: local useState → context only for true app-wide concerns → React Query for server state → Zustand for client-shared state → Redux only if the codebase is already there.
File-system as router — App Router conventions are load-bearing; respect them.

For frontend design quality beyond patterns, see anthropic/frontend-design.