@bovinphang/frontend-craft 2.5.0

package/skills/fec-ui-design/scripts/design-system.mjs

@@ -0,0 +1,530 @@
+#!/usr/bin/env node
+// @ts-check
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * @typedef {{
+ *   id: string;
+ *   label?: string;
+ *   keywords: string[];
+ *   pattern?: string;
+ *   patterns?: string[];
+ *   risks: string[];
+ *   style?: string;
+ *   space?: string;
+ *   components?: string[];
+ *   motion: string;
+ *   antiPatterns: string[];
+ * }} ProductRule
+ *
+ * @typedef {{
+ *   id: string;
+ *   label?: string;
+ *   keywords: string[];
+ *   usage?: string;
+ *   description?: string;
+ *   risks?: string[];
+ *   avoid?: string[];
+ *   antiPatterns?: string[];
+ *   tokens?: { density?: string };
+ * }} StyleArchetype
+ *
+ * @typedef {{
+ *   id?: string;
+ *   category?: string;
+ *   label?: string;
+ *   checks: string[];
+ * }} UxQualityRule
+ *
+ * @typedef {{
+ *   stack: string;
+ *   label?: string;
+ *   keywords: string[];
+ *   guidance: string[];
+ * }} StackRule
+ *
+ * @typedef {{
+ *   queryParts: string[];
+ *   query: string;
+ *   format: "markdown" | "json";
+ *   project: string;
+ *   page: string;
+ *   stack: string;
+ *   persist: boolean;
+ *   outputDir: string;
+ *   help: boolean;
+ * }} CliArgs
+ *
+ * @typedef {{
+ *   id: string;
+ *   label: string;
+ *   checks: string[];
+ * }} ChecklistGroup
+ *
+ * @typedef {{
+ *   project: string;
+ *   page: string;
+ *   query: string;
+ *   product: { id: string; label: string; pattern: string; risks: string[] };
+ *   style: { id: string; label: string; usage: string | undefined; risks: string[] };
+ *   tokens: { color: string; typography: string; space: string; components: string[] };
+ *   motion: string;
+ *   chart: string;
+ *   antiPatterns: string[];
+ *   checklist: ChecklistGroup[];
+ *   stackGuidance: StackRule | null;
+ * }} Recommendation
+ */
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const skillDir = path.resolve(__dirname, "..");
+const dataDir = path.join(skillDir, "data");
+
+const productRules = /** @type {ProductRule[]} */ (readJson("product-rules.json"));
+const styleArchetypes = /** @type {StyleArchetype[]} */ (readJson("style-archetypes.json"));
+const uxQualityRules = /** @type {UxQualityRule[]} */ (readJson("ux-quality-rules.json"));
+const stackRules = /** @type {StackRule[]} */ (readJson("stack-ui-rules.json"));
+
+/** @type {Record<string, string>} */
+const colorDirections = {
+  saas: "Neutral surfaces with a restrained trust accent, semantic status colors, and one operational highlight.",
+  fintech: "Ink, graphite, and calm blue-green tokens with explicit success, risk, warning, and pending states.",
+  healthcare: "Clean neutrals with soft clinical blues or greens, high contrast text, and sparing reassurance accents.",
+  ecommerce: "Product-led neutrals, one conversion accent, clear price/status colors, and image-friendly backgrounds.",
+  creative: "Flexible neutrals with a bolder accent system, gallery-safe surfaces, and controlled expressive moments.",
+  wellness: "Warm off-white surfaces, botanical or mineral accents, calm confirmation colors, and low-glare contrast.",
+  education: "Readable neutrals, progress color coding, friendly accents, and clear feedback colors.",
+  gaming: "High-contrast surfaces, faction or mode accents, explicit danger/reward colors, and readable HUD tokens.",
+  "data-dashboard": "Dense neutrals, chart-safe categorical palettes, alert colors with severity order, and subdued chrome.",
+};
+
+/** @type {Record<string, string>} */
+const typographyDirections = {
+  saas: "Use a workhorse sans for UI text, tabular numerals for metrics, and compact headings for scan speed.",
+  fintech: "Use a precise sans with tabular numerals, conservative weights, and generous numeric spacing.",
+  healthcare: "Use a highly legible sans, moderate line height, and calm heading contrast.",
+  ecommerce: "Use readable product text, stronger merchandising headings, and stable price typography.",
+  creative: "Pair a characterful display face with a reliable UI sans if the brand can support it.",
+  wellness: "Use a soft humanist sans or restrained serif accent, with relaxed line height and readable controls.",
+  education: "Use friendly readable type, clear hierarchy, and progress labels that survive small screens.",
+  gaming: "Use expressive display only for short labels; keep gameplay, settings, and HUD text fast to parse.",
+  "data-dashboard": "Use compact UI type, tabular numerals, and strict alignment for tables and charts.",
+};
+
+/** @type {Record<string, string>} */
+const chartDirections = {
+  saas: "Prefer KPI trends, cohort funnels, and status breakdowns with clear comparison periods.",
+  fintech: "Use time-series, allocation, variance, and risk bands; disclose units and stale data states.",
+  healthcare: "Use trends and thresholds carefully, avoid alarmist color, and keep clinical context beside charts.",
+  ecommerce: "Use conversion funnels, product comparison, inventory status, and revenue trends.",
+  creative: "Use portfolio analytics sparingly; prioritize visual inspection before metrics.",
+  wellness: "Use booking, occupancy, habit, or progress views with gentle pacing and clear privacy boundaries.",
+  education: "Use progress, completion, mastery, and assignment timelines with learner-friendly labels.",
+  gaming: "Use leaderboards, loadouts, skill trees, and telemetry only when they support player decisions.",
+  "data-dashboard": "Choose chart type by task: trend, compare, compose, distribute, correlate, or inspect anomalies.",
+};
+
+/**
+ * @param {string} fileName
+ * @returns {unknown}
+ */
+function readJson(fileName) {
+  return JSON.parse(fs.readFileSync(path.join(dataDir, fileName), "utf8"));
+}
+
+function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help || !args.query) {
+    printUsage(args.help ? 0 : 1);
+    return;
+  }
+
+  const recommendation = buildRecommendation(args);
+  const output = args.format === "json" ? `${JSON.stringify(recommendation, null, 2)}\n` : renderMarkdown(recommendation);
+
+  if (args.persist) persistRecommendation(recommendation, args);
+
+  process.stdout.write(output);
+}
+
+/**
+ * @param {string[]} argv
+ * @returns {CliArgs}
+ */
+function parseArgs(argv) {
+  /** @type {CliArgs} */
+  const result = {
+    queryParts: [],
+    query: "",
+    format: "markdown",
+    project: "",
+    page: "",
+    stack: "",
+    persist: false,
+    outputDir: process.cwd(),
+    help: false,
+  };
+
+  for (let index = 0; index < argv.length; index += 1) {
+    const token = argv[index];
+    if (token === "--help" || token === "-h") result.help = true;
+    else if (token === "--persist") result.persist = true;
+    else if (token === "--format") {
+      const format = requireValue(argv, ++index, "--format");
+      if (format !== "markdown" && format !== "json") {
+        throw new Error(`Unsupported --format "${format}". Use markdown or json.`);
+      }
+      result.format = format;
+    }
+    else if (token === "--project") result.project = requireValue(argv, ++index, "--project");
+    else if (token === "--page") result.page = requireValue(argv, ++index, "--page");
+    else if (token === "--stack") result.stack = requireValue(argv, ++index, "--stack");
+    else if (token === "--output-dir") result.outputDir = requireValue(argv, ++index, "--output-dir");
+    else result.queryParts.push(token);
+  }
+
+  result.query = result.queryParts.join(" ").trim();
+  return result;
+}
+
+/**
+ * @param {string[]} argv
+ * @param {number} index
+ * @param {string} flag
+ * @returns {string}
+ */
+function requireValue(argv, index, flag) {
+  const value = argv[index];
+  if (!value || value.startsWith("--")) throw new Error(`Missing value for ${flag}`);
+  return value;
+}
+
+/**
+ * @param {number} exitCode
+ * @returns {void}
+ */
+function printUsage(exitCode) {
+  const usage = [
+    'Usage: node skills/fec-ui-design/scripts/design-system.mjs "<query>" [options]',
+    "",
+    "Options:",
+    "  --format markdown|json",
+    "  --project <name>",
+    "  --page <name>",
+    "  --stack <stack>",
+    "  --persist --output-dir <dir>",
+    "",
+  ].join("\n");
+  process.stderr.write(usage);
+  process.exitCode = exitCode;
+}
+
+/**
+ * @param {CliArgs} args
+ * @returns {Recommendation}
+ */
+function buildRecommendation(args) {
+  const query = args.query;
+  const tokens = tokenize([query, args.project, args.page, args.stack].filter(Boolean).join(" "));
+  const product = chooseProduct(tokens);
+  const style = chooseStyle(tokens, product);
+  const checklist = chooseChecklist(tokens, product);
+  const stackGuidance = chooseStack(args.stack, tokens);
+  const pattern = product.pattern ?? product.patterns?.[0] ?? "Task-first interface with explicit states and durable visual hierarchy";
+
+  return {
+    project: args.project || titleCase(query),
+    page: args.page || "",
+    query,
+    product: {
+      id: product.id,
+      label: product.label ?? labelFromId(product.id),
+      pattern,
+      risks: product.risks,
+    },
+    style: {
+      id: style.id,
+      label: style.label ?? labelFromId(style.id),
+      usage: style.usage ?? style.description,
+      risks: style.risks ?? style.avoid ?? [],
+    },
+    tokens: {
+      color: colorDirections[product.id] ?? colorDirections.saas,
+      typography: typographyDirections[product.id] ?? typographyDirections.saas,
+      space: product.space ?? style.tokens?.density ?? "Match task density to user scan depth and touch requirements.",
+      components: product.components ?? ["Use existing components before adding new primitives", "Tokenize repeated spacing, color, radius, and state choices"],
+    },
+    motion: product.motion,
+    chart: chartDirections[product.id] ?? chartDirections["data-dashboard"],
+    antiPatterns: unique([...product.antiPatterns, ...(style.antiPatterns ?? style.avoid ?? [])]).slice(0, 8),
+    checklist,
+    stackGuidance,
+  };
+}
+
+/**
+ * @param {Set<string>} tokens
+ * @returns {ProductRule}
+ */
+function chooseProduct(tokens) {
+  let best = productRules[0];
+  let bestScore = -1;
+
+  for (const product of productRules) {
+    const keywordScore = score(tokens, [...product.keywords, product.id, product.label ?? ""]);
+    const intentScore = tokens.has(slug(product.pattern)) ? 1 : 0;
+    const total = keywordScore + intentScore;
+    if (total > bestScore) {
+      best = product;
+      bestScore = total;
+    }
+  }
+
+  return best;
+}
+
+/**
+ * @param {Set<string>} tokens
+ * @param {ProductRule} product
+ * @returns {StyleArchetype}
+ */
+function chooseStyle(tokens, product) {
+  const preferred = styleArchetypes.find((style) => style.id === product.style);
+  let best = preferred ?? styleArchetypes[0];
+  let bestScore = preferred ? 1 : 0;
+
+  for (const style of styleArchetypes) {
+    const total = score(tokens, [style.id, style.label, ...style.keywords]);
+    if (total > bestScore) {
+      best = style;
+      bestScore = total;
+    }
+  }
+
+  return best;
+}
+
+/**
+ * @param {Set<string>} tokens
+ * @param {ProductRule} product
+ * @returns {ChecklistGroup[]}
+ */
+function chooseChecklist(tokens, product) {
+  const priority = new Set(["accessibility", "interaction", "layout", "typography", "animation"]);
+  if (product.id === "data-dashboard" || tokens.has("dashboard") || tokens.has("chart")) priority.add("charts");
+  if (tokens.has("form") || tokens.has("booking") || tokens.has("checkout")) priority.add("forms");
+  if (tokens.has("mobile") || tokens.has("app")) priority.add("navigation");
+  if (tokens.has("performance") || tokens.has("canvas") || tokens.has("three")) priority.add("performance");
+
+  return uxQualityRules
+    .filter((rule) => {
+      const id = rule.id ?? rule.category;
+      return id ? priority.has(id) : false;
+    })
+    .map((rule) => {
+      const id = rule.id ?? rule.category ?? "general";
+      return {
+        id,
+        label: rule.label ?? labelFromId(id),
+        checks: rule.checks.slice(0, 4),
+      };
+    });
+}
+
+/**
+ * @param {string} stack
+ * @param {Set<string>} tokens
+ * @returns {StackRule | null}
+ */
+function chooseStack(stack, tokens) {
+  const desired = normalizeStack(stack);
+  const direct = desired
+    ? stackRules.find((rule) => normalizeStack(rule.stack) === desired || rule.keywords.some((keyword) => normalizeStack(keyword) === desired))
+    : undefined;
+  if (direct) return direct;
+
+  for (const rule of stackRules) {
+    if ([rule.stack, ...rule.keywords].some((alias) => {
+      const normalized = slug(alias);
+      if (normalized === "spa" || normalized.length < 3) return false;
+      return tokens.has(normalized) || tokens.has(String(alias).toLowerCase());
+    })) return rule;
+  }
+
+  return null;
+}
+
+/**
+ * @param {Recommendation} model
+ * @returns {string}
+ */
+function renderMarkdown(model) {
+  const lines = [
+    `# Design System Recommendation: ${model.project}`,
+    "",
+    `- Product category: ${model.product.label} (${model.product.id})`,
+    `- Recommended pattern: ${model.product.pattern}`,
+    `- Style archetype: ${model.style.label} (${model.style.id})`,
+    "",
+    "## Token Direction",
+    "",
+    `- Color: ${model.tokens.color}`,
+    `- Typography: ${model.tokens.typography}`,
+    `- Space: ${model.tokens.space}`,
+    `- Components: ${model.tokens.components.join("; ")}`,
+    "",
+    "## Motion Guidance",
+    "",
+    model.motion,
+    "",
+    "## Chart Guidance",
+    "",
+    model.chart,
+    "",
+    "## Anti-Patterns",
+    "",
+    ...model.antiPatterns.map((item) => `- ${item}`),
+    "",
+    "## Pre-Delivery Checklist",
+    "",
+    ...model.checklist.flatMap((group) => [`### ${group.label}`, "", ...group.checks.map((check) => `- ${check}`), ""]),
+  ];
+
+  if (model.stackGuidance) {
+    lines.push("## Stack UI Guidance", "");
+    lines.push(`- Stack: ${model.stackGuidance.label ?? labelFromId(model.stackGuidance.stack)} (${model.stackGuidance.stack})`);
+    lines.push(...model.stackGuidance.guidance.map((item) => `- ${item}`), "");
+  }
+
+  return `${lines.join("\n")}\n`;
+}
+
+/**
+ * @param {Recommendation} model
+ * @returns {string}
+ */
+function renderPageOverride(model) {
+  const pageName = model.page || "page";
+  return [
+    `# Page Override: ${pageName}`,
+    "",
+    `Master: ../MASTER.md`,
+    `Product category: ${model.product.label} (${model.product.id})`,
+    "",
+    "## Page Intent",
+    "",
+    `Use the Master direction, then adapt layout and component density for ${pageName}. Keep overrides narrow and delete any rule that merely repeats the Master.`,
+    "",
+    "## Override Strategy",
+    "",
+    `- Primary pattern: ${model.product.pattern}`,
+    `- Visual emphasis: ${model.style.usage}`,
+    `- Chart behavior: ${model.chart}`,
+    "",
+    "## State QA",
+    "",
+    "- Loading, empty, error, disabled, hover, focus, selected, and reduced-motion states are visible.",
+    "- Mobile, tablet, and desktop layouts preserve task order and readable tap targets.",
+    "",
+  ].join("\n");
+}
+
+/**
+ * @param {Recommendation} model
+ * @param {CliArgs} args
+ * @returns {void}
+ */
+function persistRecommendation(model, args) {
+  const projectSlug = slug(args.project || model.project || "project");
+  const projectDir = path.join(path.resolve(args.outputDir), "design-system", projectSlug);
+  fs.mkdirSync(projectDir, { recursive: true });
+  fs.writeFileSync(path.join(projectDir, "MASTER.md"), renderMarkdown(model), "utf8");
+
+  if (args.page) {
+    const pagesDir = path.join(projectDir, "pages");
+    fs.mkdirSync(pagesDir, { recursive: true });
+    fs.writeFileSync(path.join(pagesDir, `${slug(args.page)}.md`), renderPageOverride(model), "utf8");
+  }
+}
+
+/**
+ * @param {string} value
+ * @returns {Set<string>}
+ */
+function tokenize(value) {
+  return new Set(
+    value
+      .toLowerCase()
+      .split(/[^a-z0-9]+/g)
+      .filter(Boolean),
+  );
+}
+
+/**
+ * @param {Set<string>} tokens
+ * @param {Array<string | undefined>} keywords
+ * @returns {number}
+ */
+function score(tokens, keywords) {
+  return keywords.reduce((total, keyword) => total + (tokens.has(slug(keyword)) || tokens.has(String(keyword).toLowerCase()) ? 1 : 0), 0);
+}
+
+/**
+ * @param {unknown} value
+ * @returns {string}
+ */
+function slug(value) {
+  return String(value)
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function normalizeStack(value) {
+  return value ? slug(value).replace(/-?js$/, "") : "";
+}
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function titleCase(value) {
+  return String(value)
+    .split(/\s+/g)
+    .filter(Boolean)
+    .map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`)
+    .join(" ");
+}
+
+/**
+ * @param {Array<string | undefined | null | false>} values
+ * @returns {string[]}
+ */
+function unique(values) {
+  /** @type {string[]} */
+  const strings = [];
+  for (const value of values) {
+    if (typeof value === "string" && value.length > 0) strings.push(value);
+  }
+  return [...new Set(strings)];
+}
+
+/**
+ * @param {unknown} value
+ * @returns {string}
+ */
+function labelFromId(value) {
+  return String(value)
+    .split("-")
+    .map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`)
+    .join(" ");
+}
+
+main();

