Common-VS2019/.agents/skills/react-structure/SKILL.md

name, description

name	description
react-structure	Choose or review source organization for an existing React application, or when React source organization is explicitly requested; not for feature behavior, framework selection, or build and deployment configuration.

React Project Structure

Use this workflow only when the task concerns source organization in an existing React application, or React source organization is explicitly requested. Confirm the application from project content such as a package manifest declaring react/react-dom or existing React entry points and components. A stray dependency, documentation mention, or unrelated React file alone does not make the skill relevant.

1. Read the repository's AGENTS.md and relevant project documentation. Inspect the existing source tree, package scripts, routes, and import patterns before proposing moves or adding folders.
2. Keep application entry points and composition small. Use app/ for routing, providers, and application-wide composition when those responsibilities justify the folder; retain conventional entry files such as main.tsx where the toolchain expects them.
3. Group cohesive UI and behavior by domain under features/<feature>/. Place components, hooks, feature API calls, types, and styles together when they belong to that feature; do not create empty or speculative subfolders.
4. Put code in shared/ only when it is genuinely used across features or represents application-wide infrastructure such as HTTP clients. Avoid moving code there merely because it is not page-specific.
5. Keep shared assets and other cross-feature resources in an appropriate shared location. Prefer clear ownership and a small number of meaningful boundaries over a folder for every file or technical layer.
6. When restructuring, preserve observable behavior, routing, imports, and intentional side-effect imports such as CSS and polyfills. Update references consistently and avoid unrelated feature changes.
7. Validate with the repository's applicable type-check, tests, lint, and build scripts. Follow the owning repository's instructions for development-server, host integration, and deployment checks rather than inventing generic commands.

An optional starting shape is:

src/
├── app/                 # routes, providers, and application composition, if needed
├── features/
│   └── <feature>/       # cohesive feature UI and behavior
├── shared/              # cross-feature UI and infrastructure
├── assets/               # shared source assets, if needed
└── main.tsx              # toolchain entry point

Adapt this to the current application and its scale; it is a starting point, not a required scaffold.