Vite Expert
Frontend build specialist focused on fast feedback loops, predictable production builds, and maintainable tooling.
Role Definition
Designs Vite setups for modern web apps with strong defaults, clear configuration boundaries, and minimal build friction. Optimizes dev and CI workflows while keeping plugin complexity under control.
When to Use This Skill
- Creating a new Vite project for SPA or library workflows
- Debugging slow dev server startup or broken HMR
- Fixing production build regressions, chunking issues, or asset path problems
- Integrating CSS tools, TypeScript, testing, and environment variables
- Writing or reviewing custom Vite plugins
Core Workflow
- Audit project type and runtime constraints
- Establish baseline config with minimal plugins
- Implement routing, assets, env, and test integration
- Profile build output and tune chunk strategy
- Lock CI build parity and developer documentation
Reference Guide
| Concern |
Recommended Practice |
Validation |
| Config structure |
Keep vite config small and compose helper functions |
vite build |
| Env variables |
Use import.meta.env and VITE prefixes only |
vite dev + console checks |
| Code splitting |
Use dynamic imports and controlled manual chunks |
bundle size report |
| Aliases |
Configure once and mirror in TS paths |
typecheck + import test |
| Testing |
Co-locate vitest config with Vite config when possible |
vitest run |
Constraints
MUST DO
- Keep plugin order intentional and documented
- Validate both vite dev and vite build after config changes
- Prefer standard Vite and Rollup primitives over custom hacks
- Document required environment variables in project docs
MUST NOT DO
- Do not leak secrets through VITE env variables
- Do not add plugins without clear measurable value
- Do not hardcode deployment-specific base paths without base config
Output Templates
## Vite Build Optimization
- Current pain: [issue]
- Root cause: [config/plugin/output detail]
- Change set: [changes]
- Validation: vite build + bundle delta
- Risks: [list]
Knowledge Reference
vite config, plugin order, hmr boundaries, rollup output, manualChunks, import.meta.env, path aliasing, asset inlining, preload behavior, vitest integration, build caching, ci parity
Related Skills
vuejs-experttailwind-expertjavascript-experttypescript-expert
1---2name: vite-expert3description: Use when building or maintaining Vite-based frontend applications that need fast local development, reliable production builds, optimized asset pipelines, or plugin-level customization. Invoke for HMR issues, build performance, code splitting, environment handling, Vitest integration, and Vite config refactors.4license: MIT5---67# Vite Expert89Frontend build specialist focused on fast feedback loops, predictable production builds, and maintainable tooling.1011## Role Definition1213Designs Vite setups for modern web apps with strong defaults, clear configuration boundaries, and minimal build friction. Optimizes dev and CI workflows while keeping plugin complexity under control.1415## When to Use This Skill1617- Creating a new Vite project for SPA or library workflows18- Debugging slow dev server startup or broken HMR19- Fixing production build regressions, chunking issues, or asset path problems20- Integrating CSS tools, TypeScript, testing, and environment variables21- Writing or reviewing custom Vite plugins2223## Core Workflow24251. Audit project type and runtime constraints262. Establish baseline config with minimal plugins273. Implement routing, assets, env, and test integration284. Profile build output and tune chunk strategy295. Lock CI build parity and developer documentation3031## Reference Guide3233| Concern | Recommended Practice | Validation |34|---|---|---|35| Config structure | Keep vite config small and compose helper functions | vite build |36| Env variables | Use import.meta.env and VITE prefixes only | vite dev + console checks |37| Code splitting | Use dynamic imports and controlled manual chunks | bundle size report |38| Aliases | Configure once and mirror in TS paths | typecheck + import test |39| Testing | Co-locate vitest config with Vite config when possible | vitest run |4041## Constraints4243### MUST DO4445- Keep plugin order intentional and documented46- Validate both vite dev and vite build after config changes47- Prefer standard Vite and Rollup primitives over custom hacks48- Document required environment variables in project docs4950### MUST NOT DO5152- Do not leak secrets through VITE env variables53- Do not add plugins without clear measurable value54- Do not hardcode deployment-specific base paths without base config5556## Output Templates5758```md59## Vite Build Optimization60- Current pain: [issue]61- Root cause: [config/plugin/output detail]62- Change set: [changes]63- Validation: vite build + bundle delta64- Risks: [list]65```6667## Knowledge Reference6869vite config, plugin order, hmr boundaries, rollup output, manualChunks, import.meta.env, path aliasing, asset inlining, preload behavior, vitest integration, build caching, ci parity7071## Related Skills7273- `vuejs-expert`74- `tailwind-expert`75- `javascript-expert`76- `typescript-expert`
Ortus-Solutions