package/skills/fec-validation-fix/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: fec-validation-fix
+description: Use when running existing project validation commands and fixing failures after code changes, including lint, type-check, unit/integration test, build, CI, or local script failures. Do not use when the task is to design or author new component/E2E tests; Chinese triggers include 验证, 检查失败, 修复失败, CI 失败.
+---
+
+# 验证并修复
+
+## Purpose
+
+自动化执行已有验证命令，分析失败原因并安全修复，确保质量门禁达标。
+
+## Procedure
+
+1. 从 package.json 或仓库文档中识别可用命令。
+2. 优先按以下顺序执行：
+   - lint
+   - type-check
+   - unit/integration tests
+   - build
+3. 仔细阅读失败输出。
+4. 将错误按文件、错误类型和依赖关系分组，优先处理阻塞后续诊断的根因。
+5. 一次只修复一类问题，并显示或记录关键错误上下文。
+6. 每次关键修复后重新执行受影响命令，确认错误是否减少。
+7. 如果同一错误连续三次修复仍失败，停止扩大改动并报告阻塞。
+8. 最后按 `Expected Output` 总结执行结果、修复内容和剩余风险。
+
+## Failure Triage
+
+- 先修最早出现且会级联的错误，例如缺失类型、导入失败、配置解析失败。
+- 区分真实产品 bug、测试环境问题、快照漂移、依赖版本变化和 flaky。
+- 对 CI 专属失败记录 Node 版本、包管理器、环境变量、路径大小写和工作目录差异。
+- 修复测试时优先修产品代码或测试等待方式，不用删除断言掩盖真实回归。
+
+## 强约束
+
+- 不要盲目关闭规则来消除报错
+- 除非有明确理由，不要为了通过检查而降低类型安全
+- 不要因为附近测试失败就顺手重写无关模块
+- 不要一次性修改多个无关根因
+- 不要删除失败测试来让验证通过
+- 不要只运行失败命令的片段就声称整体验证通过
+
+## Expected Output
+
+- lint / type-check / test / build 等验证命令全部通过
+- 失败项已修复或给出明确原因和后续行动
+- 修复报告保存为 `reports/validation-fix-YYYY-MM-DD-HHmmss.md`
+- 报告包含命令状态表、问题根因、修复说明、变更文件和剩余风险

