react-feature-sliced-design

What problem does it solve?

This Skill provides a robust architectural pattern for organizing React/TypeScript frontend codebases, ensuring maintainability, scalability, and clear separation of concerns.

Core Features & Use Cases

• Layered Architecture: Enforces a strict six-layer structure (app, pages, widgets, features, entities, shared) for code organization.
• Import Rules: Implements "down only" import rules and forbids same-layer imports to prevent circular dependencies and improve modularity.
• Slice Structure: Defines a consistent internal structure for each code slice (ui, model, api, lib, config, index.ts).
• Use Case: When building a new feature in a React application, this Skill guides you on where to place the code (e.g., a new user interaction goes in features/), how to structure its internal files, and how to import necessary components or logic from other parts of the application without violating architectural rules.

Quick Start

Use the react-feature-sliced-design skill to organize your React code according to FSD principles.