Vite Build Tool Skill

Overview

Vite is a fast frontend build tool using native ES modules for dev and Rollup for production builds. This skill covers configuration, plugin authoring, HMR, asset handling, SSR, library mode, Litestar integration, and deployment.

---

<workflow>

References Index

For detailed guides and configuration examples, refer to the following documents in references/:

• Configuration
  • Basic setup, custom plugins, environment variables, library mode, asset handling, SSR, and best practices.
• HMR API
  • Hot Module Replacement accept, dispose, and invalidate patterns.
• Litestar-Vite Plugin
  • Plugin setup/options, config bridge, Inertia helpers, HTMX helpers, CSRF helpers, and type generation.
• Deployment
  • SPA integration, static/edge hosting, and CI/CD GitHub Actions workflow.

</workflow>

---

Official References

• https://vite.dev/guide/
• https://vite.dev/config/
• https://vite.dev/guide/api-plugin
• https://vite.dev/guide/env-and-mode
• https://vite.dev/guide/migration
• https://www.npmjs.com/package/vite

Shared Styleguide Baseline

• Use shared styleguides for generic language/framework rules to reduce duplication in this skill.
• General Principles
• TypeScript
• Keep this skill focused on tool-specific workflows, edge cases, and integration details.

<guardrails> ## Guardrails

Add guardrails instructions here. </guardrails>

<validation> ## Validation

Add validation instructions here. </validation>

<example> ## Example

Add example instructions here. </example>