Use for every task first; then route to path- or keyword-matched skills (fla-file-directory-convention, fla-layer-resolver, and one layer skill).
<Use_When>
<Architecture_Overview> Fractal Layered Architecture (FLA) is a frontend architecture approach designed for stable growth under changing business requirements.
Its core idea is responsibility isolation through one-way layer direction. This limits blast radius when failures happen and makes root-cause localization faster. </Architecture_Overview>
<Layer_Direction>
Allowed direction (left to right):
_pages -> _containers -> _states -> _components -> _apis -> _utils
Rules:
<Nested_Layers> Layers may contain nested sub-layers for strong cohesion and easier feature moves/deletions.
Example:
└── _pages
└── profile
├── profile.tsx
└── _containers
└── user
├── _components
│ ├── avatar
│ └── info
├── _states
└── _apis
</Nested_Layers>
<Layer_Roles>
<Naming_Conventions>
_)..stories, .schema, .type, .test).
</Naming_Conventions><Code_Writing_Principles>
<Skill_Routing_Links> Open additional skills only when needed:
fla-file-directory-convention.md
fla-layer-resolver.md
fla-page.md
/_pages/ paths or router/navigation/page orchestration tasks.fla-container.md
/_containers/ paths or UI status-branch composition tasks.fla-state.md
/_states/ paths or query/mutation/state-business tasks.fla-component.md
/_components/ paths or presentational prop-driven UI tasks.fla-api.md
/_apis/ paths or HTTP/fetch/axios/storage/cookie tasks.fla-util.md
/_utils/ paths or pure utility/helper tasks.
</Skill_Routing_Links><Execution_Policy>
fla-file-directory-convention for path/structure changes.fla-layer-resolver.