Frontend Conventions

Apply these conventions to the Workshop SPA, gatekeeper management SPAs, and @gadgets/ui. Package-level AGENTS.md files add product-specific rules but do not replace this guidance.

Ownership And Organization

Organize code by product ownership before implementation type. Feature directories own product behavior and may contain components, hooks, tests, and utilities that change for the same reason.

Start directories flat. Do not introduce components/, hooks/, helpers/, or tests/ subdirectories merely to classify files. Introduce a responsibility-named subsystem directory only when several files form a coherent unit or the flat directory becomes difficult to scan.

Use PascalCase filenames for components and camelCase filenames for hooks and non-component modules. Colocate *.test.ts(x) files with their subject. Feature organization does not replace the one-component-per-file model.