Can I use this skill for monorepos?

Yes, this skill provides specific implementation patterns for Turborepo, ensuring each application within the monorepo maintains its own independent FSD structure while sharing common packages correctly.

Why does this skill use 'views' instead of 'pages' for Next.js?

Using a 'views' layer avoids confusion with the Next.js App Router's /app directory. This allows the /app folder to handle routing only, while the /src/views layer contains the actual page business logic.

How does FSD handle dependencies?

FSD follows a strict 'linear' import rule where a module can only import from layers strictly below it in the hierarchy. This effectively prevents circular dependencies.

What is Feature-Sliced Design (FSD)?

FSD is an architectural methodology for frontend applications that organizes code into a standardized hierarchy of layers (such as entities, features, and widgets) to improve scalability, maintainability, and team collaboration.

What are segments in the FSD methodology?

Segments are purpose-based groupings within a slice, typically divided into 'ui' for components, 'model' for logic/state, 'api' for data fetching, and 'lib' for utilities.

Feature-Sliced Design Architect

Name: Feature-Sliced Design Architect
Author: constellos

byconstellos

•

開発者ツール

Implements and organizes frontend code using the Feature-Sliced Design (FSD) methodology for scalable and maintainable applications.

The Feature-Sliced Design skill provides comprehensive architectural guidance for structuring Next.js and React applications using the FSD methodology. It helps developers organize code into a standardized hierarchy of seven layers—including a custom 'views' layer for Next.js App Router compatibility—to eliminate circular dependencies, improve team collaboration, and ensure long-term maintainability. By enforcing the Public API pattern and providing clear patterns for slices and segments, this skill streamlines the transition from a flat folder structure to a production-grade, enterprise-ready architecture.

主な機能

01Strict dependency management using the Public API pattern

02Standardized 7-layer architectural hierarchy enforcement

03Tailored structural guidance for Turborepo monorepo environments

04Next.js App Router integration with custom 'views' layer naming

05Automated slice and segment generation (UI, Model, API, Lib)

064 GitHub stars

ユースケース

01Architecting a new enterprise-scale Next.js project with clear boundaries

02Refactoring a monolithic codebase into a modular, maintainable FSD structure

03Standardizing folder organization across multiple teams in a Turborepo monorepo

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add constellos/claude-code-plugins feature-sliced-design

For use in Claude.ai and ChatGPT

Download Skill