pattern-engineer-vitelisted

# pattern-engineer-vite ## When to activate Activate when editing `vite.config.ts` / `vite.config.js`, `vitest.config.ts`, scaffolding a Vite-based React app, switching between Vite and Next.js, configuring dev-server proxy / plugins / aliases, or touching `import.meta.env`. Skip for Next.js apps (use Next-specific patterns instead) or non-frontend code. ## Project memory overlay After loading this skill, also check `$MAIN_ROOT/.claude/memory/patterns/pattern-engineer-vite.md` in the consuming project (resolve `MAIN_ROOT="$(dirname "$(git rev-parse --path-format=absolute --git-common-dir)")"`). If present, load it as an **additive overlay** to the rules below; if absent, skip silently. See `memory-convention` for the full contract (additivity, severity floor, conflict surfacing). ## Patterns ### Stack choice - Pick Vite when the app is pure CSR: internal tools, dashboards behind auth, embedded widgets, prototypes, SPAs where SEO doesn't matter. - Pick Next.js when the app needs SSR / SSG / ISR, edge runtime, file-based routing, server components, SEO-critical pages, image optimization, or first-class API routes. - Don't reach for Next.js "just in case." If today's requirements are CSR-only, ship Vite; migrating later is straightforward. ### Env vars - `import.meta.env.VITE_<NAME>` for env vars exposed to the client. The `VITE_` prefix is mandatory — without it Vite won't inline the value. - Server-only secrets never get the `VITE_` prefix (Vite refuses to expose them