skills.rest
dusvlf111
dusvlf111COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/dusvlf111/claude-setting-v0.1-fsd-next-etc --skill folder-structure-dusvlf111
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
haginothaginot

architecture-guardian

Validate TypeScript layer dependencies and report import violations.

Community
Advanced
ceamiceami
1

Feature-Sliced Design

Implement Feature-Sliced Design layers in Next.js monorepos with Turborepo.

Official
Advanced
DavidTejuDavidTeju
9

typescript-circular-dependency

Detect and resolve circular dependencies in TypeScript/JavaScript module graphs.

Community
Advanced
oborchersoborchers
28

repository-and-state-strategy

Creates Terraform repository layouts with numbered layers and isolated state files per environment.

Community
Advanced