skills.rest
kamijodev
kamijodevCOMMUNITY
Explore all skills by this author →
GitHub

Feature-Sliced Design

Implement Feature-Sliced-Design 7-layer hierarchy in Next.js apps with views layer and slice patterns.

Updated Aug 23, 2026
Search Tags:#architecture#scalability#maintainability#next.js#code organization#frontend development#fsd
One-click install
npx skills add https://github.com/kamijodev/dotfiles --skill feature-sliced-design-kamijodev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Feature-Sliced Design
Source: https://github.com/kamijodev/dotfiles/tree/main/dot_claude/skills/feature-sliced-design
Command: npx skills add https://github.com/kamijodev/dotfiles --skill feature-sliced-design-kamijodev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a robust methodology for organizing frontend codebases, specifically Next.js applications, to ensure scalability, maintainability, and clear separation of concerns.

Core Features & Use Cases

  • Layered Architecture: Implements a standardized 7-layer hierarchy (app, views, widgets, features, entities, shared) to prevent circular dependencies.
  • Custom 'views' Layer: Adapts FSD by using a 'views' layer instead of 'pages' to avoid confusion with Next.js App Router, clearly separating routing from business logic.
  • Slice-Based Organization: Organizes code within layers into domain-specific slices with a public API pattern for encapsulation.
  • Use Case: When starting a new large-scale Next.js project or refactoring an existing one, this Skill guides you to set up a clean, scalable architecture that facilitates team collaboration and long-term maintenance.

Quick Start

Implement Feature-Sliced Design in your Next.js project by following the provided structure and import rules.

Frequently Asked Questions about Feature-Sliced Design

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

FAQPage Schema
How do I organize a large Next.js codebase for better maintainability?▼

You can structure Next.js architecture using Feature-Sliced Design, which implements a 7-layer hierarchy including app, widgets, features, entities, and shared segments to enforce separation of concerns and prevent circular dependencies.

What is the best way to prevent circular dependencies in frontend development?▼

Implementing a layered architecture with strict import rules, such as Feature-Sliced Design, prevents circular dependencies by enforcing a unidirectional flow between layers and slices in your frontend project.

Can I use Feature-Sliced Design with Next.js App Router and Turborepo?▼

Yes, FSD works with Next.js App Router by using a custom 'views' layer instead of 'pages' to separate routing from business logic, and it supports Turborepo monorepo structures for scalable project organization.

How do I structure segments like ui, model, and api in a scalable frontend architecture?▼

Feature-Sliced Design organizes code within layers into domain-specific slices using detailed segment patterns for ui, model, api, lib, and config, exposing them via a public API pattern for strict encapsulation.

When should I refactor an existing Next.js project into Feature-Sliced Design?▼

You should adopt FSD when a large-scale Next.js project requires improved team collaboration, long-term maintainability, and a clear separation of business logic from routing to handle increasing complexity.

Related Skills

Explore More Software Engineering Skills→
douglasdennys45douglasdennys45

architecture-best-practices

Implement Clean Architecture and Microfrontends in Next.js monorepos with Turborepo.

Community
Advanced
atilladenizatilladeniz
2

fsd-architecture

Organize Next.js/React projects using Feature-Sliced Design layer hierarchy.

Community
Intermediate
ceamiceami
1

Feature-Sliced Design

Implement Feature-Sliced Design layers in Next.js monorepos with Turborepo.

Official
Advanced
duranserkanduranserkan
20

overview-ddd-architecture

Guide DRN-style Domain-Driven Design architecture with tiered layer and dependency rules.

Community
Advanced