Nextjs App Architecture

Build or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or enabling Cache Components. Also use when the user asks about RSC composition, components receiving IDs instead of route params, `'use

97 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add aurorascharff/nextjs-app-architecture-skill --skill nextjs-app-architecture

Manual install

git clone --depth 1 https://github.com/aurorascharff/nextjs-app-architecture-skill.git /tmp/nextjs-app-architecture-skill
mkdir -p ~/.claude/skills
cp -r /tmp/nextjs-app-architecture-skill/. ~/.claude/skills/nextjs-app-architecture

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Next.js App Architecture

A workflow for building and auditing Next.js 16+ App Router apps so they follow one consistent, feature-sliced RSC architecture like `next-beats`.

**Follow the workflow below step by step** — it produces the invariants by construction. Load the reference a step names for the decision it depends on. Get framework _mechanics_ (API signatures, config options, hook contracts) from the linked docs — don't restate or improvise them. Links for canary-only Next.js APIs use `preview.nextjs.org`.

## Prerequisite

Before changing a Next.js app, make sure the project is set up for AI agents to read version-matched docs. Follow the [AI Coding Agents guide](https://preview.nextjs.org/docs/app/guides/ai-agents): prefer the project's `AGENTS.md` / bundled docs, and create or refresh them when missing. Then use this skill for architecture decisions.

## Architecture target

Build pages that describe the loading experience, not pages that act like route loaders:

- `app/**/page.tsx` and `layout.tsx` are synchronous composition surfaces: static chrome, section headings, `<Suspense>` boundaries, error boundaries, and transition wrappers.
- Feature components own their reads on the server. They receive minimal stable inputs (`id`, `slug`, `handle`, parsed filter values) or already-fetched records, never raw `params` / `searchParams`.
- Queries and actions live in the feature folder. Components import queries; client leaves import actions directly.

Read the full skill on GitHub

Details

Skill name: nextjs-app-architecture
Repository: aurorascharff/nextjs-app-architecture-skill
License: MIT
Repo updated: 4 October 2026

FAQ

What does the Nextjs App Architecture skill do?

How do I install the Nextjs App Architecture skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add aurorascharff/nextjs-app-architecture-skill --skill nextjs-app-architecture. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Nextjs App Architecture popular?

It lives in aurorascharff/nextjs-app-architecture-skill, which has 97 GitHub stars and 0 forks.

Related skills

Audit Frontend Design

memi-design/memi

Use when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive design before editing code.

Frontend & DesignIn 1 list

Design Taste

h3nryprod01/design-taste

Elite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI (landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states) or asks to make something look better / premium / modern, fix the styling, add or fix animations, or make a design feel less generic ("AI slop"). Covers typography, color, spacing, layout, visual hierarchy, motion, micro-interactions, component states, accessibility, responsive behavior, UX copy, and anti-pattern detect

Frontend & Design

Poster Style Transfer

jiemianduan/poster-style-transfer

Analyze an uploaded or local reference poster, extract its reusable design system, and transpose that system to an original poster with a new theme, title, subtitle, or campaign copy.

Frontend & Design

Shader for Interfaces

120

v2space-labs/shader-for-interfaces

Decide whether an interface effect should stay in CSS, SVG, or Canvas 2D or needs WebGL or WebGPU, then create, integrate, diagnose, and visually verify focused GPU effects inside product interfaces. Use for contained Three.js/WebGL2/GLSL or vgpu/WebGPU/WGSL surfaces, modest particles, GPU data views, and responsive canvases in TypeScript or React. Do not use for dependent passes, persistent simulations, formal render graphs, adaptive-quality systems, or renderer migrations.

Frontend & Design

UX Wise Agent

marvinrez/ux-wise-agent

Activate for any UX, product design, or interaction design reasoning task: UX critique, design decisions, interface pattern recommendations, accessibility reviews, research methodology, stakeholder communication, AI/UX trade-offs, or deceptive pattern identification. Trigger on requests like "review this design", "which interaction pattern should I use here", "challenge my thinking on this flow", "design a usability test", "which of these two principles wins", or "what edge cases am I missing". It works at senior practitioner level: it interrogates premises, holds positions under pushback, and

Frontend & Design11

Data2motion Lite

nolangz/data2motion

Lightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reason

Frontend & Design11

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.