@bovinphang/frontend-craft 2.7.0 → 2.9.0

package/localized/zh-CN/skills/fec-monorepo-project-standard/SKILL.md

@@ -0,0 +1,142 @@
+---
+name: fec-monorepo-project-standard
+description: 用于创建、审查或重构前端 monorepo，包括 pnpm workspace、Turborepo、Nx、多包依赖边界、任务编排、包命名或包发布；中文触发词包括 monorepo、workspace、多包。
+---
+
+# Monorepo 项目规范
+
+适用于使用 pnpm workspace、Turborepo 或 Nx 的多包前端仓库。
+
+## 用途
+
+规范 Monorepo 项目的目录结构、依赖管理、任务编排和包发布流程，确保多包协作的构建效率和版本一致性。
+
+## 流程
+
+1. 先确认仓库是否已使用 pnpm workspace、Turborepo 或 Nx，并沿用现有包命名与任务约定。
+2. 将应用放在 `apps/`，共享库、配置和工具放在 `packages/` 或既有等价目录。
+3. 内部依赖使用 `workspace:*`，通过依赖图驱动构建顺序。
+4. 为 build、lint、test 配置可缓存、可并行、可增量的根任务，并明确输入、输出和环境变量。
+5. 在 Turborepo/Nx 中配置 affected/changed 范围命令，CI 优先跑受影响包，同时保留主干全量验证入口。
+6. 发布包前检查包边界、循环依赖、exports、peer dependencies 和版本策略。
+
+## 工具选择
+
+| 工具               | 适用 | 特点                       |
+| ------------------ | ---- | -------------------------- |
+| **pnpm workspace** | 基础 | 依赖提升、链接、脚本聚合   |
+| **Turborepo**      | 推荐 | 缓存、并行、依赖图         |
+| **Nx**             | 大型 | 增量构建、云缓存、插件生态 |
+
+## 目录结构
+
+### pnpm + Turborepo
+
+```
+├── package.json                # 根 package，workspace 配置
+├── pnpm-workspace.yaml         # workspace 包列表
+├── turbo.json                  # Turborepo 配置
+│
+├── apps/
+│   ├── web/                    # 主应用
+│   │   ├── package.json
+│   │   └── ...
+│   ├── admin/                  # 管理后台
+│   └── docs/                   # 文档站
+│
+├── packages/
+│   ├── ui/                     # 共享 UI 组件
+│   │   ├── package.json
+│   │   └── src/
+│   ├── utils/                  # 工具函数
+│   ├── config-eslint/         # 共享 ESLint 配置
+│   └── config-typescript/     # 共享 TS 配置
+│
+└── tooling/                    # 构建/测试工具（可选）
+    └── scripts/
+```
+
+### pnpm-workspace.yaml
+
+```yaml
+packages:
+  - "apps/*"
+  - "packages/*"
+```
+
+## 依赖管理
+
+- 内部包使用 `workspace:*` 协议
+- 根 `package.json` 统一部分依赖版本，子包可覆盖
+- 禁止循环依赖，通过 `pnpm why` 检查
+
+```json
+{
+  "dependencies": {
+    "@repo/ui": "workspace:*",
+    "@repo/utils": "workspace:*"
+  }
+}
+```
+
+## Turborepo 任务编排
+
+```json
+{
+  "$schema": "https://turbo.build/schema.json",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**", ".next/**"]
+    },
+    "lint": {
+      "dependsOn": ["^build"]
+    },
+    "test": {
+      "dependsOn": ["^build"]
+    }
+  }
+}
+```
+
+- `^build` 表示先执行依赖包的 build
+- `outputs` 用于缓存命中判断
+- `inputs` 应包含源码、配置、锁文件和环境相关文件；不要把 `.env` secret 值写入缓存 key
+- 远程缓存要区分可信 CI 与本地开发，避免把含敏感信息的产物上传
+
+## Nx 任务编排
+
+```json
+{
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/dist"],
+      "cache": true
+    }
+  }
+}
+```
+
+## 包命名
+
+- 内部包：`@org/package-name` 或 `@repo/package-name`
+- 发布到 npm：遵循 `@scope/name` 规范
+
+## 约束
+
+- 子包之间通过 `workspace:*` 引用，不发布到 npm 再安装
+- 共享配置（ESLint、TS）放在 `packages/config-*`，子包 extends
+- 构建顺序由依赖图决定，不手动指定无关依赖
+- 根目录执行 `pnpm -r build` 或 `turbo run build` 时，所有包按序构建
+- 禁止循环依赖，新增包时通过 `pnpm why` 检查依赖链
+- CI cache 只缓存依赖安装目录和任务产物，不缓存未验证的构建状态
+- affected 构建不能替代发布前全量验证；主干或 release 分支仍需完整质量门禁
+
+## 预期输出
+
+- Monorepo 目录结构清晰（`apps/` 应用、`packages/` 共享包、`tooling/` 工具）
+- `pnpm-workspace.yaml` 和 `turbo.json` / `nx.json` 配置正确
+- 内部包使用 `workspace:*` 协议，无循环依赖
+- 构建、lint、test 任务可通过根命令一键执行，缓存命中率高
+- CI 能区分 affected 快速反馈和 release 全量验证，缓存配置不会泄露密钥或隐藏依赖边界问题

