Installation
npx skills add oakoss/agent-skills --skill vite 39
Installs
Vite
Overview
Vite is a next-generation frontend build tool that provides instant dev server start via native ES modules and optimized production builds via Rollup. It supports TypeScript, JSX, CSS preprocessors, and static assets out of the box with zero configuration.
When to use: Single-page apps, multi-page apps, library publishing, SSR applications, monorepo packages, any modern frontend project needing fast dev feedback and optimized builds.
When NOT to use: Legacy browsers requiring ES5 output without transpilation, projects locked to Webpack-specific loaders with no Vite equivalents, non-JavaScript build pipelines.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Config file | defineConfig({}) |
Type-safe config with IDE support |
| Conditional config | defineConfig(({ command, mode }) => ({})) |
Different config per command/mode |
| Path alias | resolve.alias |
Map @/ to src/ |
| Dev proxy | server.proxy |
Forward API requests to backend |
| HMR config | server.hmr |
WebSocket host/port/protocol |
| HTTPS dev | server.https |
Pass TLS cert/key options |
| Build target | build.target |
ES module target for output |
| Manual chunks | build.rollupOptions.output.manualChunks |
Control code splitting |
| Library mode | build.lib |
Publish ES/CJS/UMD packages |
| SSR build | build.ssr + ssr options |
Server-side rendering config |
| Env variables | import.meta.env.VITE_* |
Client-exposed env vars |
| loadEnv | loadEnv(mode, root, prefix) |
Load env vars in config |
| CSS modules | css.modules |
Scoped CSS class names |
| Preprocessors | css.preprocessorOptions |
Sass/Less/Stylus options |
| PostCSS | css.postcss |
Inline or external PostCSS config |
| Static assets | import url from './img.png' |
Returns resolved public URL |
| Plugin | { name, transform, load } |
Hook-based plugin system |
| Virtual module | resolveId + load hooks |
Generate modules at build time |
| Multi-page | build.rollupOptions.input |
Multiple HTML entry points |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Exposing secrets via VITE_ prefix |
Only prefix client-safe vars with VITE_; use loadEnv in config for server-only secrets |
Using process.env in client code |
Use import.meta.env.VITE_* (Vite replaces at build time) |
Modifying rollupOptions.input without resolve() |
Always use path.resolve() or import.meta.dirname for absolute paths |
| Not externalizing peer deps in library mode | Add React/Vue to rollupOptions.external to avoid bundling |
| Creating QueryClient-style singletons in SSR | Ensure per-request state in SSR to avoid cross-request leaks |
Inline PostCSS config alongside postcss.config.js |
Use one or the other; inline config disables config file search |
Setting base without trailing slash |
base should be /path/ with trailing slash or full URL |
Using __dirname in ESM config |
Use import.meta.dirname (Node 21+) or fileURLToPath |
Delegation
- Plugin discovery: Use
Exploreagent - Build analysis: Use
Taskagent - Config review: Delegate to
code-revieweragent
If the
vitest-testingskill is available, delegate test configuration and Vitest setup to it.
If thetailwindskill is available, delegate Tailwind CSS configuration and utility patterns to it.
If thereact-patternsskill is available, delegate React component patterns and hooks to it.
If thetypescript-patternsskill is available, delegate TypeScript configuration and type patterns to it.
If thepnpm-workspaceskill is available, delegate monorepo workspace configuration to it.
References
- Configuration fundamentals and defineConfig patterns
- Plugin authoring and popular plugins
- Dev server setup: proxy, HMR, HTTPS, and middleware
- Build optimization: chunking, tree-shaking, and output control
- Library mode for publishing packages
- SSR configuration and Express integration
- Environment variables and .env file handling
- CSS handling: PostCSS, CSS modules, preprocessors, and asset management
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install vite by running npx skills add oakoss/agent-skills --skill vite in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of vite, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
