Frontend UI Architecture

Defines where frontend code lives and how it's layered: folder/feature structure, component-folder anatomy, component splitting, constants placement, utils vs helpers vs services, business-logic placement (custom hooks, API/service boundary), types organization, and barrel-file (index.ts) conventions — for plain React and Next.js App Router apps. Use when scaffolding a new feature/component, deciding where a file or piece of logic belongs, or reviewing/refactoring project structure. Architecture and code organization only — NOT component behavior/anti-patterns (see react-best-practices) and NOT Next.js routing mechanics, data-fetching primitives, or performance (see next-…