package/localized/zh-CN/skills/fec-motion-interaction/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: fec-motion-interaction
+description: 用于设计、实现或审查前端交互动效、页面转场、滚动动画、Framer Motion、GSAP、Lottie、CSS 动画、动效强度、动画性能、减少动效行为或兼具表现力与可访问性的 UI 动效。不要用于仅 SVG 路径绘制、Canvas/WebGL 渲染或普通 hover 状态；中文触发词包括 动效设计、交互动效、页面转场、滚动动画、Framer Motion、GSAP。
+---
+
+# 交互动效
+
+适用于需要把页面转场、滚动叙事、组件入场、微交互和反馈节奏设计成可维护、可降级、可验证的前端动效任务。需要具体实现模式时加载 [motion-patterns.md](references/motion-patterns.md)。
+
+## 用途
+
+为前端界面选择合适动效工具、强度和质量门禁。
+
+## 流程
+
+1. 判断动效职责
+   - 先写清动效服务的用户意图：定位、反馈、层级变化、状态确认、叙事引导或品牌记忆。
+   - 工具型界面默认克制，优先保障扫描效率；营销页和作品页可增加节奏，但不能遮挡主要信息。
+   - 若动效只装饰而不改善理解、反馈或品牌识别，应删掉或改成静态视觉处理。
+   - loading、skeleton、toast、错误提示和成功反馈属于状态沟通；动效只能增强反馈节奏，不能替代文本、语义或可见状态。
+
+2. 选择技术路线
+   - CSS transition/keyframes：hover、focus、toast、简单入场和小型状态反馈。
+   - Framer Motion：React 状态驱动、布局过渡、列表编排和可中断的组件级动画。
+   - GSAP：时间轴、滚动触发、复杂序列和跨元素精确编排。
+   - Lottie：设计工具输出的图标或空状态动画，按需懒加载。
+   - CSS scroll-driven animation：可接受渐进增强且无需旧浏览器一致性时使用。
+
+3. 定义强度等级
+   - Level 1-2：只用 150-250ms opacity/transform，适合后台、表单和高频工具。
+   - Level 3-4：加入短 stagger、局部 spring 和轻量 reveal，适合仪表盘、设置页和管理台。
+   - Level 5-6：加入视差、布局 morph、指针响应，适合产品展示和交互式首页。
+   - Level 7+：使用滚动叙事、固定段落或 3D/WebGL 配合，必须单独做移动端和 reduced-motion 降级。
+   - 场景默认值：公共服务、医疗、金融和强可访问性产品从 Level 1-2 起步；SaaS 工具和数据后台从 Level 2-3 起步；营销页、品牌页和作品集可从 Level 4-6 起步；实验性活动页或沉浸式叙事才考虑 Level 7+。
+   - 如果 UI 设计流程已经设定了动效强度拨盘，沿用该拨盘；不要因为引入了某个动效库就自动提高强度。
+
+4. 建立性能边界
+   - 只高频动画 `transform`、`opacity`，谨慎使用 `filter` 和 `clip-path`。
+   - GSAP、Lottie、Three.js、重型动画组件必须动态导入或隔离在叶子组件。
+   - 持续动画需要暂停条件：不可见、标签页隐藏、用户关闭、低电量或 reduced motion。
+   - 不在滚动事件中同步读写布局；使用 IntersectionObserver、ScrollTimeline 或节流后的 rAF。
+   - 滚动叙事、stagger、spring、磁吸指针和视差效果必须各自有明确职责；同一屏不要同时堆叠多种高强度运动语言。
+   - 长页面中重复 reveal 动画要控制节奏，避免每个区块都以同一种延迟、方向和 easing 进入，造成模板感和滚动疲劳。
+
+5. 设计可访问降级
+   - 所有非必要动效读取 `prefers-reduced-motion`，降级为静态、淡入或即时状态。
+   - 自动播放或循环动效若超过 5 秒，应提供暂停方式或只在局部非关键区域运行。
+   - 不闪烁超过每秒 3 次；不要用动效作为唯一状态提示。
+   - focus ring、错误提示、成功反馈必须在无动效时同样清楚。
+   - 手势动画必须有点击、键盘或明确控件替代；拖拽、滑动和长按不能成为唯一操作路径。
+
+6. 验证交付
+   - 在 375px、768px、1440px 检查动效是否遮挡文案、按钮或表格内容。
+   - 检查首次加载 bundle 是否因动效库显著膨胀。
+   - 手动开启 reduced motion，确认动画被禁用或弱化。
+   - 用性能面板或实际设备确认滚动和关键交互没有明显掉帧。
+   - 检查动效强度是否匹配页面类型：工作台不应出现营销式滚动剧场，作品集也不应只有默认 hover 淡入。
+   - 对滚动触发序列确认用户可以快速到达内容，不因 pinned 区块、过长时间轴或不可中断过渡丢失上下文。
+
+## 约束
+
+- 不在同一个组件内混用 Framer Motion 和 GSAP 控制同一元素。
+- 不用动效掩盖 loading、empty、error、disabled 等状态缺失。
+- 不为普通后台表格、配置页和高频工作台默认加入大幅视差或滚动劫持。
+- 不让所有区块使用相同 reveal 模板；动效节奏应随信息层级和用户任务变化。
+- 不动画 `width`、`height`、`top`、`left`、`margin`、`padding` 等会频繁触发布局的属性。
+- 不把大型 Lottie JSON、GSAP 插件或 3D 场景放入首屏同步包。
+- 不让动画改变阅读顺序、焦点顺序或键盘可达性。
+- 不用 skeleton 长时间占位掩盖真实加载失败；超过预期时应转入可理解的 loading、retry 或 error 状态。
+
+## 预期输出
+
+输出应包含动效目的、技术选型、强度等级、降级策略、性能边界和验证结果。完成后交互动效应帮助用户理解状态和层级，在 reduced-motion 与低端设备上仍可用，并且不显著拖慢首屏或滚动体验。

