skills.rest
avel123111
avel123111COMMUNITY
Explore all skills by this author →
GitHub

ecc-vite-patterns

Configure Vite build tooling, plugins, HMR, proxies, and production optimization patterns.

Updated May 26, 2026
Search Tags:#frontend#configuration#plugins#vite#bundling#build tool#hmr
One-click install
npx skills add https://github.com/avel123111/triplanio --skill ecc-vite-patterns-avel123111
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ecc-vite-patterns
Source: https://github.com/avel123111/triplanio/tree/main/.claude/skills/ecc-vite-patterns
Command: npx skills add https://github.com/avel123111/triplanio --skill ecc-vite-patterns-avel123111

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Vite projects often suffer from misconfigured environments, leaked secrets via VITE_ variables, slow dev servers, missing type checks in builds, and production pitfalls like stale chunks or broken SSR externals. This Skill provides proven configuration patterns and anti-patterns to avoid these issues. ## Core Features & Use Cases - Configuration Patterns: Covers defineConfig, conditional configs, loadEnv usage, path aliases, and key build options for Vite 8+ projects. - Plugin Guidance: Recommends essential plugins like vite-plugin-checker and vite-tsconfig-paths, plus patterns for authoring custom plugins with hooks and virtual modules. - Security & Performance: Explains VITE_ prefix exposure risks, source map handling, barrel file avoidance, import extension explicitness, and dev server profiling with vite --profile. - Use Case: When setting up a React + Vite app that proxies API requests to a backend, use this Skill to configure server.proxy correctly, externalize peer deps in library mode, and avoid shipping type errors by adding vite-plugin-checker. ## Quick Start Ask the AI to review your vite.config.ts and apply Vite best practices for environment variables, proxy setup, and build optimization.

Frequently Asked Questions about ecc-vite-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure environment variables in Vite?▼

Use loadEnv in vite.config.ts with an explicit prefix list like ['VITE_'] to access env vars safely. Only VITE_-prefixed variables are exposed to client code via import.meta.env, and they are statically inlined at build time.

How do I set up a dev server proxy in Vite?▼

Configure server.proxy in vite.config.ts with a target URL, changeOrigin for virtual-hosted backends, and a rewrite function to strip path prefixes. Add ws: true for WebSocket proxying.

Does vite build type-check TypeScript code?▼

No, vite build only transpiles and does not type-check, so type errors silently ship to production. Add vite-plugin-checker or run tsc --noEmit in CI to catch type errors.

Are VITE_ environment variables secure for secrets?▼

No, VITE_-prefixed variables are statically inlined into the client bundle and can be extracted by anyone. Only put public values like API URLs and feature flags in VITE_ vars; keep secrets server-side.

Why is my Vite dev server slow?▼

Common causes include barrel files forcing full directory loads, implicit import extensions triggering extra filesystem checks, and slow plugin hooks. Run vite --profile and inspect the .cpuprofile in Speedscope to find the bottleneck.

How do I publish a library with Vite library mode?▼

Use build.lib with your entry and formats, and externalize all peer dependencies via rolldownOptions.external to avoid duplicate runtime errors. Add vite-plugin-dts or tsc --emitDeclarationOnly since types are not emitted automatically.

Related Skills

Explore More Software Engineering Skills→
ShenQingchuanShenQingchuan
5

vite

Configure Vite dev servers, plugins, and production builds for frontend projects.

Community
Intermediate
yoanbernabeuyoanbernabeu
34

slidev-deployment

Deploy Slidev presentations to GitHub Pages, Netlify, Vercel, or Docker.

Community
Advanced
theslashdojotheslashdojo

source-maps

Upload source maps to Sentry via build plugins or sentry-cli.

Official
Advanced
ChristineThamChristineTham

netlify-frameworks

Deploy Astro, Next.js, Nuxt, SvelteKit, and other frameworks to Netlify via adapters.

Community
Intermediate