skill

NextArch

Agent Skill enforcing feature-based Next.js App Router structure with vertical slices, minimal client components, and clean backend integration boundaries (DB/REST/gRPC).

sameer2006-s/NextArchcommunitylistedunreviewed

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/sameer2006-s/NextArch itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 22, 2026

An Agent Skills package that keeps Next.js App Router code consistent and scalable: server-first loading, minimal client islands, and clear boundaries for integrated DB, REST, or Connect/gRPC backends. Opinionated about dependency direction, but adaptable to brownfield folder structure via task scope and escape hatches.

Repo: sameer2006-s/NextArch

Why NextArch

Agents often scatter useEffect fetches, mix DB calls into components, or invent a new folder scheme on every task. NextArch gives a repeatable playbook:

You get	How
Predictable layers	UI → actions → services → repositories → DB / REST / gRPC
Server-first defaults	RSC for reads; `"use client"` only at leaves
Right-sized planning	Patch / Feature / Greenfield scope before code
Brownfield-safe	Match `features/`, `src/modules/`, or route colocation first
Backend flexibility	Integrated (Prisma/Drizzle), Separate-REST, Separate-gRPC, or Hybrid

The agent loads a compact SKILL.md up front and pulls rules/ and docs/ only when the task needs them.

Install

npx skills add sameer2006-s/NextArch --skill nextarch

Goal	Command
This repo only	`npx skills add sameer2006-s/NextArch --skill nextarch -y`
All projects	`npx skills add sameer2006-s/NextArch --skill nextarch -g -y`
Preview skills	`npx skills add sameer2006-s/NextArch --list`
One agent	`npx skills add sameer2006-s/NextArch --skill nextarch -a <agent> -y`

Requires: Node.js 18+ and a skills-capable agent.

git clone https://github.com/sameer2006-s/NextArch.git
cd NextArch
npx skills add . --skill nextarch -y

Quick start

Enable the nextarch skill in your agent.
Start prompts with Using nextarch, or Using NextArch,.
The agent classifies scope, detects backend topology, prints a short plan, then implements.

Using nextarch, add a comments feature with Prisma: list and create on a post.

When to use

Use NextArch when…	Skip when…
Moving server-loadable data out of client components	Styling, copy, or isolated UI tweaks
Adding or refactoring a feature / domain slice	One-line bugfixes with no boundary change
Wiring Server Actions, services, repositories	Middleware-only with no data/structure impact
Choosing Prisma, Drizzle, REST, or Connect/gRPC layers	Pages Router–only or non-Next.js work
Refactoring `useEffect` + fetch dashboards	tRPC/GraphQL procedure-only tasks (boundaries only—see escape hatches)

How it works

Task scope

The agent picks how much planning to emit before coding:

Scope	When	Planning output
Patch	Single file, tiny fix	`## Plan` (2–4 bullets)
Feature	One slice or area (default)	`## Topology`, `## Architecture`, `## Data flow`
Greenfield	Multi-feature or new app area	Above + rendering / performance notes

Data flow

flowchart LR
  UI["UI / RSC"] --> A[actions]
  A --> S[services]
  S --> R[repositories]
  R --> DB["DB / API / gRPC"]

Reads: Server Component → service → repository / RPC client
Writes: Client island → Server Action (Zod) → service → repository / RPC → revalidate

Backend topologies

Mode	Signals	Domain rules live in
Integrated	Prisma, Drizzle, `lib/db`	Next.js `services/`
Separate-REST	`API_URL`, external `fetch`	Backend
Separate-gRPC	Connect, protobuf clients	Backend
Hybrid	Mixed per feature	One transport per feature

Details: skills/nextarch/docs/topology.md · Brownfield: docs/brownfield.md · tRPC/GraphQL: docs/escape-hatches.md

Example prompts

Integrated feature

Using nextarch, add comments on a post: list and create. We use Prisma.

Connect / gRPC with client refresh

Using nextarch, add an item detail page with optional client refresh.
Connect RPC; proto package @acme/api.

Refactor client-heavy page

Using nextarch, refactor app/dashboard/page.tsx — "use client" and useEffect fetch.
Move to a server-first feature slice; keep our src/modules/ layout.

Repository layout

nextarch-skill-repo/
├── assets/                   # README wordmark PNGs
├── package.json              # skill:check, skill:scaffold, skill:workspace
├── scripts/
│   ├── skill-check.mjs       # CI validators
│   └── scaffold-feature.mjs
├── .github/workflows/        # skill-check on PR
└── skills/nextarch/
    ├── SKILL.md              # agent entry (loaded first)
    ├── skill.json            # version + lazyDocs manifest
    ├── rules/                # architecture, folders, coding standards
    ├── docs/                 # brownfield, topology, snippets, testing
    └── evals/                # behavioral + trigger evals

Browse on-demand docs: skills/nextarch/docs/README.md

Migrating from `nextjs-feature-architecture`

The skill id is nextarch (v1.7+). Remove the old install, then:

npx skills add sameer2006-s/NextArch --skill nextarch -y

Use Using nextarch, … in prompts (or Using NextArch, …).

Contributing

PRs welcome. Keep each SKILL.md under ~165 lines; run checks before opening a PR.

npm run skill:check          # package, links, lazyDocs, evals (CI runs this)
npm run skill:scaffold -- comments   # optional feature folder template
npm run skill:workspace      # scaffold agent benchmark workspace

Resource	Link
Changelog	CHANGELOG.md
Maintainer guide	PUBLISHING.md
Evals & release gates	skills/nextarch/evals/README.md
License	MIT