vite
Guidance for Vite using the official Guide, Config Reference, and Plugins pages. Use when the user needs Vite setup, configuration, or plugin selection details.
How do I install this agent skill?
npx skills add https://github.com/partme-ai/full-stack-skills --skill viteIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill provides comprehensive documentation and configuration guidance for the Vite build tool. It maps user topics to specific documentation files and provides standard CLI and configuration examples. No security issues were detected.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
39/39 files flagged
What does this agent skill do?
When to use this skill
Use this skill whenever the user wants to:
- Follow Vite Guide topics from getting started to performance
- Configure Vite using the official config reference
- Select or understand Vite plugins from the official plugins page
- Use Vite CLI, HMR API, or JavaScript API
- Handle SSR, backend integration, or deployment scenarios in Vite
How to use this skill
- Identify the topic from the user request.
- Open the matching guide example file in
examples/guide/. - If configuration is needed, open the matching file in
examples/config/. - If plugin selection is needed, open
examples/plugins.md. - Follow official docs verbatim and keep output consistent with the referenced page.
- Validate: Run
npm run buildto verify config changes compile;npm run previewto test production output.
Guide mapping (one-to-one with https://cn.vitejs.dev/guide/)
Introduction
examples/guide/getting-started.md→ https://cn.vitejs.dev/guide/examples/guide/philosophy.md→ https://cn.vitejs.dev/guide/philosophy.htmlexamples/guide/why-vite.md→ https://cn.vitejs.dev/guide/why.html
Guide
examples/guide/features.md→ https://cn.vitejs.dev/guide/features.htmlexamples/guide/cli.md→ https://cn.vitejs.dev/guide/cli.htmlexamples/guide/using-plugins.md→ https://cn.vitejs.dev/guide/using-plugins.htmlexamples/guide/dep-pre-bundling.md→ https://cn.vitejs.dev/guide/dep-pre-bundling.htmlexamples/guide/assets.md→ https://cn.vitejs.dev/guide/assets.htmlexamples/guide/build.md→ https://cn.vitejs.dev/guide/build.htmlexamples/guide/static-deploy.md→ https://cn.vitejs.dev/guide/static-deploy.htmlexamples/guide/env-and-mode.md→ https://cn.vitejs.dev/guide/env-and-mode.htmlexamples/guide/ssr.md→ https://cn.vitejs.dev/guide/ssr.htmlexamples/guide/backend-integration.md→ https://cn.vitejs.dev/guide/backend-integration.htmlexamples/guide/troubleshooting.md→ https://cn.vitejs.dev/guide/troubleshooting.htmlexamples/guide/performance.md→ https://cn.vitejs.dev/guide/performance.htmlexamples/guide/migration.md→ https://cn.vitejs.dev/guide/migration.html
APIs
examples/guide/api-plugin.md→ https://cn.vitejs.dev/guide/api-plugin.htmlexamples/guide/api-hmr.md→ https://cn.vitejs.dev/guide/api-hmr.htmlexamples/guide/api-javascript.md→ https://cn.vitejs.dev/guide/api-javascript.html
Environment API
examples/guide/api-environment.md→ https://cn.vitejs.dev/guide/api-environment.htmlexamples/guide/api-environment-instances.md→ https://cn.vitejs.dev/guide/api-environment-instances.htmlexamples/guide/api-environment-plugins.md→ https://cn.vitejs.dev/guide/api-environment-plugins.htmlexamples/guide/api-environment-frameworks.md→ https://cn.vitejs.dev/guide/api-environment-frameworks.htmlexamples/guide/api-environment-runtimes.md→ https://cn.vitejs.dev/guide/api-environment-runtimes.html
Config mapping (one-to-one with https://cn.vitejs.dev/config/)
examples/config/configuring-vite.md→ https://cn.vitejs.dev/config/examples/config/shared-options.md→ https://cn.vitejs.dev/config/shared-options.htmlexamples/config/server-options.md→ https://cn.vitejs.dev/config/server-options.htmlexamples/config/build-options.md→ https://cn.vitejs.dev/config/build-options.htmlexamples/config/preview-options.md→ https://cn.vitejs.dev/config/preview-options.htmlexamples/config/dep-optimization-options.md→ https://cn.vitejs.dev/config/dep-optimization-options.htmlexamples/config/ssr-options.md→ https://cn.vitejs.dev/config/ssr-options.htmlexamples/config/worker-options.md→ https://cn.vitejs.dev/config/worker-options.html
Plugins mapping (one-to-one with https://cn.vitejs.dev/plugins/)
examples/plugins.md→ https://cn.vitejs.dev/plugins/
Inline Quick Start
# Create a new Vite project
npm create vite@latest my-app -- --template react-ts
# Install and run
cd my-app && npm install
npm run dev # Dev server with HMR
npm run build # Production build
npm run preview # Preview production build
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080',
},
},
build: {
sourcemap: true,
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] },
},
},
},
});
Best Practices
- Use
defineConfigfor TypeScript type hints and autocomplete - Configure proxy in
server.proxyfor API calls during development - Use
build.rollupOptions.output.manualChunksfor vendor splitting - Enable source maps in development; disable in production for smaller builds
- Use
import.meta.envfor environment variables (prefix withVITE_)
Resources
- Guide: https://cn.vitejs.dev/guide/
- Config: https://cn.vitejs.dev/config/
- Plugins: https://cn.vitejs.dev/plugins/
Keywords
Vite, build tool, dev server, HMR, config, plugins, SSR, CLI, dependency pre-bundling, assets
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/partme-ai/full-stack-skills/vite">View vite on skillZs</a>