Agent skill · software engineering · affaan-m
vite-patterns
Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.
Why this skill is useful
Provides specific Vite configuration patterns and optimization techniques that the AI wouldn't reliably generate on its own.
What it needs
Requires vite installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
Vite パターン Vite 8+ プロジェクトのビルドツールおよびデベロップメントサーバーのパターン。設定、環境変数、プロキシ設定、ライブラリモード、依存関係の事前バンドル、一般的な本番環境の落とし穴をカバー。 使用するタイミング vite.config.ts または vite.config.js を設定するとき 環境変数または .env ファイルを設定するとき APIバックエンド用のデベロップメントサーバープロキシを設定するとき ビルド出力（チャンク、ミニファイ、アセット）を最適化するとき build.lib でライブラリを公開するとき 依存関係の事前バンドルまたはCJS/ESM相互運用のトラブルシューティングをするとき HMR、デベロップメントサーバー、またはビルドエラーをデバッグするとき Viteプラグインの選択または順序付けをするとき 動作の仕組み デベロップメントモードはソースファイルをネイティブESMとして提供します（バンドルなし）。変換はモジュールリクエストごとにオンデマンドで行われるため、コールドスタートが速くHMRが精確です。 ビルドモードはRolldown（v7+）またはRollup（v5〜v6）を使用して、ツリーシェイキング、コード分割、Oxcベースのミニファイでアプリを本番用にバンドルします。 依存関係の事前バンドルはesbuildを通じてCJS/UMD依存関係をESMに一度変換し、結果を nodemodules/.vite にキャッシュします。これにより後続の起動では処理をスキップできます。 プラグインはデベロップメントとビルドにわたって統一されたインターフェースを共有します。同じプラグインオブジェクトが、デベロップメントサーバーのオンデマンド変換と本番パイプラインの両方で機能します。 環境変数はビルド時に静的にインライン化されます。VITE プレフィックス付きの変数はバンドル内のパブリック定数になり、プレフィックスなしのものはクライアントコードから見えません。 例 設定の構造 基本設定 条件付き設定 主要な設定オプション キー デフォルト 説明 ----- --------- ------------- root '.' プロジェクトルート（index.html の場所） base '/' デプロイされたアセットのパブリックベースパス envPrefix 'VITE' クライアントに公開する環境変数のプレフィックス build.outDir 'dist' 出力ディレクトリ build.minify 'oxc' ミニファイアー（'oxc'、'terser'、または false） build.sourcemap false true、'inline'、または 'hidden' プラグイン 必須プラグイン ほとんどのプラグインのニーズは、少数のよく管理されたパッケージでカバーできます。独自のプラグインを作成する前にこれらを検討してください。 プラグイン 目的 使用タイミング -------- --------- ------------- @vitejs/plugin-react-swc SWC経由のReact HMR + Fast Refresh Reactアプリのデフォルト（Babelバリアントより高速） @vitejs/plugin-react Babel経由のReact HMR + Fast Refresh Babelプラグインが必要な場合のみ（emotion、MobXデコレーター） @vitejs/plugin-vue Vue 3 SFCサポート Vueアプリ vite-plugin-checker ワーカースレッドでHMRオーバーレイ付きの tsc + ESLintを実行 TypeScriptアプリ全般 — Viteは vite build 中に型チェックを行いません vite-tsconfig-paths tsconfig.json の paths エイリアスを尊重 tsconfig.json にエイリアスが既にある場合 vite-plugin-dts ライブラリモードで .d.ts ファイルを出力 TypeScriptライブラリを公開するとき vite-plugin-svgr SVGをReactコンポーネントとしてインポート SVGをコンポーネントとして使用するReactアプリ rollup-plugin-visualizer バンドルのツリーマップ/サンバーストレポート 定期的なバンドルサイズの監査（enforce: 'post' を使用） vite-plugin-pwa ゼロ設定のPWA + Workbox オフライン対応アプリ 重要な注意： vite build はトランスパイルし …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/vite-patterns--49c388