Skip to main content
affpapa.org
RU EN
skill CX Codex

vite · pproenca — Claude Code skill: what it does, how to install

A performance optimization guide with 42 Vite rules. Helps your AI agent audit configs, optimize bundles, and fix slow dev servers.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add pproenca/dot-skills --skill vite -a claude-code
Open on GitHub

What vite does

The skill injects an optimization manual for Vite directly into the assistant prompt. It features 42 rules organized across eight priority levels. The highest priority covers dependency pre-bundling, plugin efficiency, and bundle chunking. Lower tiers address imports, build settings, local server tuning, CSS, and SSR patterns.

Instead of generic tips, the rules contain concrete configuration choices. The guide advises SWC over Babel for React, points to Lightning CSS over PostCSS, and outlines when to skip barrel files. It also covers manualChunks setups and module discovery entry points.

Dev server performance suffers quickly on Linux or WSL if file descriptor limits or watch watchers fail. The skill provides explicit workarounds for these environments, including polling options and server warmup configurations.

What it helps with

  • split vendor code using manualChunks
  • fix slow dev server startup and HMR bottlenecks
  • replace heavy barrel files with direct imports
  • tune dependency pre-bundling for monorepos

Example prompts for the agent

  • Review my vite.config.ts and set up vendor chunk splitting.
  • The dev server starts slowly in WSL. Help me configure warmup and file polling.
  • Audit my Vite plugins and suggest faster alternatives like SWC.

How to install vite

1Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill vite -a claude-code

2Manually: put the files in place

~/.claude/skills/vite/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vite/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vite

How to install vite in Claude Code?

Run npx skills add pproenca/dot-skills --skill vite -a claude-code. The skill file will be placed in ~/.claude/skills/vite/SKILL.md.

What does the vite skill do?

It provides your coding assistant with 42 structured rules to refactor Vite configurations, reduce bundle size, and debug HMR delays.

Which optimization areas have the highest priority in this skill?

The guide marks three categories as critical: dependency pre-bundling, plugin performance, and bundle optimization.

Source text

SKILL.md · MIT 
---
name: vite
description: 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.
---

# 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`](references/deps-include-large-cjs.md) - Include large dependencies with many modules
- [`deps-exclude-esm`](references/deps-exclude-esm.md) - Exclude small ESM dependencies
- [`deps-force-rebundle`](references/deps-force-rebundle.md) - Use --force flag for dependency changes
- [`deps-hold-until-crawl`](references/deps-hold-until-crawl.md) - Configure holdUntilCrawlEnd for startup behavior
- [`deps-entries`](references/deps-entries.md) - Configure custom entry points for discovery
- [`deps-linked-packages`](references/deps-linked-packages.md) - Handle linked dependencies in monorepos

### 2. Plugin Performance (CRITICAL)

- [`plugin-lazy-imports`](references/plugin-lazy-imports.md) - Use dynamic imports in plugin code
- [`plugin-avoid-long-hooks`](references/plugin-avoid-long-hooks.md) - Avoid long operations in startup hooks
- [`plugin-transform-early-return`](references/plugin-transform-early-return.md) - Early return in transform hooks
- [`plugin-audit-community`](references/plugin-audit-community.md) - Audit community plugins for performance
- [`plugin-swc-over-babel`](references/plugin-swc-over-babel.md) - Use SWC instead of Babel for React

### 3. Bundle Optimization (CRITICAL)

- [`bundle-manual-chunks`](references/bundle-manual-chunks.md) - Use manualChunks for vendor splitting
- [`bundle-dynamic-imports`](references/bundle-dynamic-imports.md) - Use dynamic imports for route-level splitting
- [`bundle-analyze`](references/bundle-analyze.md) - Analyze bundle composition
- [`bundle-tree-shaking`](references/bundle-tree-shaking.md) - Enable effective tree-shaking
- [`bundle-chunk-warning`](references/bundle-chunk-warning.md) - Address large chunk warnings
- [`bundle-compression`](references/bundle-compression.md) - Disable compressed size reporting for large projects
- [`bundle-asset-inlining`](references/bundle-asset-inlining.md) - Configure asset inlining threshold

### 4. Import Resolution (HIGH)

- [`import-avoid-barrel`](references/import-avoid-barrel.md) - Avoid barrel file imports
- [`import-explicit-extensions`](references/import-explicit-extensions.md) - Use explicit file extensions
- [`import-path-aliases`](references/import-path-aliases.md) - Configure path aliases for clean imports
- [`import-svg-strings`](references/import-svg-strings.md) - Import SVGs as strings instead of components
- [`import-glob-patterns`](references/import-glob-patterns.md) - Use glob imports carefully

