Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

react-nextjs-patterns

Étoiles5

Forks3

Mis à jour21 mai 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

The-AIOS

The-AIOS/aios

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs webProfessions informatiques et mathématiques·SOC 15-1254

Explorateur de fichiers

4 fichiers

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.

Plus depuis ce dépôt

même dépôt

orchestration-ladder

The-AIOS/aios

Choose the right orchestration primitive for delegated work — a single agent, parallel agents, or a dynamic workflow — using the agent → parallel → workflow ladder, plus the spawn-vs-subagent axis (interactive-and-independent vs. harness-tracked-and-harvested), plus which MODEL/tier the worker runs on. ALSO the reference for talking to other sessions through the AIOS Glass spawn-inbox command bus. Use when deciding how to delegate a task, whether to fan work out, whether you need the result back in-session, which model or tier a delegated worker should run on, when a plan starts sprouting file-sentinels and monitor loops (the tell you picked the wrong primitive), when orienting to dynamic workflows for the first time, and whenever one session must reach another — "send a message to session X", "say hi to <session>", "message/nudge/ping a running agent", "reply to the session that spawned me", "hand this off to another session", "check who is running / which sessions are live", "kill or close a worker", or spa

2026-07-256

deep-research

The-AIOS/aios

Deep, multi-source research for acting under uncertainty — answers WHAT to aim for, WHY it matters, and HOW to pursue it, when the answer requires surveying a live field rather than retrieving one fact. Output-agnostic by design: the starting intent ('what should I write about?') is treated as provisional, because research routinely reveals the real move is something else — a thing to build, a decision to make, a plan to change, a habit to adopt, a feature to ship. It maps the operator's existing corpus first (no repeats), sweeps multiple sources and angles, triangulates, and returns ranked proposals each carrying its what/why/how and its recommended output mode. Use for: 'what should we write / build / do / cover next', 'research X and tell me what it means for us', domain-landscape or competitive/positioning analysis, white-space discovery, trend-to-thesis matching, evaluating where a field is heading, or any decision that deserves more than one search. NOT for single fact lookups (plain web search) and NOT

2026-07-206

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-306

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-306

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-306

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-306

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.