vite

Name: vite
Author: pproenca

github.com/pproencaDevelopment220366 installsUpdated 11w ago

About vite

A Vite performance guide for developers configuring, troubleshooting, or optimizing Vite applications. Its 42 prioritized rules cover development, builds, plugins, and CSS.

Key features

0142 rules across eight categories
02Prioritizes guidance by impact
03Covers dependency pre-bundling and plugins
04Addresses bundles, imports, and build settings
05Includes development server and CSS guidance

Use cases

01Set up Vite for a new project
02Investigate slow development server startup
03Reduce production bundle size
04Debug HMR or assess Vite plugins

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/pproenca/dot-skills --skill vite

After installing, type/vitein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

AGENTS.md

metadata.json

README.md

assets/templates/

_template.md

references/

_sections.md

advanced-env-static.md

advanced-lib-mode.md

advanced-profiling.md

advanced-ssr-externalize.md

build-css-code-split.md

build-minification.md

build-modern-target.md

build-output-dir.md

build-rolldown.md

build-sourcemaps.md

bundle-analyze.md

bundle-asset-inlining.md

bundle-chunk-warning.md

bundle-compression.md

bundle-dynamic-imports.md

bundle-manual-chunks.md

bundle-tree-shaking.md

css-avoid-preprocessors.md

css-inline-critical.md

css-lightning.md

css-modules.md

deps-entries.md

deps-exclude-esm.md

deps-force-rebundle.md

deps-hold-until-crawl.md

Details

From the project README

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 modules
deps-exclude-esm - Exclude small ESM dependencies
deps-force-rebundle - Use --force flag for dependency changes
deps-hold-until-crawl - Configure holdUntilCrawlEnd for startup behavior
deps-entries - Configure custom entry points for discovery
deps-linked-packages - Handle linked dependencies in monorepos

2. Plugin Performance (CRITICAL)

plugin-lazy-imports - Use dynamic imports in plugin code
plugin-avoid-long-hooks - Avoid long operations in startup hooks
plugin-transform-early-return - Early return in transform hooks
plugin-audit-community - Audit community plugins for performance
plugin-swc-over-babel - Use SWC instead of Babel for React

3. Bundle Optimization (CRITICAL)

bundle-manual-chunks - Use manualChunks for vendor splitting
bundle-dynamic-imports - Use dynamic imports for route-level splitting
bundle-analyze - Analyze bundle composition
bundle-tree-shaking - Enable effective tree-shaking
bundle-chunk-warning - Address large chunk warnings
bundle-compression - Disable compressed size reporting for large projects
bundle-asset-inlining - Configure asset inlining threshold

4. Import Resolution (HIGH)

import-avoid-barrel - Avoid barrel file imports
import-explicit-extensions - Use explicit file extensions
import-path-aliases - Configure path aliases for clean imports
import-svg-strings - Import SVGs as strings instead of components
import-glob-patterns - Use glob imports carefully

5. Build Configuration (HIGH)

build-modern-target - Target modern browsers
build-minification - Use esbuild for minification
build-sourcemaps - Disable source maps in production
build-css-code-split - Enable CSS code splitting
build-rolldown - Consider Rolldown for faster builds
build-output-dir - Configure output directory and caching

6. Development Server (MEDIUM-HIGH)

dev-server-warmup - Warm up frequently used files
dev-browser-cache - Keep browser cache enabled in DevTools
dev-fs-limits - Increase file descriptor limits on Linux
dev-wsl-polling - Use polling for WSL file watching
dev-https-proxy - Configure HTTPS and proxy for development

7. CSS Optimization (MEDIUM)

css-lightning - Use Lightning CSS instead of PostCSS
css-avoid-preprocessors - Prefer CSS over preprocessors when possible
css-modules - Use CSS Modules for component styles
css-inline-critical - Extract critical CSS for initial paint

8. Advanced Patterns (LOW-MEDIUM)

advanced-ssr-externalize - Externalize dependencies for SSR
advanced-env-static - Use static environment variables
advanced-profiling - Profile build performance
advanced-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

Comments

Markdown supported

Details

Author: pproenca
Repository: pproenca/dot-skills
Category: Development
Installs: 366
GitHub stars: 220

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.2M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

863.8k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.