How do I install the Architect Nextjs skill?

Run npx skillmds@latest add ivantsxx/architect-nextjs in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Architect Nextjs safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Architect Nextjs?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Architect Nextjs free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Architect Nextjs?

ivantsxx (@ivantsxx) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Architect Nextjs by ivantsxx — Agent Skill

Name: Architect Nextjs
Author: ivantsxx

Architect Nextjs

Establish the architecture for Next.js 15+ applications using the Scope Rule and Screaming Architecture. Use this skill when (1) Setting up a new project, (2) Deciding component placement (local vs shared), (3) Refactoring codebases, or (4) implementing Server Actions, layouts, and route groups.

ivantsxx Updated Sep 17, 2026

File contents

Scope Rule Architect (Next.js 15+)

This skill establishes the architectural foundation for scalable Next.js applications by enforcing strict Scope Rules and Screaming Architecture.

Core Principles

1. The Scope Rule (Absolute Law)

"Scope determines structure."

Local Scope: Code used by 1 feature → MUST stay local (e.g., (user)/profile/_components).
Shared Scope: Code used by 2+ features → MUST go to src/shared/.
No Exceptions: Do not pollute shared with single-use components.

2. Screaming Architecture

Directory structures must immediately declare what the application does.

Use Route Groups (feature) for top-level modules.
Avoid generic folders like containers or views at the top level.

3. Next.js 15 Standards

App Router Only: No pages/ directory.
Server-First: Components are Server Components by default.
Data Access: Fetch directly in Server Components or via Server Actions.

Decision Framework

When placing files, follow this decision tree:

Count Usage:
- Used by 1 Feature: Place in app/(feature)/_components/.
- Used by 2+ Features: Place in src/shared/components/.
Determine Type:
- Server Component: Default. Used for static content and initial data fetching.
- Client Component: Use ONLY for useState, useEffect, or event listeners.
- Server Action: Use for mutations and form handling. Place in _actions/name.ts.

Implementation Guides

Project Structure

For the standard directory layout, reference the Project Structure Template.
Use this reference when setting up new folders or verifying where a specific file should reside.

Component Templates

For code patterns ensuring best practices, reference the Component Templates.
This includes:

Server Components with Suspense and data fetching.
Client Components isolated for interactivity.
Server Actions properly typed and validated.

Quality Checklist

Before finalizing a structure or file creation:

Scope: Is this used in >1 feature? If no, move to _components.
Server: Is "use client" absolutely necessary? Can it be pushed down the tree?
Screaming: Does the folder name describe what it does (e.g., (invoices) vs pages)?
Colocation: Are specific hooks/types/styles next to the consuming component?

---name: architect-nextjsdescription: Establish the architecture for Next.js 15+ applications using the Scope Rule and Screaming Architecture. Use this skill when (1) Setting up a new project, (2) Deciding component placement (local vs shared), (3) Refactoring codebases, or (4) implementing Server Actions, layouts, and route groups.---# Scope Rule Architect (Next.js 15+)This skill establishes the architectural foundation for scalable Next.js applications by enforcing strict **Scope Rules** and **Screaming Architecture**.## Core Principles### 1. The Scope Rule (Absolute Law)**"Scope determines structure."**- **Local Scope**: Code used by **1 feature** → MUST stay local (e.g., `(user)/profile/_components`).- **Shared Scope**: Code used by **2+ features** → MUST go to `src/shared/`.- **No Exceptions**: Do not pollute `shared` with single-use components.### 2. Screaming ArchitectureDirectory structures must immediately declare *what* the application does.- Use **Route Groups** `(feature)` for top-level modules.- Avoid generic folders like `containers` or `views` at the top level.### 3. Next.js 15 Standards- **App Router Only**: No `pages/` directory.- **Server-First**: Components are Server Components by default.- **Data Access**: Fetch directly in Server Components or via Server Actions.## Decision FrameworkWhen placing files, follow this decision tree:1. **Count Usage**: - **Used by 1 Feature**: Place in `app/(feature)/_components/`. - **Used by 2+ Features**: Place in `src/shared/components/`.2. **Determine Type**: - **Server Component**: Default. Used for static content and initial data fetching. - **Client Component**: Use ONLY for `useState`, `useEffect`, or event listeners. - **Server Action**: Use for mutations and form handling. Place in `_actions/name.ts`.## Implementation Guides### Project StructureFor the standard directory layout, reference the [Project Structure Template](references/project_structure.md). Use this reference when setting up new folders or verifying where a specific file should reside.### Component TemplatesFor code patterns ensuring best practices, reference the [Component Templates](references/component_templates.md). This includes:- **Server Components** with `Suspense` and data fetching.- **Client Components** isolated for interactivity.- **Server Actions** properly typed and validated.## Quality ChecklistBefore finalizing a structure or file creation:1. [ ] **Scope**: Is this used in >1 feature? If no, move to `_components`.2. [ ] **Server**: Is "use client" absolutely necessary? Can it be pushed down the tree?3. [ ] **Screaming**: Does the folder name describe *what* it does (e.g., `(invoices)` vs `pages`)?4. [ ] **Colocation**: Are specific hooks/types/styles next to the consuming component?

Frequently asked questions