React App Structure

Placement follows the same order of authority as the typescript-code-conventions skill: framework contract, the repository's own rules, the siblings, then this skill.

Before adding a file, find where this repository keeps its equivalent: an existing page, route, service, or shared component. Put the new file beside it, shaped like it. The principles below hold in any layout and are expressed in the repository's own folders. The default layout is for the cases its reference names.

Principles

Thin routes. A route file declares the route (path, params, loader, metadata) and renders a page component imported from where pages live. The page's state, markup, and logic stay out of the route file, so routing and page code change independently.