The structure of a frontend project

Before letting AI write frontend code, know which layers a frontend project is made of. You do not have to build each layer yourself, but you need to know what each one does so you can tell whether the AI put a change in the right place.

A typical layout

my-app/
├── AGENTS.md            Project instructions for AI
├── package.json         Dependencies and scripts: dev / build / test / check
├── pnpm-lock.yaml       Locked versions so every install is identical
├── vite.config.ts       Build tool config
├── biome.json           Formatting and lint rules
├── index.html           Entry page
├── public/              Static files copied as-is
├── src/
│   ├── main.tsx         App entry
│   ├── features/        Modules split by business feature
│   ├── components/      Components shared across features
│   └── lib/             UI-agnostic utilities
└── tests/e2e/           End-to-end tests

Four layers

1. Scaffold: one command generates the skeleton above, with the build tool, TypeScript, and dev server configured. We recommend pnpm create vite.
2. Framework: decides how you write UI and organize pages. Our top pick is Vite + React; consider Next.js when you need server rendering or full-stack features.
3. Tests: unit tests verify logic; end-to-end tests verify user flows in a real browser. The more the AI changes, the more tests matter.
4. Code standards: formatting and static checks keep style consistent and catch simple mistakes before commit. We recommend Biome, one tool for both.

Three rules for the AI

• Organize code by feature. Tell the AI that new features go in src/features/<feature>/ instead of scattering files.
• Run checks after every change. Put pnpm check (format + lint + tests) in the definition of done in AGENTS.md.
• Dependencies need a reason. AI loves installing packages; require it to check existing libraries first.

Testing is only touched on here; test layers and quality guardrails are covered in depth in the Quality guardrails section.