Help us improve
Share bugs, ideas, or general feedback.
From frontend-craft
Configures, reviews, and debugs Vite-based frontend projects including vite.config, env variables, proxy, HMR, plugin ordering, library mode, pre-bundling, bundle splitting, and build performance.
npx claudepluginhub bovinphang/frontend-craft --plugin frontend-craftHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-craft:fec-vite-project-standardThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
适用于 Vite 应用、组件库、开发服务器和构建配置的设计与审查。
Provides Vite patterns for config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Use for vite.config.ts, Vite plugins, or Vite projects.
Configures Vite build tool, plugin API, SSR, and Vite 8 Rolldown migration. Auto-activates when working with vite.config.ts, Vite plugins, or building SSR apps.
Provides React 18+ patterns with Vite bundler, TypeScript, hooks, component design, and state management including Zustand and React Query for frontend development.
Share bugs, ideas, or general feedback.
适用于 Vite 应用、组件库、开发服务器和构建配置的设计与审查。
规范 Vite 配置、安全边界和构建性能,避免开发环境与生产构建的常见陷阱。
识别项目类型
root、base、server.proxy、envPrefix、build 和框架插件。build.lib、类型产物、peer dependencies external 和导出入口。server.fs.allow、路径别名和包依赖边界。选择插件
@vitejs/plugin-react-swc;需要 Babel 插件时才用 @vitejs/plugin-react。@vitejs/plugin-vue,路径别名优先交给 vite-tsconfig-paths。tsc --noEmit、CI 或 vite-plugin-checker 补齐类型检查。管理环境变量
VITE_。loadEnv 第三个参数使用显式前缀数组,不使用空字符串加载全部变量。优化开发体验
vite --profile 定位插件、解析或预构建瓶颈。optimizeDeps.include 处理互操作问题。server.warmup.clientFiles 预热核心入口。优化生产构建
vite build,并用 vite preview 做本地构建烟测。import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), ["VITE_"]);
return {
plugins: [react(), tsconfigPaths()],
define: {
__PUBLIC_API_URL__: JSON.stringify(env.VITE_API_URL),
},
server: {
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
},
},
},
};
});
vite build 只转译和打包,不等于类型检查;CI 必须另跑 typecheck。VITE_ 不是安全边界;任何 VITE_ 变量都会进入客户端包。envPrefix: "",不使用 loadEnv(mode, root, "") 后再随意 define。vite preview 作为生产服务器。.d.ts。define、import.meta.env 或空前缀 loadEnv 注入客户端。输出应包含项目类型判断、关键配置变更、环境变量安全说明、构建/开发性能验证方式。完成后 Vite 配置应可类型检查、可构建、密钥不泄露,并能解释 dev 与 build 的差异。