菜单
Vite — next-generation frontend build tool with instant dev server and optimized production builds. Use when building with Vite or asking about its APIs, configuration, plugins, SSR, environment variables, or integration with frameworks. Fetch live documentation for up-to-date details.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Principles and a linter for writing code that AI coding agents can read and modify correctly. Use when writing, refactoring, reviewing, or structuring code that will be maintained partly by AI agents (Claude Code, Cursor, Copilot, Aider, Devin). Also use when the user asks about agent-friendly code, AI-friendly architecture, how to structure a repo for AI maintenance, why agents fail on certain codebases, whether SOLID/DRY still apply with AI, or wants to audit an existing codebase for AI-readability. Applies proactively when making naming, file-organization, abstraction, or dependency choices in code the user is likely to maintain with agents — even if they don't explicitly ask for agent-friendly output. Ships with a zero-dependency linter (scripts/lint.py) that flags concrete anti-patterns.
Better Auth — framework-agnostic authentication and authorization framework for TypeScript. Use when building with Better Auth or asking about its APIs, configuration, plugins, session management, OAuth, or integration. Fetch live documentation for up-to-date details.
BullMQ — Redis-based distributed job and message queue for Node.js with workers, schedulers, flows, and rate limiting. Use when building with BullMQ or asking about its queues, workers, job configuration, repeatable jobs, flow producers, or Redis connection setup. Fetch live documentation for up-to-date details.
Bun — fast all-in-one JavaScript/TypeScript runtime, package manager, bundler, and test runner. Use when building with Bun, running TypeScript, managing packages with bun install, writing tests with bun test, or asking about Bun APIs, configuration, or Node.js migration. Fetch live documentation for up-to-date API details.
Drizzle ORM — lightweight, TypeScript-first SQL ORM with schema-as-code and zero-dependency query builder. Use when building with Drizzle ORM or asking about its schema definition, migrations, query builder, relations, or integration with databases like PostgreSQL, MySQL, or SQLite. Fetch live documentation for up-to-date details.
Elysia — Bun-native web framework with end-to-end type safety and Eden Treaty typed client. Use when building with Elysia or asking about its routing, plugins, lifecycle hooks, validation, Eden Treaty, WebSocket, SSE, or integration with Bun. Fetch live documentation for up-to-date details.
| name | vite |
| description | Vite — next-generation frontend build tool with instant dev server and optimized production builds. Use when building with Vite or asking about its APIs, configuration, plugins, SSR, environment variables, or integration with frameworks. Fetch live documentation for up-to-date details. |
CRITICAL: Your training data for Vite is unreliable. APIs change between versions and memorized patterns may be wrong or deprecated. Before writing any code, you MUST use
WebFetchto read the live docs:
WebFetch("https://vite.dev/llms.txt")Do not proceed without fetching this URL first. Never assume a config option or plugin API exists — verify against current docs.
Vite is a frontend build tool that serves source files via native ES modules during development and uses Rollup for optimized production builds.
Vite has several built-in features developers commonly add external packages for:
ts-loader or babel-preset-typescript needed. Note: Vite only transpiles, it does not type-check; run tsc --noEmit separately.*.module.css is automatically a CSS module returning a scoped object — no extra plugin needed..scss, .sass, .less, .styl work out of the box — just npm install the preprocessor itself, no Vite plugin required.import { version } from './package.json' works and is tree-shaken — no need for a JSON loader plugin.import.meta.glob('./dir/*.js') handles dynamic multi-module imports natively — no require.context workaround needed.new Worker(new URL('./worker.js', import.meta.url)) syntax is supported natively alongside the ?worker query suffix.?url, ?raw, ?inline change how assets are imported — no file-loader/url-loader equivalents needed..env file loading with import.meta.env — no dotenv-webpack or similar needed.VITE_ prefix is required for client exposure. Only variables prefixed with VITE_ are exposed to client code via import.meta.env. Variables without this prefix are intentionally hidden to prevent secrets from leaking into the browser bundle. Coming from webpack's DefinePlugin, this is the single most common missed step.
Env variables are always strings. import.meta.env.VITE_PORT is "3000" not 3000. Cast explicitly: Number(import.meta.env.VITE_PORT) or import.meta.env.VITE_FLAG === 'true'.
.env changes require a server restart. Vite reads .env files at startup — modifying them does not trigger HMR. Many developers waste time waiting for a reload that never comes.
NODE_ENV and --mode are independent. Running vite build --mode staging still sets NODE_ENV=production. To change NODE_ENV, set it as a shell variable: NODE_ENV=development vite build.