playbooks

home / skills / partme-ai / full-stack-skills / vite

vite skill

/skills/vite

This skill guides you through Vite setup, configuration, and plugins using official docs for efficient development.

npx playbooks add skill partme-ai/full-stack-skills --skill vite

Review the files below or copy the command above to add this skill to your agents.

Files (39)
SKILL.md
4.2 KB
---
name: vite
description: Guidance for Vite using the official Guide, Config Reference, and Plugins pages. Use when the user needs Vite setup, configuration, or plugin selection details.
license: Complete terms in LICENSE.txt
---

## 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

1. **Identify the topic** from the user request.
2. **Open the matching guide example** file in `examples/guide/`.
3. **If configuration is needed**, open the matching file in `examples/config/`.
4. **If plugin selection is needed**, open `examples/plugins.md`.
5. **Follow official docs verbatim** and keep output consistent with the referenced page.

### 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.html
- `examples/guide/why-vite.md` → https://cn.vitejs.dev/guide/why.html

**Guide**
- `examples/guide/features.md` → https://cn.vitejs.dev/guide/features.html
- `examples/guide/cli.md` → https://cn.vitejs.dev/guide/cli.html
- `examples/guide/using-plugins.md` → https://cn.vitejs.dev/guide/using-plugins.html
- `examples/guide/dep-pre-bundling.md` → https://cn.vitejs.dev/guide/dep-pre-bundling.html
- `examples/guide/assets.md` → https://cn.vitejs.dev/guide/assets.html
- `examples/guide/build.md` → https://cn.vitejs.dev/guide/build.html
- `examples/guide/static-deploy.md` → https://cn.vitejs.dev/guide/static-deploy.html
- `examples/guide/env-and-mode.md` → https://cn.vitejs.dev/guide/env-and-mode.html
- `examples/guide/ssr.md` → https://cn.vitejs.dev/guide/ssr.html
- `examples/guide/backend-integration.md` → https://cn.vitejs.dev/guide/backend-integration.html
- `examples/guide/troubleshooting.md` → https://cn.vitejs.dev/guide/troubleshooting.html
- `examples/guide/performance.md` → https://cn.vitejs.dev/guide/performance.html
- `examples/guide/migration.md` → https://cn.vitejs.dev/guide/migration.html

**APIs**
- `examples/guide/api-plugin.md` → https://cn.vitejs.dev/guide/api-plugin.html
- `examples/guide/api-hmr.md` → https://cn.vitejs.dev/guide/api-hmr.html
- `examples/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.html
- `examples/guide/api-environment-instances.md` → https://cn.vitejs.dev/guide/api-environment-instances.html
- `examples/guide/api-environment-plugins.md` → https://cn.vitejs.dev/guide/api-environment-plugins.html
- `examples/guide/api-environment-frameworks.md` → https://cn.vitejs.dev/guide/api-environment-frameworks.html
- `examples/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.html
- `examples/config/server-options.md` → https://cn.vitejs.dev/config/server-options.html
- `examples/config/build-options.md` → https://cn.vitejs.dev/config/build-options.html
- `examples/config/preview-options.md` → https://cn.vitejs.dev/config/preview-options.html
- `examples/config/dep-optimization-options.md` → https://cn.vitejs.dev/config/dep-optimization-options.html
- `examples/config/ssr-options.md` → https://cn.vitejs.dev/config/ssr-options.html
- `examples/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/

## 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

Overview

This skill provides practical guidance for using Vite based on the official Guide, Config Reference, and Plugins pages. It helps you set up projects, tune configuration, choose plugins, and handle advanced scenarios like SSR, HMR, and deployment. The guidance is mapped to specific examples and reference pages for fast, accurate answers.

How this skill works

I inspect the user’s intent (setup, config, plugin choice, API usage, or troubleshooting) and map it to the matching official guide, config, or plugins page. For configuration requests I surface the exact config options and recommended values. For plugin questions I compare needs to known plugins and usage patterns. For API or CLI inquiries I show the correct calls and typical code snippets drawn from the official references.

When to use it

  • When you need to initialize a Vite project or choose a template.
  • When you need concrete config options for dev server, build, SSR, or worker settings.
  • When you need to select, configure, or evaluate Vite plugins.
  • When you need HMR, JavaScript API, or CLI usage examples.
  • When you’re integrating Vite with a backend or preparing deployment.
  • When you’re troubleshooting performance or migration issues.

Best practices

  • Start from the official guide section matching your goal (getting started, build, SSR) to avoid mismatched advice.
  • Keep config minimal and use env/mode for environment-specific values to simplify maintenance.
  • Pre-bundle heavy dependencies to improve cold-start dev server performance.
  • Prefer official or well-maintained plugins; read plugin options and lifecycle hooks before integrating.
  • Use the preview command to validate production build behavior before deploying.

Example use cases

  • Set up a new React or Vue project with Vite and local dev server configuration.
  • Tune build options (rollup/vite build) for smaller bundles and faster cold starts.
  • Add and configure plugins: image optimization, legacy support, or framework integrations.
  • Implement SSR entry points and server middleware integration for backend frameworks.
  • Troubleshoot dev server HMR issues and dependency pre-bundling failures.

FAQ

Can this skill recommend plugins for a specific need?

Yes. Tell me the goal (e.g., image optimization, legacy browser support, or CSS handling) and I’ll propose well-known plugins and configuration tips.

Will the guidance include exact config fields?

Yes. When you ask about configuration I provide the specific Vite config options and typical values mapped to the official config reference.

Does this cover SSR and backend integration?

Yes. I cover SSR patterns, server entry points, and recommended integration approaches for common backend setups.