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

•

Design Tools

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.

Key Features

01Tailored integration patterns for Next.js App Router and Pages Router

02Business-domain slice and segment partitioning for modular logic

031 GitHub stars

04Automated FSD layer scaffolding including entities, features, and widgets

05Standardized Public API and barrel file management for every module

06Enforcement of strict unidirectional import rules to prevent coupling

Use Cases

01Refactoring a monolithic frontend codebase into modular, independent slices

02Organizing shared UI components and business logic into reusable domain entities

03Scaffolding a new, enterprise-ready React or Next.js project structure

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ccheney/robust-skills feature-slicing

For use in Claude.ai and ChatGPT

Download Skill