Skills
.Work. You
Rest

Feature-Sliced Design

Official

Structure Next.js apps with scalable FSD.

Software Engineering#architecture#next.js#monorepo#turborepo#fsd#layers#feature-sliced-design
Authorceami
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Feature-Sliced Design provides a clear, scalable structure for front-end code, breaking concerns into layers (app, views, widgets, features, entities, shared) to prevent circular dependencies and improve maintainability, especially in large Next.js projects and monorepos.

Core Features & Use Cases

  • Clear layer-based architecture with 7 layers (app, views, widgets, features, entities, shared)
  • Monorepo-friendly structure for Turborepo, isolated app structures, and shared packages
  • Public API pattern via index.ts exports to prevent cross-imports
  • Slices and segments organization (ui, model, api, lib, config)
  • Routing and app structure guidance for Next.js App Router and FSD App layer
  • Migration strategies and best practices

Quick Start

Create the layered project structure as described and begin applying FSD in your Next.js project.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Feature-Sliced Design
Download link: https://github.com/ceami/opendata-web/archive/main.zip#feature-sliced-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.