frontend-file-structurelisted

# Frontend File Structure Organize React TypeScript code by technical responsibility while keeping closely related implementation details together. Apply these rules when proposing a structure, creating files, extending an existing project, or reviewing placement and naming. ## Inspect Before Creating Files Inspect the current project before choosing a path: 1. Locate the source root, usually `src/`. 2. Identify the framework, router, state library, test runner, styling system, and configured path aliases. Read the effective `tsconfig` chain, including referenced or extended application configs, before choosing import paths. 3. Inspect nearby files and existing public entries. 4. Preserve framework-required files and established tool conventions. 5. Apply this skill strictly to new files and the files directly touched by the task. Do not reorganize unrelated code merely to make the whole repository conform. If ownership remains materially ambiguous after inspection, ask which module should own the file before creating it. ## Use Responsibility Directories Prefer this source layout when the corresponding responsibilities exist: ```text src/ ├── components/ ├── hooks/ ├── utils/ ├── stores/ ├── constants/ ├── pages/ ├── routes/ ├── styles/ ├── tests/ └── types/ # only when global or truly cross-domain types are needed ``` Do not create empty directories. Add a directory only when the task introduces that responsibility. | Directory | Owns | | --- | --- | | `comp