How do I install the Next.js Architecture (FSD) skill?

Run npx skillmds add majiayu000/next-js-architecture-fsd 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.

What does the Next.js Architecture (FSD) skill do?

Scalable project structure using Feature-Sliced Design (FSD). It is listed under Web & Frontend on SkillMD.

Is Next.js Architecture (FSD) safe to use?

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

Which AI agents work with Next.js Architecture (FSD)?

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 Next.js Architecture (FSD) free to use?

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

Who published Next.js Architecture (FSD)?

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

Next.js Architecture (FSD) by majiayu000

Name: Next.js Architecture (FSD)
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

Architecture (Feature-Sliced Design)

Priority: P2 (MEDIUM)

Adopt Feature-Sliced Design (FSD) for scalable applications. Warning: FSD introduces boilerplate. Use it only if the project is expected to grow significantly (e.g., 20+ features). For smaller projects, a simple module-based structure is preferred.

Strategy

RSC Boundaries: Enforce strict serialization rules for props passed from Server to Client. See RSC Boundaries & Serialization.
App Layer is Thin: The app/ directory (App Router) is only for Routing.
- Rule: page.tsx should only import Widgets/Features. No business logic (useEffect, fetch) directly in pages.
Slices over Types: Group code by Business Domain (User, Product, Cart), not by File Type (Components, Hooks, Utils).
- Bad: src/components/LoginForm.tsx, src/hooks/useLogin.ts
- Good: src/features/auth/login/ containing both.
Layer Hierarchy: Code can only import from layers below it.
- App -> Widgets -> Features -> Entities -> Shared.
Avoid Excessive Entities: Do not preemptively create Entities.
- Rule: Start logic in Features or Pages. Move to Entities only when data/logic is strictly reused across multiple differing features.
- Rule: Simple CRUD belongs in shared/api, not entities.
Standard Segments: Use standard segment names within slices.
- ui (Components), model (State/actions), api (Data fetching), lib (Helpers), config (Constants).
- Avoid: components, hooks, services as segment names.

Structure Reference

For the specific directory layout and layer definitions, see the reference documentation.

FSD Folder Structure
Bundling & Compatibility
Runtime Selection (Edge/Node)
Debug Tricks & MCP

Integration with Next.js Core

Server Actions: Place them in the model/ folder of a Feature (e.g., features/auth/model/actions.ts).
Data Access (DAL): Place logic in the model/ folder of an Entity (e.g., entities/user/model/dal.ts).
UI Components: Base UI (shadcn) belongs in shared/ui. Feature-specific UI belongs in features/*/ui.

---name: next-js-architecture-fsddescription: Scalable project structure using Feature-Sliced Design (FSD).--- # Architecture (Feature-Sliced Design) ## **Priority: P2 (MEDIUM)** Adopt **Feature-Sliced Design (FSD)** for scalable applications. **Warning**: FSD introduces boilerplate. Use it only if the project is expected to grow significantly (e.g., 20+ features). For smaller projects, a simple module-based structure is preferred. ## Strategy 1. **RSC Boundaries**: Enforce strict serialization rules for props passed from Server to Client. See [RSC Boundaries & Serialization](references/RSC_BOUNDARIES.md). 2. **App Layer is Thin**: The `app/` directory (App Router) is **only** for Routing. - _Rule_: `page.tsx` should only import Widgets/Features. No business logic (`useEffect`, `fetch`) directly in pages. 3. **Slices over Types**: Group code by **Business Domain** (User, Product, Cart), not by File Type (Components, Hooks, Utils). - _Bad_: `src/components/LoginForm.tsx`, `src/hooks/useLogin.ts` - _Good_: `src/features/auth/login/` containing both. 4. **Layer Hierarchy**: Code can only import from _layers below it_. - `App` -> `Widgets` -> `Features` -> `Entities` -> `Shared`. 5. **Avoid Excessive Entities**: Do not preemptively create Entities. - _Rule_: Start logic in `Features` or `Pages`. Move to `Entities` **only** when data/logic is strictly reused across multiple differing features. - _Rule_: Simple CRUD belongs in `shared/api`, not `entities`. 6. **Standard Segments**: Use standard segment names within slices. - `ui` (Components), `model` (State/actions), `api` (Data fetching), `lib` (Helpers), `config` (Constants). - _Avoid_: `components`, `hooks`, `services` as segment names. ## Structure Reference For the specific directory layout and layer definitions, see the reference documentation. - [**FSD Folder Structure**](references/fsd-structure.md) - [**Bundling & Compatibility**](references/BUNDLING.md) - [**Runtime Selection (Edge/Node)**](references/RUNTIME_SELECTION.md) - [**Debug Tricks & MCP**](references/DEBUG_TRICKS.md) ## Integration with Next.js Core - **Server Actions**: Place them in the `model/` folder of a Feature (e.g., `features/auth/model/actions.ts`). - **Data Access (DAL)**: Place logic in the `model/` folder of an Entity (e.g., `entities/user/model/dal.ts`). - **UI Components**: Base UI (shadcn) belongs in `shared/ui`. Feature-specific UI belongs in `features/*/ui`.

Frequently asked questions