Can I use this with a monorepo setup?

Yes, this skill includes specific guidance for implementing FSD within a Turborepo environment, ensuring cross-package consistency and isolation.

What is Feature-Sliced Design (FSD)?

FSD is an architectural methodology that organizes frontend code into layers (app, views, widgets, features, entities, shared) to improve modularity, scalability, and maintainability.

How does this skill adapt FSD for Next.js?

It merges the FSD App layer concerns into the Next.js src/app directory and uses a custom 'views' layer for page-level business logic, aligning FSD principles with file-based routing.

Is FSD necessary for small projects?

While FSD is optimized for large-scale enterprise apps, it provides a clear roadmap for growth, preventing the architectural debt that often accumulates in rapidly expanding small projects.

How does FSD prevent circular dependencies?

FSD enforces a strict unidirectional import rule where a module can only import from layers strictly below it in the hierarchy, making circular imports structurally impossible.

Feature-Sliced Design (FSD) Architecture

Name: Feature-Sliced Design (FSD) Architecture
Author: unerue

byunerue

0•

Design Tools

Implements a scalable, layered architectural pattern for Next.js applications to prevent circular dependencies and improve maintainability.

This skill provides comprehensive guidance for applying the Feature-Sliced Design (FSD v2.1) methodology specifically tailored for Next.js App Router projects. It helps developers organize code into a strict hierarchy of layers—including entities, features, and widgets—ensuring a modular codebase where modules only depend on lower-level layers. By standardizing folder structures and enforcing public API boundaries, it simplifies scaling complex frontend applications and facilitates seamless team collaboration through predictable patterns.

Key Features

01Public API enforcement via index.ts to prevent tight coupling and circular dependencies

02Advanced support for React Query integration and Turborepo monorepos

030 GitHub stars

04Next.js App Router optimization with a unified src/app and views layer structure

05Standardized FSD v2.1 layer hierarchy (Shared, Entities, Features, Widgets, Views, App)

06Domain-driven slicing for high cohesion and independent module development

Use Cases

01Architecting new large-scale Next.js projects with clear boundaries from day one

02Establishing a consistent organizational standard for multi-developer frontend teams

03Refactoring 'spaghetti' codebases into a predictable and maintainable structure

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add unerue/skills feature-sliced-design

For use in Claude.ai and ChatGPT

Download Skill