Build skill
Vite as the vibe-coding engine
Vite is useful because it protects the build flow: fast dev server, fast HMR, simple config, and a production build that still forces reality checks.
For full vibe coding, use Vite as the fast loop, but keep a separate gate for typecheck, build, route checks, and broken-asset checks.
Why I adopted it
Jiju became too large to keep iterating comfortably without a faster build loop.
The project needed clearer modular boundaries so UI, routes, assets, Firebase logic, and public pages could be changed without the whole app feeling tangled.
Vite helped turn a heavy project into smaller feedback zones: change one page, one component, one asset path, then verify quickly.
Why it feels good
Cold start is fast because dev does not bundle the whole app first.
HMR keeps visual iteration alive, especially when adjusting UI, motion, copy, and microfeedback with AI.
The config surface is small enough that AI can reason about the project without fighting a large custom bundler setup.
The traps
Dev and production are not identical: dev uses native ESM plus esbuild behavior, while production uses Rollup.
Vite transpiles TypeScript quickly, but it does not typecheck by itself.
Large component trees can create a local network waterfall during dev because many modules are requested separately.
Dependency cache can create stale-behavior bugs; clearing `node_modules/.vite` or running with `--force` is sometimes necessary.
Old CommonJS packages or dynamic require patterns can still create compatibility work.
How to use it for full vibe coding
Let `npm run dev` stay non-blocking: it should show the UI quickly and keep HMR smooth.
Do not rely on the dev server as proof of correctness; run `npm run typecheck` and `npm run build` before treating a change as done.
Use TypeScript as AI context, not as a wall during exploration. Prefer fixing types later in a dedicated pass instead of scattering `@ts-ignore`.
Use stable imports and route helpers. Path aliases are useful, but only if the repo is structured around them consistently.
Keep Firebase or backend access in a small number of service files so AI can hold the data model in context.
Check real assets and public routes after changes. A passing UI can still hide broken images, wrong base paths, or missing public files.
Rule of thumb
Vite is excellent for speed, but speed must be paired with a release checklist.
During exploration, optimize for flow. Before handoff, optimize for truth.
The best Vite setup for AI work is boring: predictable dev server, explicit routes, clean services, and repeatable checks.