package/localized/zh-CN/skills/fec-motion-interaction/references/motion-patterns.md

@@ -0,0 +1,112 @@
+# 交互动效实现模式
+
+## CSS 微交互
+
+```css
+.action {
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease,
+    background-color 180ms ease;
+}
+
+.action:hover {
+  transform: translateY(-1px);
+}
+
+.action:active {
+  transform: translateY(0) scale(0.98);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .action {
+    transition-duration: 1ms;
+  }
+
+  .action:hover,
+  .action:active {
+    transform: none;
+  }
+}
+```
+
+## Framer Motion 组件入场
+
+```tsx
+import { motion, useReducedMotion } from "framer-motion";
+
+export function MotionPanel({ children }: { children: React.ReactNode }) {
+  const reduceMotion = useReducedMotion();
+
+  return (
+    <motion.section
+      initial={reduceMotion ? false : { opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.24, ease: [0.16, 1, 0.3, 1] }}
+    >
+      {children}
+    </motion.section>
+  );
+}
+```
+
+## GSAP 时间轴清理
+
+```tsx
+import { useLayoutEffect, useRef } from "react";
+import gsap from "gsap";
+
+export function RevealTimeline() {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!rootRef.current) return;
+
+    const context = gsap.context(() => {
+      gsap
+        .timeline({ defaults: { ease: "power2.out" } })
+        .from("[data-title]", { opacity: 0, y: 16, duration: 0.28 })
+        .from(
+          "[data-item]",
+          { opacity: 0, y: 10, stagger: 0.04, duration: 0.2 },
+          "-=0.08",
+        );
+    }, rootRef);
+
+    return () => context.revert();
+  }, []);
+
+  return (
+    <div ref={rootRef}>
+      <h2 data-title>Release health</h2>
+      <div data-item>Build</div>
+      <div data-item>Tests</div>
+      <div data-item>Deploy</div>
+    </div>
+  );
+}
+```
+
+## 重型动效懒加载
+
+```tsx
+import { lazy, Suspense } from "react";
+
+const InteractiveShowcase = lazy(() => import("./InteractiveShowcase"));
+
+export function ShowcaseSlot() {
+  return (
+    <Suspense fallback={<div aria-busy="true" />}>
+      <InteractiveShowcase />
+    </Suspense>
+  );
+}
+```
+
+## 审查清单
+
+- 动画目标能用一句话说明，且服务信息层级或状态反馈。
+- 高吞吐界面不使用滚动劫持或长时间入场遮挡。
+- reduced-motion 下信息仍完整，焦点与阅读顺序不变化。
+- 动画库按需加载，持续动画可暂停或卸载清理。
+- 关键设备上检查掉帧、文字遮挡和首屏 bundle 变化。

