vite
Vite performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Vite configuration and projects to ensure optimal performance patterns. Triggers on tasks involving Vite config, build optimization, dependency pre-bundling, plugin development, bundle analysis, or HMR issues.
- Installs
- 361
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/pproenca/dot-skills --skill vite- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads vite automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Vite Best Practices
Comprehensive performance optimization guide for Vite applications. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Configuring Vite for a new project
- Troubleshooting slow dev server startup
- Optimizing production bundle size
- Debugging HMR issues
- Writing or evaluating Vite plugins
- Migrating from Webpack or other bundlers
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Dependency Pre-bundling | CRITICAL | deps- |
| 2 | Plugin Performance | CRITICAL | plugin- |
| 3 | Bundle Optimization | CRITICAL | bundle- |
| 4 | Import Resolution | HIGH | import- |
| 5 | Build Configuration | HIGH | build- |
| 6 | Development Server | MEDIUM-HIGH | dev- |
| 7 | CSS Optimization | MEDIUM | css- |
| 8 | Advanced Patterns | LOW-MEDIUM | advanced- |
Quick Reference
1. Dependency Pre-bundling (CRITICAL)
deps-include-large-cjs- Include large dependencies with many modulesdeps-exclude-esm- Exclude small ESM dependenciesdeps-force-rebundle- Use --force flag for dependency changesdeps-hold-until-crawl- Configure holdUntilCrawlEnd for startup behaviordeps-entries- Configure custom entry points for discoverydeps-linked-packages- Handle linked dependencies in monorepos
2. Plugin Performance (CRITICAL)
plugin-lazy-imports- Use dynamic imports in plugin codeplugin-avoid-long-hooks- Avoid long operations in startup hooksplugin-transform-early-return- Early return in transform hooksplugin-audit-community- Audit community plugins for performanceplugin-swc-over-babel- Use SWC instead of Babel for React
3. Bundle Optimization (CRITICAL)
bundle-manual-chunks- Use manualChunks for vendor splittingbundle-dynamic-imports- Use dynamic imports for route-level splittingbundle-analyze- Analyze bundle compositionbundle-tree-shaking- Enable effective tree-shakingbundle-chunk-warning- Address large chunk warningsbundle-compression- Disable compressed size reporting for large projectsbundle-asset-inlining- Configure asset inlining threshold
4. Import Resolution (HIGH)
import-avoid-barrel- Avoid barrel file importsimport-explicit-extensions- Use explicit file extensionsimport-path-aliases- Configure path aliases for clean importsimport-svg-strings- Import SVGs as strings instead of componentsimport-glob-patterns- Use glob imports carefully
5. Build Configuration (HIGH)
build-modern-target- Target modern browsersbuild-minification- Use esbuild for minificationbuild-sourcemaps- Disable source maps in productionbuild-css-code-split- Enable CSS code splittingbuild-rolldown- Consider Rolldown for faster buildsbuild-output-dir- Configure output directory and caching
6. Development Server (MEDIUM-HIGH)
dev-server-warmup- Warm up frequently used filesdev-browser-cache- Keep browser cache enabled in DevToolsdev-fs-limits- Increase file descriptor limits on Linuxdev-wsl-polling- Use polling for WSL file watchingdev-https-proxy- Configure HTTPS and proxy for development
7. CSS Optimization (MEDIUM)
css-lightning- Use Lightning CSS instead of PostCSScss-avoid-preprocessors- Prefer CSS over preprocessors when possiblecss-modules- Use CSS Modules for component stylescss-inline-critical- Extract critical CSS for initial paint
8. Advanced Patterns (LOW-MEDIUM)
advanced-ssr-externalize- Externalize dependencies for SSRadvanced-env-static- Use static environment variablesadvanced-profiling- Profile build performanceadvanced-lib-mode- Configure library mode for package development
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
Reference Files
| File | Description |
|---|---|
| AGENTS.md | Complete compiled guide with all rules |
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
FAQ
What does the vite skill do?
Vite performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Vite configuration and projects to ensure optimal performance patterns. Triggers on tasks involving Vite config, build optimization, dependency pre-bundling, plugin development, bundle analysis, or HMR issues.
How do I install vite?
Run npx skills add https://github.com/pproenca/dot-skills --skill vite in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vite/ (personal) or .claude/skills/vite/ (project).
Which AI agents can use vite?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is vite safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains vite?
It is published by pproenca in pproenca/dot-skills. It has 361 recorded installs.
More from pproenca/dot-skills
zod
pproenca/dot-skills
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
vitest
pproenca/dot-skills
Vitest testing framework patterns for test setup, async testing, mocking with vi., snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
react-hook-form
pproenca/dot-skills
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).
emilkowal-animations
pproenca/dot-skills
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
nuqs
pproenca/dot-skills
nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.
clean-architecture
pproenca/dot-skills
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.