package/skills/fec-vite-project-standard/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: fec-vite-project-standard
+description: Use when creating, configuring, reviewing, or debugging Vite-based frontend projects, vite.config.ts, env variables, dev server proxy, HMR, plugin ordering, library mode, dependency pre-bundling, bundle splitting, or Vite build performance. Use framework-specific skills for React/Vue component architecture; Chinese triggers include Vite 配置, vite.config, Vite 构建, Vite 性能.
+---
+
+# Vite 项目规范
+
+适用于 Vite 应用、组件库、开发服务器和构建配置的设计与审查。
+
+## Purpose
+
+规范 Vite 配置、安全边界和构建性能，避免开发环境与生产构建的常见陷阱。
+
+## Procedure
+
+1. 识别项目类型
+   - 应用项目优先检查 `root`、`base`、`server.proxy`、`envPrefix`、`build` 和框架插件。
+   - 组件库项目优先检查 `build.lib`、类型产物、peer dependencies external 和导出入口。
+   - Monorepo 额外检查 `server.fs.allow`、路径别名和包依赖边界。
+
+2. 选择插件
+   - React 默认优先 `@vitejs/plugin-react-swc`；需要 Babel 插件时才用 `@vitejs/plugin-react`。
+   - Vue 项目使用 `@vitejs/plugin-vue`，路径别名优先交给 `vite-tsconfig-paths`。
+   - TypeScript 项目必须通过 `tsc --noEmit`、CI 或 `vite-plugin-checker` 补齐类型检查。
+
+3. 管理环境变量
+   - 客户端只读取明确公开的前缀，如 `VITE_`。
+   - `loadEnv` 第三个参数使用显式前缀数组，不使用空字符串加载全部变量。
+   - 密钥、数据库地址、私有 token 必须留在服务端或构建系统，不进入客户端 bundle。
+
+4. 优化开发体验
+   - 慢启动先用 `vite --profile` 定位插件、解析或预构建瓶颈。
+   - 对 CJS/UMD 依赖用 `optimizeDeps.include` 处理互操作问题。
+   - 大项目可用 `server.warmup.clientFiles` 预热核心入口。
+
+5. 优化生产构建
+   - 发布前运行 `vite build`，并用 `vite preview` 做本地构建烟测。
+   - 手动分包使用稳定的对象形式优先，避免把每个依赖拆成独立小 chunk。
+   - 生产 sourcemap 默认关闭；若上传错误追踪平台，上传后不随站点公开。
+   - 动效、3D、图表、编辑器、地图和音视频处理库优先通过动态导入或路由级拆包隔离。
+   - 检查静态资源是否进入正确目录、是否被 hash/cache、是否存在占位 URL 或过大的未压缩媒体。
+
+## Minimal Config
+
+```ts
+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,
+        },
+      },
+    },
+  };
+});
+```
+
+## Constraints
+
+- `vite build` 只转译和打包，不等于类型检查；CI 必须另跑 typecheck。
+- `VITE_` 不是安全边界；任何 `VITE_` 变量都会进入客户端包。
+- 不设置 `envPrefix: ""`，不使用 `loadEnv(mode, root, "")` 后再随意 `define`。
+- 不默认引入 legacy 插件；只有真实用户数据需要时再启用。
+- 不用 `vite preview` 作为生产服务器。
+- 组件库必须 externalize peer dependencies，并单独产出 `.d.ts`。
+- 不把服务端密钥通过 `define`、`import.meta.env` 或空前缀 `loadEnv` 注入客户端。
+- 不把 GSAP、Three.js、Lottie、Monaco、地图 SDK 等重型库放进所有页面共享入口；先评估 async chunk 和首屏影响。
+
+## Expected Output
+
+输出应包含项目类型判断、关键配置变更、环境变量安全说明、构建/开发性能验证方式。完成后 Vite 配置应可类型检查、可构建、密钥不泄露，并能解释 dev 与 build 的差异。