feature-sliced-design

Implement Feature-Sliced Design v2.1 architecture for Next.js App Router projects.

Updated Feb 17, 2026

Search Tags:#architecture #scalability #maintainability #next.js #code structure #fsd

Ready to run

npx skills add https://github.com/unerue/skills --skill feature-sliced-design-unerue

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: feature-sliced-design
Source: https://github.com/unerue/skills/tree/main/skills/feature-sliced-design
Command: npx skills add https://github.com/unerue/skills --skill feature-sliced-design-unerue

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a robust architectural pattern (Feature-Sliced Design) to organize Next.js applications, preventing code complexity, circular dependencies, and ensuring maintainability as projects grow.

Core Features & Use Cases

Layered Architecture: Organizes code into distinct layers (app, views, widgets, features, entities, shared) with strict import rules.
Slice-Based Development: Encourages modularity by partitioning code into domain-specific slices with public APIs.
Next.js App Router Integration: Adapts FSD principles specifically for modern Next.js applications, merging routing and FSD App layer concerns.
Use Case: When starting a new Next.js project or refactoring a complex existing one, use this Skill to establish a scalable and maintainable folder structure and coding conventions.

Quick Start

Use the feature-sliced-design skill to set up a new Next.js project with FSD architecture.

Frequently Asked Questions about feature-sliced-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure a Next.js app to prevent circular dependencies and maintain scalability?▼

To prevent circular dependencies in a Next.js app, apply Feature-Sliced Design (FSD) to enforce strict layered architecture and slice-based modularity with zero coupling. It separates code into layers like app, views, widgets, features, entities, and shared with strict import rules.

How does Feature-Sliced Design integrate with the Next.js App Router?▼

Feature-Sliced Design merges the Next.js App Router with the FSD App layer in `src/app/` and places page logic in `src/views/`. This integration adapts FSD principles specifically for modern Next.js applications while maintaining strict architectural boundaries.

What is the best way to organize a large Next.js codebase for high cohesion?▼

The best way to organize a large Next.js codebase for high cohesion is using Feature-Sliced Design. It partitions code into domain-specific slices with public APIs and purpose-based segment naming conventions, ensuring modularity and maintainability as your project grows.

Can I use this architecture to refactor an existing complex Next.js project?▼

Yes, you can use Feature-Sliced Design to refactor an existing complex Next.js project. It establishes a scalable folder structure and coding conventions using distinct layers and slice-based development with public API patterns to manage growing complexity.

What are the limitations of using Feature-Sliced Design for Next.js development?▼

A limitation of Feature-Sliced Design is its strict architectural overhead, which may be excessive for small projects. It enforces rigid layered architecture, public API patterns, and purpose-based segment naming conventions that require discipline to maintain zero coupling across slices.