What are the main benefits of using FSD architecture?

FSD reduces technical debt by enforcing a unidirectional data flow, making the codebase easier to navigate for teams and ensuring that features are isolated and testable.

How does this skill help with Next.js projects?

It provides specific implementation patterns for integrating FSD with the Next.js App Router, ensuring that routing and business logic layers are correctly mapped.

Can I use this skill to refactor existing code?

Yes, the skill is designed to assist in restructuring legacy codebases by identifying existing components and migrating them into the appropriate FSD layers.

What is Feature-Sliced Design (FSD)?

FSD is an architectural methodology for frontend applications that organizes code into standardized layers, slices, and segments to improve maintainability and scalability.

Does this skill support Vue or Svelte?

While common in React ecosystems, this skill applies universal FSD principles that are compatible with any modern component-based frontend framework like Vue or Svelte.

Feature-Slicing Architect

Name: Feature-Slicing Architect
Author: ccheney

byccheney

•

디자인 도구

Implements Feature-Sliced Design (FSD) architecture to build scalable, maintainable, and well-organized frontend applications.

소개

This skill empowers Claude to architect frontend projects using the Feature-Sliced Design (FSD) methodology, providing a standardized structure for React, Next.js, and Vue applications. It automates the organization of code into logical layers—such as entities, features, and widgets—while enforcing strict architectural boundaries to prevent technical debt and circular dependencies. Whether you are scaffolding a new project from scratch or refactoring a legacy codebase, this skill ensures your application remains predictable, testable, and easy to scale by following industry-standard modularity principles and public API patterns.

주요 기능

Tailored integration patterns for Next.js App Router and Pages Router
Business-domain slice and segment partitioning for modular logic
1 GitHub stars
Automated FSD layer scaffolding including entities, features, and widgets
Standardized Public API and barrel file management for every module
Enforcement of strict unidirectional import rules to prevent coupling

사용 사례

Refactoring a monolithic frontend codebase into modular, independent slices
Organizing shared UI components and business logic into reusable domain entities
Scaffolding a new, enterprise-ready React or Next.js project structure

소개

주요 기능

Tailored integration patterns for Next.js App Router and Pages Router
Business-domain slice and segment partitioning for modular logic
1 GitHub stars
Automated FSD layer scaffolding including entities, features, and widgets
Standardized Public API and barrel file management for every module
Enforcement of strict unidirectional import rules to prevent coupling

사용 사례

Refactoring a monolithic frontend codebase into modular, independent slices
Organizing shared UI components and business logic into reusable domain entities
Scaffolding a new, enterprise-ready React or Next.js project structure