vite
Use when editing Vite projects, vite.config.ts, vite.config.js, Vite plugins, HMR, asset bundling, frontend build settings, deployment config, or Litestar/Vite integration.
Best use case
vite is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when editing Vite projects, vite.config.ts, vite.config.js, Vite plugins, HMR, asset bundling, frontend build settings, deployment config, or Litestar/Vite integration.
Teams using vite should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vite/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vite Compares
| Feature / Agent | vite | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when editing Vite projects, vite.config.ts, vite.config.js, Vite plugins, HMR, asset bundling, frontend build settings, deployment config, or Litestar/Vite integration.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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](references/config.md)** - Basic setup, custom plugins, environment variables, library mode, asset handling, SSR, and best practices. - **[HMR API](references/hmr.md)** - Hot Module Replacement accept, dispose, and invalidate patterns. - **[Litestar-Vite Plugin](references/litestar_plugin.md)** - Plugin setup/options, config bridge, Inertia helpers, HTMX helpers, CSRF helpers, and type generation. - **[Deployment](references/deployment.md)** - 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](https://github.com/cofin/flow/blob/main/templates/styleguides/general.md) - [TypeScript](https://github.com/cofin/flow/blob/main/templates/styleguides/languages/typescript.md) - 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>
Related Skills
flow-memory-keeper
Use at task, phase, flow, sync, archive, finish, revise, or failure checkpoints to keep Flow specs clean, capture learnings and failures, elevate durable patterns, and refine this skill with project-specific nuances
vue
Use when editing Vue projects, .vue files, vue.config.js, Vue 3 components, Composition API, <script setup>, SFC state, deployment workflows, or Vue CI configuration.
uvicorn
Use when deploying ASGI apps with uvicorn, editing uvicorn CLI commands, Config or Server usage, workers, reload, event loop selection, SSL, lifespan, logging, or development server behavior.
tracer
Use when tracing execution paths, mapping dependencies, understanding unfamiliar code, following data flow, investigating end-to-end behavior, debugging call chains, or deciding which files to read next.
testing
Use when writing or refactoring tests, editing test_*.py, *.test.ts, *.spec.ts, conftest.py, vitest.config.ts, pytest fixtures, mocks, coverage, async tests, anyio, or test failure debugging.
terraform
Use when creating, adopting, refactoring, or operating Terraform, *.tf files, .terraform.lock.hcl, terragrunt.hcl, root modules, backends, state, workspaces, imports, CI plan/apply, tests, or policy checks.
tanstack
Use when editing TanStack code, @tanstack imports, useQuery, createRouter, React Query, TanStack Router, Table, Form, Store, file-based routing, data fetching, or SPA state management.
tailwind
Use when styling with Tailwind CSS, editing tailwind.config.ts, tailwind.config.js, @tailwind directives, utility classes, responsive layouts, @apply, cn(), @theme config, dark mode, or forms.
svelte
Use when editing Svelte components, .svelte files, svelte.config.js, Svelte 5 runes, $state, $derived, SvelteKit, component state, or migrating away from Svelte 4 patterns.
sqlserver
Use when writing T-SQL, editing SQL Server .sql files, using sqlcmd, SQL Server connection strings, stored procedures, execution plans, indexes, Always On, JSON, security, or connector code.
sqlalchemy
Use when editing SQLAlchemy code, sqlalchemy imports, mapped_column, DeclarativeBase, ORM models, relationships, select() queries, async sessions, engines, events, or migrations.
sphinx
Use when editing Sphinx docs, conf.py, .rst files, docs/source, autodoc, Read the Docs builds, Shibuya or Immaterial themes, Wasm extensions, VHS terminal recordings, or Sphinx CI.