folder-structure

Organize frontend projects into Feature-Sliced Design layers with import rules.

Updated Apr 15, 2026

Search Tags:#architecture #frontend #fsd #layered #folder-structure #module-design

Ready to run

npx skills add https://github.com/dusvlf111/claude-setting-v0.1-fsd-next-etc --skill folder-structure-dusvlf111

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: folder-structure
Source: https://github.com/dusvlf111/claude-setting-v0.1-fsd-next-etc/tree/main/.claude/skills/folder-structure
Command: npx skills add https://github.com/dusvlf111/claude-setting-v0.1-fsd-next-etc --skill folder-structure-dusvlf111

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized folder layout for frontend projects following Feature-Sliced Design (FSD). It helps teams decide where to place new files or components, design accurate import paths, and enforce clear module boundaries, improving consistency and onboarding speed.

Core Features & Use Cases

FSD three-tier architecture: Layer → Slice → Segment and a vertical organization approach.
Prescribed top-level directories: src/app, src/pages, src/widgets, src/features, src/entities, src/shared.
Shared subtree guidelines: src/shared/ui/, src/shared/lib/, src/shared/api/, src/shared/config/, src/shared/i18n/, src/shared/assets/.
Clear import direction: upper layers can import from lower layers; cross-layer cycles are avoided to maintain dependency health.
Use Case: when adding a new feature, place code under features/your-feature and wire it into pages/widgets without leaking domain knowledge.

Quick Start

Create the recommended folder structure under src and align new files with the Layer → Slice → Segment hierarchy described above.

Frequently Asked Questions about folder-structure

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

FAQPage Schema

How do I organize a frontend project using Feature-Sliced Design?▼

Feature-Sliced Design organizes frontend projects into a vertical Layer → Slice → Segment hierarchy using prescribed directories like app, pages, widgets, features, entities, and shared to improve modularity and reusability.

What is the correct import direction for FSD layered architecture?▼

FSD enforces clear import rules where upper layers can import from lower layers. This prevents cross-layer cycles and maintains dependency health across your frontend modules.

What folder should I use for shared utilities in Feature-Sliced Design?▼

Place shared utilities under the src/shared directory, specifically within subtrees like shared/ui, shared/lib, shared/api, shared/config, shared/i18n, and shared/assets for clear module boundaries.

How do I add a new feature without leaking domain knowledge in FSD?▼

Place new feature code under the features/your-feature directory and wire it into pages or widgets. This isolates domain logic and prevents leaking domain knowledge across modules.

Does Feature-Sliced Design work for large scalable frontend applications?▼

FSD is designed for scalable frontend architecture. By enforcing a three-tier structure and preventing cross-layer dependencies, it improves consistency and onboarding speed for growing teams.

Why should I use FSD over other frontend folder structures?▼

Feature-Sliced Design provides a standardized folder layout that helps teams decide where to place components and design accurate import paths, ensuring clear module boundaries unlike ad-hoc structures.