package/localized/zh-CN/skills/fec-nextjs-project-standard/SKILL.md

@@ -0,0 +1,123 @@
+---
+name: fec-nextjs-project-standard
+description: 用于创建或审查 Next.js 14+ App Router 项目、文件路由、layout、服务端/客户端组件边界、SSR/SSG/ISR、streaming、metadata、middleware、server actions 或 Next 特定数据获取。通用客户端 React 组件架构另按项目 React 约定处理；中文触发词包括 Next.js、App Router。
+---
+
+# Next.js 项目规范
+
+适用于使用 Next.js 14+ 与 App Router 的仓库。
+
+## 用途
+
+规范 Next.js 14+ 项目中 App Router、SSR/SSG/ISR 渲染模式、数据获取、路由布局、中间件和 SEO 元数据的工程实践，确保服务端优先、性能优化和可维护性。
+
+## 流程
+
+1. 先识别目标属于 App Router、布局、服务端数据、middleware、metadata 还是客户端交互。
+2. 默认服务端组件优先；只有需要浏览器 API、交互状态或事件处理时才使用 `'use client'`。
+3. 明确 SSR / SSG / ISR / CSR 渲染模式和 Next fetch/cache 策略。
+4. 为路由补齐 `loading.tsx`、`error.tsx`、`not-found.tsx`、metadata 和敏感逻辑的服务端边界。
+5. 引入第三方库前检查是否支持 Server Component；浏览器专属、动效、图表、编辑器和 WebGL 库必须放进客户端叶子组件并按需加载。
+6. 对动态渲染、缓存失效、RSC 序列化、route handler、middleware 和首屏 bundle 做证据优先审查；不确定时先收集构建、trace、headers 或路由行为证据。
+7. 客户端组件架构问题分流到 React 项目 workflow。
+
+## 项目结构
+
+```
+src/
+├── app/                        # App Router
+│   ├── layout.tsx              # 根布局
+│   ├── page.tsx                # 首页
+│   ├── loading.tsx              # 全局 loading UI
+│   ├── error.tsx                # 全局错误边界
+│   ├── not-found.tsx           # 404
+│   ├── globals.css
+│   │
+│   ├── (auth)/                 # 路由组
+│   │   ├── login/
+│   │   │   └── page.tsx
+│   │   └── register/
+│   │       └── page.tsx
+│   │
+│   ├── (dashboard)/            # 仪表盘路由组
+│   │   ├── layout.tsx          # 共享布局
+│   │   ├── dashboard/
+│   │   │   └── page.tsx
+│   │   └── users/
+│   │       ├── page.tsx
+│   │       └── [id]/
+│   │           └── page.tsx
+│   │
+│   └── api/                    # API Routes
+│       └── users/
+│           └── route.ts
+│
+├── components/                 # 共享组件
+├── lib/                        # 工具、配置
+├── hooks/
+├── services/
+└── types/
+```
+
+## 渲染模式
+
+| 模式    | 使用场景         | 实现方式                                        |
+| ------- | ---------------- | ----------------------------------------------- |
+| **SSR** | 动态、需实时数据 | 默认，`fetch` 不缓存或 `cache: 'no-store'`      |
+| **SSG** | 静态内容         | `generateStaticParams` + 静态 `fetch`           |
+| **ISR** | 定期更新         | `revalidate` 或 `revalidatePath`                |
+| **CSR** | 客户端交互       | `'use client'` + `useEffect` 或 SWR/React Query |
+
+## 数据获取
+
+- 服务端组件：直接 `async` 或 `fetch`，不暴露 `useEffect`
+- 客户端组件：`useEffect` + `useState`，或 SWR / React Query
+- 优先在服务端获取数据，减少客户端水合
+- 使用 `loading.tsx` 和 Suspense 包裹异步区块，提供流式体验
+- 缓存策略要写清 `force-cache`、`no-store`、`revalidate`、tag/path revalidation 或用户私有数据约束
+- 任何会让路由从静态变动态的读取（cookies、headers、searchParams、未缓存 fetch）都要说明原因和验证方式
+
+## 路由与布局
+
+- 路由组 `(auth)` 不改变 URL，只影响布局
+- 动态路由 `[id]` 配合 `generateStaticParams` 做 SSG
+- `layout.tsx` 包裹子路由，共享 UI 与布局
+- `page.tsx` 为叶子路由，不可嵌套
+
+## 中间件
+
+- 放在 `middleware.ts` 根目录
+- 用于鉴权、重定向、rewrite、Header 修改
+- 尽量短小，避免阻塞请求
+
+## 元数据与 SEO
+
+- 使用 `metadata` 或 `generateMetadata` 导出
+- 支持 `title`、`description`、`openGraph`、`twitter` 等
+- 动态路由用 `generateMetadata(params)` 生成
+
+## 约束
+
+- 服务端组件默认，仅在需要客户端交互时加 `'use client'`
+- 不在服务端组件中直接使用 `useState`、`useEffect`、浏览器 API
+- 敏感逻辑（如鉴权）放在服务端或 API Route，不暴露在客户端
+- 图片使用 `next/image`，字体使用 `next/font`
+- 不把密钥、内部 API 地址或服务端 token 放入 `NEXT_PUBLIC_` 环境变量。
+- 不让大型动效库、3D 场景、富文本编辑器或地图 SDK 进入根布局同步 bundle。
+- 首屏媒体必须有确定尺寸、真实资源和合理 priority；不要用远程占位图撑布局。
+- 不在没有指标、响应头、构建输出或路由行为证据时断言某路由“已缓存”或“必须动态”。
+- Middleware 只处理路由级轻量决策，不承载重型鉴权查询、日志批处理或可放到 route handler 的业务逻辑。
+
+## 与客户端 UI 模式的分工
+
+- **服务端**：渲染模式、数据获取与缓存、`loading.tsx` / `error.tsx`、路由与布局等以本 skill 为准。
+- **`'use client'` 组件**：组合与复合组件、表单、客户端状态、列表虚拟化、动效与键盘/焦点等，与纯 React 项目一致，遵循项目中的 React 规则（如 `.claude/rules/fec-react.md`）。
+- **权限与客户端数据**：鉴权、RBAC、redirect、客户端 server state 和缓存失效应按对应专项 workflow 处理；Next 服务端 fetch/cache 仍以本 skill 为准。
+
+## 预期输出
+
+- 页面组件按 App Router 约定组织（`app/` 目录、`page.tsx`、`layout.tsx`、`loading.tsx`、`error.tsx`）
+- 渲染模式选择正确（SSR/SSG/ISR/CSR），数据获取路径清晰
+- 元数据和 SEO 配置完整（title、description、openGraph）
+- 敏感逻辑在服务端，客户端组件仅处理交互
+- 缓存、动态渲染和首屏 bundle 决策有可复查证据，性能风险可分流到专项性能 workflow

