react-feature-sliced-design

Name: react-feature-sliced-design
Availability: InStock
Author: Provectus

Enforce Feature-Sliced Design architecture for React/TypeScript applications.

10|17|Updated Feb 22, 2026

Search Tags:#typescript #frontend architecture #react #code organization #fsd #feature-sliced design

Ready to run

npx skills add https://github.com/provectus/awos-recruitment --skill react-feature-sliced-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-feature-sliced-design
Source: https://github.com/provectus/awos-recruitment/tree/main/registry/skills/react-feature-sliced-design
Command: npx skills add https://github.com/provectus/awos-recruitment --skill react-feature-sliced-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

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.

Frequently Asked Questions about react-feature-sliced-design

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

FAQPage Schema

How do I organize React and TypeScript code to prevent circular dependencies?▼

Organize React and TypeScript code using Feature-Sliced Design to establish strict import rules. It enforces a layered architecture with downward-only imports to prevent circular dependencies and improve modularity.

What is the best way to structure a large scale React frontend codebase?▼

The best way to structure a large scale React frontend is using Feature-Sliced Design. It separates code into six layers—app, pages, widgets, features, entities, and shared—to ensure clear boundaries and maintainability.

Where should I place new components and hooks in React feature-sliced design?▼

In React feature-sliced design, place new user interactions in the features layer. Components and hooks are organized within specific slices, each containing internal directories like ui, model, api, and lib for consistent code placement.

Does feature-sliced design work with existing TypeScript frontend workflows?▼

Yes, feature-sliced design works with existing TypeScript workflows. It guides component, hook, and API placement within slices without requiring external dependencies, integrating directly into your current React development process.

Why are same-layer imports forbidden in feature-sliced design architecture?▼

Same-layer imports are forbidden in feature-sliced design to maintain strict modularity. This architectural constraint prevents tightly coupled code across features and widgets, ensuring slices remain independent and maintainable.