feature-slice

Organize large Next.js frontends into Feature-Slice Design layers.

Updated Mar 5, 2026

Search Tags:#next.js #refactor #modularization #fsd #layered-architecture #frontend-architecture

Ready to run

npx skills add https://github.com/Ezequielpereyraa/ai-config --skill feature-slice

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: feature-slice
Source: https://github.com/Ezequielpereyraa/ai-config/tree/main/skills/feature-slice
Command: npx skills add https://github.com/Ezequielpereyraa/ai-config --skill feature-slice

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Feature-Slice Design (FSD) provides an optional pattern to reorganize frontend architecture for large Next.js projects, reducing cross-feature coupling and enabling scalable growth.

Core Features & Use Cases

Layered structure: app → pages → widgets → features → entities → shared to control dependencies.
Migration guidance: step-by-step approach to convert existing projects without a full rewrite.
Declarative rules: when to apply FSD and when to avoid it, with concrete examples.

Quick Start

Outline a plan to refactor a large Next.js project to adopt Feature-Slice Design when the project exceeds ten features and cross-feature coupling is significant.

Frequently Asked Questions about feature-slice

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

FAQPage Schema

How do I refactor a large Next.js frontend with Feature-Sliced Design?▼

You refactor a large Next.js frontend with Feature-Sliced Design by migrating code step-by-step into the app, pages, widgets, features, entities, and shared layers, reducing cross-feature coupling without requiring a full rewrite.

When do I need Feature-Sliced Design for my Next.js project?▼

You need Feature-Sliced Design when your Next.js project exceeds 10 features and cross-feature dependencies become problematic, requiring isolated stores and explicit cross-layer imports to control architectural coupling.

What are the FSD layering rules for frontend architecture?▼

FSD layering rules enforce a strict dependency hierarchy: app → pages → widgets → features → entities → shared. This layered architecture controls dependencies by ensuring upper layers import lower ones, but never the reverse.

Can I migrate an existing Next.js project to FSD without a full rewrite?▼

Yes, you can migrate an existing Next.js project to FSD without a full rewrite by following a step-by-step migration approach that progressively moves features into isolated slices and shared layers while maintaining application functionality.

When should I avoid using Feature-Sliced Design in frontend architecture?▼

You should avoid Feature-Sliced Design when a Next.js project has fewer than 10 features or minimal cross-feature coupling, as the overhead of maintaining strict layering rules and isolated stores outweighs the modularization benefits.