package/localized/zh-CN/skills/fec-nuxt-project-standard/SKILL.md

@@ -0,0 +1,122 @@
+---
+name: fec-nuxt-project-standard
+description: 用于创建或审查 Nuxt 3 项目、文件路由、pages、layouts、SSR/SSG/SPA 行为、Nuxt 数据获取、route middleware、plugins、modules、server routes 或 Nuxt 特定 Vue 3 约定。通用 Vue 组件架构另按项目 Vue 约定处理；中文触发词包括 Nuxt、Nuxt 3。
+---
+
+# Nuxt 3 项目规范
+
+适用于使用 Nuxt 3 + Vue 3 + TypeScript 的仓库。
+
+## 用途
+
+规范 Nuxt 3 项目中 SSR/SSG 渲染模式、组合式 API、自动导入、数据获取、路由中间件和模块插件的工程实践，确保约定式开发和类型安全。
+
+## 流程
+
+1. 先识别目标属于 Nuxt pages/layouts、渲染模式、数据获取、route middleware、plugin/module 还是 server route。
+2. 明确 SSR / SSG / SPA 选择，避免服务端可执行代码依赖 `window` 或 `document`。
+3. 数据获取优先使用 Nuxt 的 `useFetch` / `useAsyncData`，并检查水合一致性。
+4. 路由鉴权、redirect 和权限问题与路由保护 workflow 对齐。
+5. 通用 Vue 组件架构问题分流到 Vue 项目 workflow。
+
+## 项目结构
+
+```
+├── app.vue                    # 根组件
+├── nuxt.config.ts              # Nuxt 配置
+│
+├── pages/                     # 基于文件的路由
+│   ├── index.vue               # /
+│   ├── login.vue               # /login
+│   ├── dashboard/
+│   │   ├── index.vue           # /dashboard
+│   │   └── users/
+│   │       ├── index.vue       # /dashboard/users
+│   │       └── [id].vue       # /dashboard/users/:id
+│   └── [...slug].vue          # 捕获所有
+│
+├── layouts/                   # 布局
+│   ├── default.vue
+│   └── auth.vue
+│
+├── components/                # 自动导入组件
+│   ├── Button/
+│   │   └── Button.vue
+│   └── AppHeader.vue
+│
+├── composables/               # 组合式函数（自动导入）
+│   ├── useAuth.ts
+│   └── useFetch.ts
+│
+├── server/                    # 服务端 API
+│   ├── api/                   # API 路由
+│   │   └── users/
+│   │       └── index.get.ts
+│   ├── middleware/            # 服务端中间件
+│   └── utils/                 # 服务端工具
+│
+├── plugins/                   # 插件
+│   └── i18n.client.ts
+│
+├── middleware/                # 路由中间件
+│   └── auth.ts
+│
+├── public/                    # 静态资源
+├── assets/                    # 需构建的资源
+└── types/                     # 类型定义
+```
+
+## 渲染模式
+
+| 模式    | 配置            | 说明           |
+| ------- | --------------- | -------------- |
+| **SSR** | 默认            | `ssr: true`    |
+| **SSG** | `nuxt generate` | 预渲染所有页面 |
+| **SPA** | `ssr: false`    | 纯客户端渲染   |
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  ssr: true, // 或 false
+});
+```
+
+## 数据获取
+
+- `useFetch` / `useAsyncData`：服务端 + 客户端，自动去重
+- `$fetch`：直接请求，适合服务端或一次性调用
+- `useLazyAsyncData`：不阻塞导航，适合非首屏
+- 避免在 `setup` 顶层混用同步/异步逻辑导致水合不匹配
+
+## 路由与布局
+
+- `pages/` 下文件自动生成路由
+- 动态路由：`[id].vue`、`[...slug].vue`
+- 布局：`layout` 选项或 `layouts/default.vue` 默认
+- 嵌套路由：`pages/parent/child.vue` 需配合 `NuxtPage`
+
+## 中间件
+
+- `middleware/` 下文件自动注册
+- 页面级：`definePageMeta({ middleware: ['auth'] })`
+- 全局：`nuxt.config.ts` 的 `router.middleware`
+- 服务端中间件：`server/middleware/`
+
+## 插件与模块
+
+- 插件：`plugins/*.ts`，支持 `.client`、`.server` 后缀
+- 模块：`modules/` 或 `node_modules`，在 `nuxt.config` 中 `modules: []`
+
+## 约束
+
+- 服务端可访问的代码不要依赖 `window`、`document`
+- 使用 `useState` 共享状态时注意 SSR 序列化
+- 图片使用 `NuxtImg`，链接使用 `NuxtLink`
+- 避免在 `setup` 顶层使用 `await` 导致阻塞，优先用 `useAsyncData` / `useFetch`
+
+## 预期输出
+
+- 页面按 `pages/` 约定式路由组织，动态路由正确配置
+- 渲染模式（SSR/SSG/SPA）选择正确，`nuxt.config.ts` 配置清晰
+- 数据获取使用 `useFetch` / `useAsyncData`，自动去重和水合
+- Composables 和组件自动导入正确，服务端/客户端边界清晰

package/localized/zh-CN/skills/fec-performance-optimization/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: fec-performance-optimization
+description: 用于诊断或改进前端性能、Core Web Vitals、包体积、运行时渲染成本、网络瀑布、内存泄漏、长任务、Lighthouse 问题或性能预算；中文触发词包括 性能优化、页面卡顿、首屏慢、包体积、Web Vitals。
+---
+
+# 前端性能优化
+
+## 用途
+
+用可度量的方式定位前端性能瓶颈，并把优化建议收敛到用户主路径、构建产物和运行时证据。
+
+## 流程
+
+1. 锁定体验目标
+   - 明确问题属于首屏加载、交互延迟、滚动卡顿、内存上涨、网络瀑布、包体积，还是视觉稳定性。
+   - 记录路由、设备、网络条件、浏览器、复现步骤和当前可用指标。
+   - 没有指标时先建立基线，不直接给出“优化一切”的泛化建议。
+
+2. 建立度量基线
+   - 读取项目脚本、构建配置、依赖和已有性能报告。
+   - 对页面体验优先使用 Lighthouse、Performance trace、React Profiler、Vue Devtools、Memory snapshot 或 RUM 数据。
+   - 对包体优先看构建产物、source map、依赖重复、首屏 chunk 和动态 import 边界。
+   - 对运行时卡顿优先看长任务、重复渲染、昂贵计算、同步循环、布局抖动和大列表。
+   - 如果已有线上监控、平台指标或 CI 产物，先用它们确认受影响路由、设备、时间窗和用户主路径，再决定读哪些源码。
+
+3. 分层定位
+   - 加载层：关键 CSS、字体、图片、脚本阻塞、预加载和缓存。
+   - 渲染层：不稳定 key、过宽 Context、无意义 effect、重复计算、组件树过大。
+   - 数据层：串行请求、重复请求、过大 payload、缺少分页或缓存策略。
+   - 主线程：JSON/CSV 解析、图片处理、复杂排序过滤、同步压缩和大对象深拷贝。
+   - 资源层：事件监听、定时器、订阅、WebGL/Canvas 资源和对象 URL 未释放。
+
+4. 形成优化方案
+   - 每个建议必须绑定位置、影响、改法和验证方式。
+   - 优先处理高频主路径和 P95 体验；低频后台任务不抢占首屏预算。
+   - 先做低风险高收益改动，如懒加载、去重、缓存、尺寸预留、虚拟列表、稳定引用和释放资源。
+   - 对会牺牲可维护性的技巧，必须说明收益证据和替代方案。
+   - 建议进入实现前先过候选门禁：是否有指标支撑、能否定位到路由/组件/chunk/请求、是否可由前端验证、是否存在更小改动。
+
+5. 验证回归
+   - 重新运行受影响构建、测试和性能采集命令。
+   - 对比优化前后指标或产物体积。
+   - 确认 loading、empty、error、offline、reduced-motion 和移动端状态未被优化破坏。
+
+## 预算
+
+| 范围 | 默认目标 | 说明 |
+| ---- | -------- | ---- |
+| LCP | 约 2.5s 内 | 以核心页面、目标地区网络和真实设备为准 |
+| CLS | 低于 0.1 | 媒体、广告、异步内容需要预留空间 |
+| INP | 约 200ms 内 | 优先拆分长任务和降低交互路径重渲染 |
+| 初始 JS | 遵循项目预算 | 没有预算时先报告当前 gzip / brotli 体积 |
+| 主线程 | 避免连续长任务 | 大计算考虑分片、缓存或 Worker |
+
+## 检查项
+
+- 首屏资源是否包含非首屏组件、图表、编辑器、地图或全量图标库。
+- 图片是否有明确尺寸、合适格式、懒加载和首屏优先级。
+- 列表、表格、时间线是否需要虚拟化或分页。
+- 搜索、筛选、排序是否在热路径重复 O(n*m) 扫描。
+- 请求是否可并行、可缓存、可取消、可复用。
+- 监听、订阅、定时器、AbortController、Object URL、Canvas/WebGL 资源是否对称清理。
+
+## 约束
+
+- 不做没有目标和证据的过早优化。
+- 不靠关闭功能、删除状态反馈或降低可访问性来换性能分数。
+- 不为一次 Lighthouse 分数牺牲真实用户主路径。
+- 不引入大型新依赖解决小问题；先利用项目已有工具和浏览器能力。
+- 不把后端、网络和浏览器侧问题混为一谈；前端能验证的部分要单独列证据。
+- 不从 repo-wide grep 直接跳到优化结论；先用指标或复现路径收窄候选，再读相关源码。
+
+## 详细参考
+
+撰写性能分析报告时，加载 [references/report-template.md](references/report-template.md)。
+需要按 React、Vue、Next.js 或 Nuxt 分类定位框架专项性能风险时，加载 [references/framework-performance-patterns.md](references/framework-performance-patterns.md)。
+
+## 预期输出
+
+输出有证据链的性能分析报告，说明基线、候选门禁、瓶颈、优化建议、验证方式和剩余风险。报告保存为 `reports/performance-review-YYYY-MM-DD-HHmmss.md`。