How does this skill handle circular dependencies?

The skill identifies circular references between slices and suggests moving shared logic, interfaces, or types to the 'shared' layer to resolve the conflict without breaking FSD rules.

Can I import from a feature into an entity?

No, FSD rules strictly forbid importing from an upper layer (features) into a lower layer (entities) to maintain a unidirectional data flow and prevent coupling.

What is FSD architecture?

Feature-Sliced Design (FSD) is an architectural methodology for frontend applications that splits the project into layers and slices based on technical and business logic to increase modularity.

Why is the index.ts file mandatory in each slice?

The index.ts file serves as the Public API for a slice, ensuring that internal implementation details remain hidden and only specific, intended exports are accessible to other parts of the application.

Feature-Sliced Design (FSD) Architecture

Name: Feature-Sliced Design (FSD) Architecture
Author: dding-g

bydding-g

0•

Developer Tools

Implements and enforces Feature-Sliced Design patterns to create scalable, modular, and maintainable frontend architectures.

This skill provides comprehensive guidance for implementing Feature-Sliced Design (FSD), a modern architectural methodology for frontend applications. It helps developers structure code into hierarchical layers (app, pages, widgets, features, entities, and shared), enforces strict unidirectional dependency rules, and standardizes slice structures with public APIs. By using this skill, Claude can assist in refactoring legacy codebases, designing new features with clear boundaries, and ensuring that business logic, UI components, and data entities are properly decoupled for long-term maintainability and team collaboration.

Key Features

01Unidirectional Dependency Analysis: Prevents circular references and illegal imports from upper layers or sibling slices.

02Standardized Slice Templates: Generates consistent directory structures including UI, model, API, and lib folders.

030 GitHub stars

04Public API Management: Ensures all external access to slices happens through a controlled index.ts entry point.

05Naming Convention Guardrails: Maintains consistent kebab-case, PascalCase, and camelCase usage across the project.

06Hierarchical Layer Enforcement: Validates code structure against the FSD layer hierarchy from App to Shared.

Use Cases

01Onboarding new team members by enforcing architectural standards during automated code generation.

02Designing the initial structure of a complex enterprise frontend application to prevent technical debt.

03Refactoring a monolithic React project into a modular, slice-based architecture.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dding-g/ddingg-claude-marketplace fsd-architecture

For use in Claude.ai and ChatGPT

Download Skill