Menu
SkillsMP has collected 22 skills from Impertio-Studio/Vite-Claude-Skill-Package. Open a skill to review its source and details.
Showing 22 of 22 collected skills.
Use when generating a new Vite project from scratch, adding Vite to an existing app, or scaffolding a production-ready Vite setup. Prevents missing vite-env.d.ts, incorrect plugin selection, and incomplete environment variable configuration. Covers…
Use when reviewing Vite configuration, validating a Vite project, checking for common mistakes, or auditing Vite code before deployment. Prevents shipping insecure envPrefix settings, wrong bundler options for the target version, and known anti-patterns.…
Use when creating a new Vite project, understanding Vite internals, or reasoning about dev vs production behavior. Prevents confusing Vite's native ESM dev server with traditional bundler-based dev servers and misunderstanding the two-mode architecture.…
Use when configuring SSR environments, edge workers, custom environments, or migrating to the Vite 6+ environment model. Prevents using the Environment API on Vite 5 (where it does not exist) and misconfiguring per-environment vs shared plugin scoping. Covers…
Use when encountering Vite build failures, chunk size warnings, or version-specific build errors. Prevents the common mistake of using deprecated rollupOptions in v8 or misconfiguring build targets and minifiers. Covers Rolldown/Rollup bundling failures, CSS…
Use when encountering pre-bundling errors, dependency resolution failures, stale cache issues, or slow development server startup. Prevents excluding CJS dependencies from pre-bundling (which breaks runtime module resolution) and misconfiguring optimizeDeps.…
Use when encountering dev server startup failures, HMR issues, proxy errors, CORS blocks, or module not found errors during development. Prevents misconfiguring server.hmr behind reverse proxies and forgetting appType: 'custom' in middleware mode. Covers HMR…
Use when integrating Vite with a backend framework, rendering Vite assets from server-side templates, or setting up dev/production HTML serving. Prevents incorrect manifest.json traversal and missing CSS chunk resolution in production. Covers build.manifest…
Use when using Vite programmatically, building custom dev servers, running builds from scripts, or accessing Vite utilities. Prevents misuse of createServer(), build(), preview() signatures and incorrect ViteDevServer interface usage. Covers createServer(),…
Use when building a library, creating an npm package, configuring UMD/ESM/CJS output, or setting up package.json exports. Prevents bundling peer dependencies into the library or misconfiguring output formats. Covers build.lib configuration, external…
Use when upgrading Vite versions, encountering deprecated APIs, or resolving version-specific breaking changes. Prevents using removed APIs after migration (e.g., rollupOptions in v8, legacy Sass API in v7, esbuild transforms in v8). Covers v5-to-v6 breaking…
Use when configuring dependency pre-bundling, troubleshooting slow dev server starts, handling monorepo dependencies, or forcing cache invalidation. Prevents stale cache issues and missing optimizeDeps.include for dynamically imported dependencies. Covers…
Use when creating a new Vite project, adding Vite to an existing project, or configuring TypeScript and framework plugins. Prevents missing vite-env.d.ts for TypeScript or using wrong tsconfig settings. Covers create-vite scaffolding, CLI commands, TypeScript…
Use when implementing SSR, configuring SSR externals, building SSR applications, or debugging SSR errors. Prevents incorrect SSR externals configuration and missing ssrFixStacktrace() for error debugging. Covers SSR dev workflow with Express middleware,…
Use when importing static assets, using glob imports, configuring the public directory, loading Web Workers, or handling WebAssembly modules. Prevents incorrect query suffix usage, broken new URL() patterns, and misconfigured public directory paths. Covers…
Use when configuring production builds, optimizing output, setting build targets, or configuring chunk splitting. Prevents using wrong bundler config key for the target Vite version (rollupOptions vs rolldownOptions) and misconfiguring minifier or sourcemap…
Use when creating or editing vite.config.ts, setting up project configuration, or configuring shared Vite options. Prevents misconfiguring defineConfig(), forgetting loadEnv() for env-dependent config, and using wrong shared option defaults. Covers…
Use when configuring environment variables, using .env files, creating custom modes, or debugging env variable issues. Prevents exposing secrets by omitting the VITE_ prefix and misconfiguring .env file precedence. Covers import.meta.env built-ins, .env file…
Use when implementing custom HMR handling, debugging HMR issues, writing HMR-aware modules, or understanding why full reloads happen. Prevents missing the import.meta.hot guard (causing production errors), reassigning hot.data instead of mutating it, and…
Use when writing Vite plugins, understanding hook lifecycle, creating virtual modules, or customizing the build pipeline. Prevents incorrect hook ordering (enforce pre/post), missing the virtual module resolved-id prefix convention, and using build-only hooks…
Use when configuring path aliases, CSS modules, CSS preprocessors, PostCSS, Lightning CSS, or module resolution behavior. Prevents resolve.alias misconfiguration breaking imports and CSS preprocessor options not matching the installed preprocessor version.…
Use when configuring the Vite dev server, setting up proxy rules, enabling HTTPS, restricting file system access, or using middleware mode. Prevents exposing the dev server on the network without proper host/CORS settings and misconfiguring proxy rewrite…