### 5. Build Configuration (HIGH)

- [`build-modern-target`](references/build-modern-target.md) - Target modern browsers
- [`build-minification`](references/build-minification.md) - Use esbuild for minification
- [`build-sourcemaps`](references/build-sourcemaps.md) - Disable source maps in production
- [`build-css-code-split`](references/build-css-code-split.md) - Enable CSS code splitting
- [`build-rolldown`](references/build-rolldown.md) - Consider Rolldown for faster builds
- [`build-output-dir`](references/build-output-dir.md) - Configure output directory and caching

### 6. Development Server (MEDIUM-HIGH)

- [`dev-server-warmup`](references/dev-server-warmup.md) - Warm up frequently used files
- [`dev-browser-cache`](references/dev-browser-cache.md) - Keep browser cache enabled in DevTools
- [`dev-fs-limits`](references/dev-fs-limits.md) - Increase file descriptor limits on Linux
- [`dev-wsl-polling`](references/dev-wsl-polling.md) - Use polling for WSL file watching
- [`dev-https-proxy`](references/dev-https-proxy.md) - Configure HTTPS and proxy for development

### 7. CSS Optimization (MEDIUM)

- [`css-lightning`](references/css-lightning.md) - Use Lightning CSS instead of PostCSS
- [`css-avoid-preprocessors`](references/css-avoid-preprocessors.md) - Prefer CSS over preprocessors when possible
- [`css-modules`](references/css-modules.md) - Use CSS Modules for component styles
- [`css-inline-critical`](references/css-inline-critical.md) - Extract critical CSS for initial paint

### 8. Advanced Patterns (LOW-MEDIUM)

- [`advanced-ssr-externalize`](references/advanced-ssr-externalize.md) - Externalize dependencies for SSR
- [`advanced-env-static`](references/advanced-env-static.md) - Use static environment variables
- [`advanced-profiling`](references/advanced-profiling.md) - Profile build performance
- [`advanced-lib-mode`](references/advanced-lib-mode.md) - Configure library mode for package development

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules

## Reference Files

| File | Description |
|------|-------------|
| [AGENTS.md](AGENTS.md) | Complete compiled guide with all rules |
| [references/_sections.md](references/_sections.md) | Category definitions and ordering |
| [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules |
| [metadata.json](metadata.json) | Version and reference information |

© pproenca · MIT · pproenca/dot-skills

Similar skills

Everything for Frontend and UI →

vite by other authors comes first.

vite Anthony Fu This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. Use it with vite.config.ts work. CX Codex +1 39,900installs vite Anthony Fu A Vite 6.x skill that walks your agent through config files, plugin setup, the dev server and production builds. CX Codex +1 747installs vite Mindrally Supplies your coding agent with vetted Vite recipes for HMR, chunk splitting, framework plugins, and Vitest setups. CX Codex +1 820installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set55

react-optimise A skill that walks through React app performance: React Compiler, bundle size, rendering, data fetching, Core Web Vitals. Useful when your app feels slow. CX Codex +1 396installs knip-deadcode A set of 43 rules for configuring Knip in JavaScript and TypeScript projects. It helps spot dead code, trim unused dependencies, and wire checks into CI. CX Codex +1 378installs rails-hotwire A skill with Hotwire rules for Rails: Turbo Drive, Frames, Streams, Turbo 8 morphing and Stimulus controllers. Useful when writing or refactoring interactive pages. CX Codex +1 370installs ts-google Google TypeScript style guide containing 45 prioritized rules for AI agents. Guides code generation and refactoring according to strict typing standards. CX Codex +1 370installs nginx-c-module-design A skill for anyone writing nginx C modules: it helps you decide what to expose as directives, how to name them and where they belong. Most useful while the module's config interface is still being shaped. CX Codex +1 352installs nginx-c-modules A skill that feeds your agent 49 rules for nginx C module work: pool memory, request lifecycle, config merging. Useful when you write or refactor a handler, filter or upstream. CX Codex +1 349installs dockerfile-optimise A skill with 48 rules from official Docker docs: layer caching, multi-stage builds, security. Useful when writing or refactoring Dockerfiles. CX Codex +1 344installs uniwind A skill with 45+ rules for Uniwind, the Tailwind bindings for React Native. Useful when setting up a project, building themes or migrating from NativeWind. CX Codex +1 341installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor