@bovinphang/frontend-craft 2.7.0 → 2.8.0

package/skills/fec-motion-interaction/SKILL.md

@@ -1,73 +1,73 @@
 ---
 name: fec-motion-interaction
-description: Use when designing, implementing, or reviewing frontend interaction motion, page transitions, scroll animation, Framer Motion, GSAP, Lottie, CSS animation, motion intensity, animation performance, reduced-motion behavior, or cinematic but accessible UI motion. Do not use for SVG-only path drawing, Canvas/WebGL rendering, or ordinary hover states; Chinese triggers include 动效设计, 交互动效, 页面转场, 滚动动画, Framer Motion, GSAP.
+description: Use when designing, implementing, or reviewing frontend interaction motion, page transitions, scroll animation, Framer Motion, GSAP, Lottie, CSS animation, motion intensity, animation performance, reduced-motion behavior, or cinematic but accessible UI motion. Do not use for SVG-only path drawing, Canvas/WebGL rendering, or ordinary hover states; Chinese triggers include motion design, interactive effects, page transitions, scroll animation, Framer Motion, GSAP.
 ---
 
-# 交互动效
+# Interactive effects
 
-适用于需要把页面转场、滚动叙事、组件入场、微交互和反馈节奏设计成可维护、可降级、可验证的前端动效任务。需要具体实现模式时加载 [motion-patterns.md](references/motion-patterns.md)。
+It is suitable for front-end animation tasks that need to design page transitions, scrolling narratives, component introductions, micro-interactions and feedback rhythms into maintainable, degradable and verifiable forms. Load [motion-patterns.md](references/motion-patterns.md) when a specific implementation pattern is required.
 
 ## Purpose
 
-为前端界面选择合适动效工具、强度和质量门禁。
+Choose the right animation tools, intensity, and quality gates for your front-end interface.
 
 ## Procedure
 
-1. 判断动效职责
-   - 先写清动效服务的用户意图：定位、反馈、层级变化、状态确认、叙事引导或品牌记忆。
-   - 工具型界面默认克制，优先保障扫描效率；营销页和作品页可增加节奏，但不能遮挡主要信息。
-   - 若动效只装饰而不改善理解、反馈或品牌识别，应删掉或改成静态视觉处理。
-   - loading、skeleton、toast、错误提示和成功反馈属于状态沟通；动效只能增强反馈节奏，不能替代文本、语义或可见状态。
+1. Determine animation responsibilities
+   - First write down the user intention of the dynamic effect service: positioning, feedback, level changes, status confirmation, narrative guidance or brand memory.
+   - The tool-based interface is restrained by default, and priority is given to ensuring scanning efficiency; the marketing page and work page can increase the rhythm, but cannot block the main information.
+   - If animation is merely decorative and does not improve understanding, feedback or brand recognition, it should be deleted or replaced with a static visual treatment.
+   - Loading, skeleton, toast, error prompts and success feedback belong to status communication; animations can only enhance the feedback rhythm and cannot replace text, semantics or visible status.
 
-2. 选择技术路线
-   - CSS transition/keyframes：hover、focus、toast、简单入场和小型状态反馈。
-   - Framer Motion：React 状态驱动、布局过渡、列表编排和可中断的组件级动画。
-   - GSAP：时间轴、滚动触发、复杂序列和跨元素精确编排。
-   - Lottie：设计工具输出的图标或空状态动画，按需懒加载。
-   - CSS scroll-driven animation：可接受渐进增强且无需旧浏览器一致性时使用。
+2. Choose a technical route
+   - CSS transitions/keyframes: hover, focus, toast, simple entry and small status feedback.
+   - Framer Motion: React state-driven, layout transitions, list orchestration, and interruptible component-level animations.
+   - GSAP: timelines, scroll triggers, complex sequences and precise orchestration across elements.
+   - Lottie: The icon or empty state animation output by the design tool is lazy loaded on demand.
+   - CSS scroll-driven animation: Use when progressive enhancement is acceptable and legacy browser consistency is not required.
 
-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 设计流程已经设定了动效强度拨盘，沿用该拨盘；不要因为引入了某个动效库就自动提高强度。
+3. Define intensity levels
+   - Level 1-2: Only uses 150-250ms opacity/transform, suitable for background, forms and high-frequency tools.
+   - Level 3-4: Add short stagger, partial spring and lightweight reveal, suitable for dashboards, settings pages and management consoles.
+   - Level 5-6: Add parallax, layout morph, and pointer response, suitable for product display and interactive homepage.
+- Level 7+: To use scrolling narrative, fixed paragraphs or 3D/WebGL cooperation, the mobile version and reduced-motion downgrade must be done separately.
+   - Scenario default values: public services, medical, financial and highly accessible products start from Level 1-2; SaaS tools and data backends start from Level 2-3; marketing pages, brand pages and portfolios can start from Level 4-6; only experimental activity pages or immersive narratives can consider Level 7+.
+   - If the UI design process already has a motion intensity dial set up, use that dial; don’t automatically increase the intensity just because a certain motion library is introduced.
 
-4. 建立性能边界
-   - 只高频动画 `transform`、`opacity`，谨慎使用 `filter` 和 `clip-path`。
-   - GSAP、Lottie、Three.js、重型动画组件必须动态导入或隔离在叶子组件。
-   - 持续动画需要暂停条件：不可见、标签页隐藏、用户关闭、低电量或 reduced motion。
-   - 不在滚动事件中同步读写布局；使用 IntersectionObserver、ScrollTimeline 或节流后的 rAF。
-   - 滚动叙事、stagger、spring、磁吸指针和视差效果必须各自有明确职责；同一屏不要同时堆叠多种高强度运动语言。
-   - 长页面中重复 reveal 动画要控制节奏，避免每个区块都以同一种延迟、方向和 easing 进入，造成模板感和滚动疲劳。
+4. Establish performance boundaries
+   - Only high-frequency animations `transform`, `opacity`, use `filter` and `clip-path` with caution.
+   - GSAP, Lottie, Three.js, heavy animation components must be dynamically imported or isolated in leaf components.
+- Sustained animations require pause conditions: invisible, tab hidden, user closed, low battery, or reduced motion.
+   - Do not read and write layout synchronously on scroll events; use IntersectionObserver, ScrollTimeline, or throttled rAF.
+   - Scroll narrative, stagger, spring, magnetic pointer and parallax effects must have clear responsibilities respectively; do not stack multiple high-intensity motion languages on the same screen at the same time.
+   - The rhythm of repeated reveal animations on long pages must be controlled to avoid each block entering with the same delay, direction, and easing, causing a template feel and scrolling fatigue.
 
-5. 设计可访问降级
-   - 所有非必要动效读取 `prefers-reduced-motion`，降级为静态、淡入或即时状态。
-   - 自动播放或循环动效若超过 5 秒，应提供暂停方式或只在局部非关键区域运行。
-   - 不闪烁超过每秒 3 次；不要用动效作为唯一状态提示。
-   - focus ring、错误提示、成功反馈必须在无动效时同样清楚。
-   - 手势动画必须有点击、键盘或明确控件替代；拖拽、滑动和长按不能成为唯一操作路径。
+5. Design for accessible degradation
+   - All non-essential motion effects read `prefers-reduced-motion` and downgrade to static, fade-in or instant state.
+   - If the automatic playback or looping animation exceeds 5 seconds, a pause method should be provided or it should only run in local non-critical areas.
+   - Do not flash more than 3 times per second; do not use animation as the only status reminder.
+   - The focus ring, error prompt, and success feedback must be equally clear when there is no animation.
+   - Gesture animations must be replaced by clicks, keyboards, or explicit controls; dragging, sliding, and long-pressing cannot be the only operation paths.
 
-6. 验证交付
-   - 在 375px、768px、1440px 检查动效是否遮挡文案、按钮或表格内容。
-   - 检查首次加载 bundle 是否因动效库显著膨胀。
-   - 手动开启 reduced motion，确认动画被禁用或弱化。
-   - 用性能面板或实际设备确认滚动和关键交互没有明显掉帧。
-   - 检查动效强度是否匹配页面类型：工作台不应出现营销式滚动剧场，作品集也不应只有默认 hover 淡入。
-   - 对滚动触发序列确认用户可以快速到达内容，不因 pinned 区块、过长时间轴或不可中断过渡丢失上下文。
+6. Verify delivery
+   - Check whether the animation blocks the copy, button or table content at 375px, 768px, and 1440px.
+   - Check whether the first loaded bundle is significantly bloated by the animation library.
+   - Turn on reduced motion manually and confirm that the animation is disabled or weakened.
+   - Confirm scrolling and key interactions without noticeable frame drops using the performance panel or actual device.
+   - Check that the animation intensity matches the page type: the workbench should not have a marketing-style scrolling theater, and the portfolio should not only have a default hover fade-in.
+   - Verify that scroll trigger sequences allow users to reach content quickly without losing context due to pinned blocks, long timelines, or uninterruptible transitions.
 
 ## Constraints
 
-- 不在同一个组件内混用 Framer Motion 和 GSAP 控制同一元素。
-- 不用动效掩盖 loading、empty、error、disabled 等状态缺失。
-- 不为普通后台表格、配置页和高频工作台默认加入大幅视差或滚动劫持。
-- 不让所有区块使用相同 reveal 模板；动效节奏应随信息层级和用户任务变化。
-- 不动画 `width`、`height`、`top`、`left`、`margin`、`padding` 等会频繁触发布局的属性。
-- 不把大型 Lottie JSON、GSAP 插件或 3D 场景放入首屏同步包。
-- 不让动画改变阅读顺序、焦点顺序或键盘可达性。
-- 不用 skeleton 长时间占位掩盖真实加载失败；超过预期时应转入可理解的 loading、retry 或 error 状态。
+- Do not mix Framer Motion and GSAP controls for the same element within the same component.
+- Don’t use animations to cover up missing statuses such as loading, empty, error, disabled, etc.
+- Do not add large parallax or scroll hijacking by default for ordinary background tables, configuration pages and high-frequency workbench.
+- Do not use the same reveal template for all blocks; the rhythm of the animation should vary with the information level and user tasks.
+- Do not animate `width`, `height`, `top`, `left`, `margin`, `padding` and other properties that frequently trigger layout.
+- Do not put large Lottie JSON, GSAP plug-ins or 3D scenes into the above-the-fold sync package.
+- Don't let animations change reading order, focus order, or keyboard accessibility.
+- Do not use skeleton for a long time to cover up the actual loading failure; when it exceeds expectations, it should be transferred to an understandable loading, retry or error state.
 
 ## Expected Output
 
-输出应包含动效目的、技术选型、强度等级、降级策略、性能边界和验证结果。完成后交互动效应帮助用户理解状态和层级，在 reduced-motion 与低端设备上仍可用，并且不显著拖慢首屏或滚动体验。
+The output should include animation purpose, technology selection, intensity level, degradation strategy, performance boundaries and verification results. Post-completion interactions help users understand state and hierarchy, remain available on reduced-motion and low-end devices, and do not significantly slow down the above-the-fold or scrolling experience.

package/skills/fec-motion-interaction/references/motion-patterns.md

@@ -1,6 +1,6 @@
-# 交互动效实现模式
+#Interactive effect implementation mode
 
-## CSS 微交互
+## CSS Microinteractions
 
 ```css
 .action {
@@ -30,7 +30,7 @@
 }
 ```
 
-## Framer Motion 组件入场
+## Framer Motion component entry
 
 ```tsx
 import { motion, useReducedMotion } from "framer-motion";
@@ -50,7 +50,7 @@ export function MotionPanel({ children }: { children: React.ReactNode }) {
 }
 ```
 
-## GSAP 时间轴清理
+## GSAP Timeline Cleanup
 
 ```tsx
 import { useLayoutEffect, useRef } from "react";
@@ -87,7 +87,7 @@ export function RevealTimeline() {
 }
 ```
 
-## 重型动效懒加载
+## Heavy animation lazy loading
 
 ```tsx
 import { lazy, Suspense } from "react";
@@ -103,10 +103,10 @@ export function ShowcaseSlot() {
 }
 ```
 
-## 审查清单
+## Review Checklist
 
-- 动画目标能用一句话说明，且服务信息层级或状态反馈。
-- 高吞吐界面不使用滚动劫持或长时间入场遮挡。
-- reduced-motion 下信息仍完整，焦点与阅读顺序不变化。
-- 动画库按需加载，持续动画可暂停或卸载清理。
-- 关键设备上检查掉帧、文字遮挡和首屏 bundle 变化。
+- Animation goals can be described in one sentence and serve information level or status feedback.
+- High throughput interface does not use scroll hijacking or long entry occlusion.
+- The information is still complete under reduced-motion, and the focus and reading order do not change.
+- The animation library is loaded on demand, and continuous animation can be paused or uninstalled for cleaning.
+- Check for frame drops, text occlusion and above-the-fold bundle changes on key devices.

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

@@ -3,44 +3,44 @@ name: fec-nextjs-project-standard
 description: Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventions separately; Chinese triggers include Next.js, App Router.
 ---
 
-# Next.js 项目规范
+# Next.js project specifications
 
-适用于使用 Next.js 14+ 与 App Router 的仓库。
+For repositories using Next.js 14+ with App Router.
 
 ## Purpose
 
-规范 Next.js 14+ 项目中 App Router、SSR/SSG/ISR 渲染模式、数据获取、路由布局、中间件和 SEO 元数据的工程实践，确保服务端优先、性能优化和可维护性。
+Standardize engineering practices for App Router, SSR/SSG/ISR rendering modes, data acquisition, route layout, middleware and SEO metadata in Next.js 14+ projects to ensure server-side priority, performance optimization and maintainability.
 
 ## Procedure
 
-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。
+1. First identify whether the target belongs to App Router, layout, server data, middleware, metadata or client interaction.
+2. Default server-side components take precedence; use `'use client'` only when browser API, interactive state or event handling is required.
+3. Clarify SSR / SSG / ISR / CSR rendering mode and Next fetch/cache strategy.
+4. Complete the server-side boundaries of `loading.tsx`, `error.tsx`, `not-found.tsx`, metadata and sensitive logic for routing.
+5. Check whether Server Component is supported before introducing third-party libraries; browser-specific, animation, chart, editor and WebGL libraries must be placed into client leaf components and loaded on demand.
+6. Prioritize evidence review for dynamic rendering, cache invalidation, RSC serialization, route handler, middleware, and first-screen bundles; first collect build, trace, headers, or routing behavior evidence when unsure.
+7. Client component architecture issues are offloaded to the React project workflow.
 
-## 项目结构
+## Project structure
 
 ```
 src/
 ├── app/                        # App Router
-│   ├── layout.tsx              # 根布局
-│   ├── page.tsx                # 首页
-│   ├── loading.tsx              # 全局 loading UI
-│   ├── error.tsx                # 全局错误边界
+│ ├── layout.tsx # Root layout
+│ ├── page.tsx # Home page
+│ ├── loading.tsx # Global loading UI
+│ ├── error.tsx # Global error boundary
 │   ├── not-found.tsx           # 404
 │   ├── globals.css
 │   │
-│   ├── (auth)/                 # 路由组
+│ ├── (auth)/ # Routing group
 │   │   ├── login/
 │   │   │   └── page.tsx
 │   │   └── register/
 │   │       └── page.tsx
 │   │
-│   ├── (dashboard)/            # 仪表盘路由组
-│   │   ├── layout.tsx          # 共享布局
+│ ├── (dashboard)/ # Dashboard routing group
+│ │ ├── layout.tsx # Shared layout
 │   │   ├── dashboard/
 │   │   │   └── page.tsx
 │   │   └── users/
@@ -52,72 +52,72 @@ src/
 │       └── users/
 │           └── route.ts
 │
-├── components/                 # 共享组件
-├── lib/                        # 工具、配置
+├── components/ # Shared components
+├── lib/ # Tools, configuration
 ├── hooks/
 ├── services/
 └── types/
 ```
 
-## 渲染模式
+## Rendering mode
 
-| 模式    | 使用场景         | 实现方式                                        |
+| Patterns | Usage scenarios | Implementation methods |
 | ------- | ---------------- | ----------------------------------------------- |
-| **SSR** | 动态、需实时数据 | 默认，`fetch` 不缓存或 `cache: 'no-store'`      |
-| **SSG** | 静态内容         | `generateStaticParams` + 静态 `fetch`           |
-| **ISR** | 定期更新         | `revalidate` 或 `revalidatePath`                |
-| **CSR** | 客户端交互       | `'use client'` + `useEffect` 或 SWR/React Query |
+| **SSR** | Dynamic, real-time data required | Default, `fetch` does not cache or `cache: 'no-store'` |
+| **SSG** | Static content | `generateStaticParams` + static `fetch` |
+| **ISR** | Periodically updated | `revalidate` or `revalidatePath` |
+| **CSR** | Client interaction | `'use client'` + `useEffect` or SWR/React Query |
 
-## 数据获取
+## Data acquisition
 
-- 服务端组件：直接 `async` 或 `fetch`，不暴露 `useEffect`
-- 客户端组件：`useEffect` + `useState`，或 SWR / React Query
-- 优先在服务端获取数据，减少客户端水合
-- 使用 `loading.tsx` 和 Suspense 包裹异步区块，提供流式体验
-- 缓存策略要写清 `force-cache`、`no-store`、`revalidate`、tag/path revalidation 或用户私有数据约束
-- 任何会让路由从静态变动态的读取（cookies、headers、searchParams、未缓存 fetch）都要说明原因和验证方式
+- Server component: directly `async` or `fetch`, without exposing `useEffect`
+- Client component: `useEffect` + `useState`, or SWR / React Query
+- Prioritize data acquisition on the server side to reduce hydration on the client side
+- Use `loading.tsx` and Suspense to wrap asynchronous blocks to provide streaming experience
+- The cache policy must include `force-cache`, `no-store`, `revalidate`, tag/path revalidation or user private data constraints
+- Any read that will change the route from static to dynamic (cookies, headers, searchParams, uncached fetch) must explain the reason and verification method
 
-## 路由与布局
+## Routing and layout
 
-- 路由组 `(auth)` 不改变 URL，只影响布局
-- 动态路由 `[id]` 配合 `generateStaticParams` 做 SSG
-- `layout.tsx` 包裹子路由，共享 UI 与布局
-- `page.tsx` 为叶子路由，不可嵌套
+- Routing group `(auth)` does not change the URL, only affects the layout
+- Dynamic routing `[id]` cooperates with `generateStaticParams` to do SSG
+- `layout.tsx` wraps sub-routes to share UI and layout
+- `page.tsx` is a leaf route and cannot be nested
 
-## 中间件
+## Middleware
 
-- 放在 `middleware.ts` 根目录
-- 用于鉴权、重定向、rewrite、Header 修改
-- 尽量短小，避免阻塞请求
+- Place it in the root directory of `middleware.ts`
+- Used for authentication, redirection, rewrite, and Header modification
+- Keep it as short as possible to avoid blocking requests
 
-## 元数据与 SEO
+## Metadata and SEO
 
-- 使用 `metadata` 或 `generateMetadata` 导出
-- 支持 `title`、`description`、`openGraph`、`twitter` 等
-- 动态路由用 `generateMetadata(params)` 生成
+- Export using `metadata` or `generateMetadata`
+- Supports `title`, `description`, `openGraph`, `twitter`, etc.
+- Dynamic routes are generated using `generateMetadata(params)`
 
 ## Constraints
 
-- 服务端组件默认，仅在需要客户端交互时加 `'use client'`
-- 不在服务端组件中直接使用 `useState`、`useEffect`、浏览器 API
-- 敏感逻辑（如鉴权）放在服务端或 API Route，不暴露在客户端
-- 图片使用 `next/image`，字体使用 `next/font`
-- 不把密钥、内部 API 地址或服务端 token 放入 `NEXT_PUBLIC_` 环境变量。
-- 不让大型动效库、3D 场景、富文本编辑器或地图 SDK 进入根布局同步 bundle。
-- 首屏媒体必须有确定尺寸、真实资源和合理 priority；不要用远程占位图撑布局。
-- 不在没有指标、响应头、构建输出或路由行为证据时断言某路由“已缓存”或“必须动态”。
-- Middleware 只处理路由级轻量决策，不承载重型鉴权查询、日志批处理或可放到 route handler 的业务逻辑。
+- Server component defaults, add `'use client'` only when client interaction is required.
+- Do not use `useState`, `useEffect`, and browser API directly in server components
+- Sensitive logic (such as authentication) is placed on the server or API Route and is not exposed to the client
+- Use `next/image` for images and `next/font` for fonts
+- Do not put keys, internal API addresses or server tokens in the `NEXT_PUBLIC_` environment variable.
+- Don't let large animation libraries, 3D scenes, rich text editors or map SDKs go into the root layout sync bundle.
+- The first screen media must have a certain size, real resources and reasonable priority; do not use remote placeholder images to support the layout.
+- Don't assert that a route is "cached" or "must be dynamic" without evidence of metrics, response headers, build output, or route behavior.
+- Middleware only handles lightweight decision-making at the routing level and does not carry heavy authentication queries, log batch processing, or business logic that can be placed in the route handler.
 
-## 与客户端 UI 模式的分工
+## Division of labor with client UI mode
 
-- **服务端**：渲染模式、数据获取与缓存、`loading.tsx` / `error.tsx`、路由与布局等以本 skill 为准。
-- **`'use client'` 组件**：组合与复合组件、表单、客户端状态、列表虚拟化、动效与键盘/焦点等，与纯 React 项目一致，遵循项目中的 React 规则（如 `.claude/rules/fec-react.md`）。
-- **权限与客户端数据**：鉴权、RBAC、redirect、客户端 server state 和缓存失效应按对应专项 workflow 处理；Next 服务端 fetch/cache 仍以本 skill 为准。
+- **Server**: Rendering mode, data acquisition and caching, `loading.tsx` / `error.tsx`, routing and layout, etc. are subject to this skill.
+- **`'use client'` component**: combined and composite components, forms, client state, list virtualization, animation and keyboard/focus, etc., consistent with pure React projects, following the React rules in the project (such as `.claude/rules/fec-react.md`).
+- **Permissions and client data**: Authentication, RBAC, redirect, client server state, and cache failure should be handled according to the corresponding special workflow; Next server fetch/cache is still subject to this skill.
 
 ## Expected Output
 
-- 页面组件按 App Router 约定组织（`app/` 目录、`page.tsx`、`layout.tsx`、`loading.tsx`、`error.tsx`）
-- 渲染模式选择正确（SSR/SSG/ISR/CSR），数据获取路径清晰
-- 元数据和 SEO 配置完整（title、description、openGraph）
-- 敏感逻辑在服务端，客户端组件仅处理交互
-- 缓存、动态渲染和首屏 bundle 决策有可复查证据，性能风险可分流到专项性能 workflow
+- Page components are organized according to App Router conventions (`app/` directory, `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`)
+- The rendering mode is selected correctly (SSR/SSG/ISR/CSR) and the data acquisition path is clear
+- Complete metadata and SEO configuration (title, description, openGraph)
+- Sensitive logic is on the server side, client components only handle interactions
+- There is reviewable evidence for caching, dynamic rendering and above-the-fold bundle decisions, and performance risks can be offloaded to dedicated performance workflows

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

@@ -3,29 +3,29 @@ name: fec-nuxt-project-standard
 description: Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chinese triggers include Nuxt, Nuxt 3.
 ---
 
-# Nuxt 3 项目规范
+# Nuxt 3 Project Specifications
 
-适用于使用 Nuxt 3 + Vue 3 + TypeScript 的仓库。
+For repositories using Nuxt 3 + Vue 3 + TypeScript.
 
 ## Purpose
 
-规范 Nuxt 3 项目中 SSR/SSG 渲染模式、组合式 API、自动导入、数据获取、路由中间件和模块插件的工程实践，确保约定式开发和类型安全。
+Standardize the engineering practices of SSR/SSG rendering mode, combined API, automatic import, data acquisition, routing middleware and module plug-ins in the Nuxt 3 project to ensure conventional development and type safety.
 
 ## Procedure
 
-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。
+1. First identify whether the target belongs to Nuxt pages/layouts, rendering mode, data acquisition, route middleware, plugin/module or server route.
+2. Clarify SSR / SSG / SPA selection to avoid server-side executable code relying on `window` or `document`.
+3. For data acquisition, Nuxt’s `useFetch` / `useAsyncData` is used first, and the hydration consistency is checked.
+4. Route authentication, redirection and permission issues are aligned with the route protection workflow.
+5. Common Vue component architecture issues are offloaded to the Vue project workflow.
 
-## 项目结构
+## Project structure
 
 ```
-├── app.vue                    # 根组件
-├── nuxt.config.ts              # Nuxt 配置
+├── app.vue # Root component
+├── nuxt.config.ts # Nuxt configuration
 │
-├── pages/                     # 基于文件的路由
+├── pages/ # File-based routing
 │   ├── index.vue               # /
 │   ├── login.vue               # /login
 │   ├── dashboard/
@@ -33,90 +33,90 @@ description: Use when creating or reviewing Nuxt 3 projects, file routes, pages,
 │   │   └── users/
 │   │       ├── index.vue       # /dashboard/users
 │   │       └── [id].vue       # /dashboard/users/:id
-│   └── [...slug].vue          # 捕获所有
+│ └── [...slug].vue # Capture all
 │
-├── layouts/                   # 布局
+├── layouts/ # layout
 │   ├── default.vue
 │   └── auth.vue
 │
-├── components/                # 自动导入组件
+├── components/ # Automatically import components
 │   ├── Button/
 │   │   └── Button.vue
 │   └── AppHeader.vue
 │
-├── composables/               # 组合式函数（自动导入）
+├── composables/ # Combined functions (automatically imported)
 │   ├── useAuth.ts
 │   └── useFetch.ts
 │
-├── server/                    # 服务端 API
-│   ├── api/                   # API 路由
+├── server/ # Server API
+│ ├── api/ # API routing
 │   │   └── users/
 │   │       └── index.get.ts
-│   ├── middleware/            # 服务端中间件
-│   └── utils/                 # 服务端工具
+│ ├── middleware/ # Server-side middleware
+│ └── utils/ # Server-side tools
 │
-├── plugins/                   # 插件
+├── plugins/ # Plug-in
 │   └── i18n.client.ts
 │
-├── middleware/                # 路由中间件
+├── middleware/ # Routing middleware
 │   └── auth.ts
 │
-├── public/                    # 静态资源
-├── assets/                    # 需构建的资源
-└── types/                     # 类型定义
+├── public/ # Static resources
+├── assets/ # Resources to be built
+└── types/ # Type definition
 ```
 
-## 渲染模式
+## Rendering mode
 
-| 模式    | 配置            | 说明           |
+| Mode | Configuration | Description |
 | ------- | --------------- | -------------- |
-| **SSR** | 默认            | `ssr: true`    |
-| **SSG** | `nuxt generate` | 预渲染所有页面 |
-| **SPA** | `ssr: false`    | 纯客户端渲染   |
+| **SSR** | Default | `ssr: true` |
+| **SSG** | `nuxt generate` | Pre-render all pages |
+| **SPA** | `ssr: false` | Pure client-side rendering |
 
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  ssr: true, // 或 false
+  ssr: true, // or false
 });
 ```
 
-## 数据获取
+## Data acquisition
 
-- `useFetch` / `useAsyncData`：服务端 + 客户端，自动去重
-- `$fetch`：直接请求，适合服务端或一次性调用
-- `useLazyAsyncData`：不阻塞导航，适合非首屏
-- 避免在 `setup` 顶层混用同步/异步逻辑导致水合不匹配
+- `useFetch` / `useAsyncData`: server + client, automatic deduplication
+- `$fetch`: direct request, suitable for server or one-time call
+- `useLazyAsyncData`: does not block navigation, suitable for non-first screen
+- Avoid mixing synchronous/asynchronous logic at the top level of `setup` causing hydration mismatch
 
-## 路由与布局
+## Routing and layout
 
-- `pages/` 下文件自动生成路由
-- 动态路由：`[id].vue`、`[...slug].vue`
-- 布局：`layout` 选项或 `layouts/default.vue` 默认
-- 嵌套路由：`pages/parent/child.vue` 需配合 `NuxtPage`
+- Automatically generate routes for files under `pages/`
+- Dynamic routing: `[id].vue`, `[...slug].vue`
+- Layout: `layout` option or `layouts/default.vue` default
+- Nested routing: `pages/parent/child.vue` needs to be combined with `NuxtPage`
 
-## 中间件
+## Middleware
 
-- `middleware/` 下文件自动注册
-- 页面级：`definePageMeta({ middleware: ['auth'] })`
-- 全局：`nuxt.config.ts` 的 `router.middleware`
-- 服务端中间件：`server/middleware/`
+- Automatically register files under `middleware/`
+- Page level: `definePageMeta({ middleware: ['auth'] })`
+- Global: `router.middleware` of `nuxt.config.ts`
+- Server-side middleware: `server/middleware/`
 
-## 插件与模块
+## Plug-ins and modules
 
-- 插件：`plugins/*.ts`，支持 `.client`、`.server` 后缀
-- 模块：`modules/` 或 `node_modules`，在 `nuxt.config` 中 `modules: []`
+- Plug-in: `plugins/*.ts`, supports `.client`, `.server` suffixes
+- Modules: `modules/` or `node_modules`, in `nuxt.config` `modules: []`
 
 ## Constraints
 
-- 服务端可访问的代码不要依赖 `window`、`document`
-- 使用 `useState` 共享状态时注意 SSR 序列化
-- 图片使用 `NuxtImg`，链接使用 `NuxtLink`
-- 避免在 `setup` 顶层使用 `await` 导致阻塞，优先用 `useAsyncData` / `useFetch`
+- Server-accessible code should not rely on `window` or `document`
+- Be careful about SSR serialization when using `useState` to share state
+- Use `NuxtImg` for images and `NuxtLink` for links
+- Avoid using `await` at the top level of `setup` which will cause blocking. Use `useAsyncData` / `useFetch` first
 
 ## Expected Output
 
-- 页面按 `pages/` 约定式路由组织，动态路由正确配置
-- 渲染模式（SSR/SSG/SPA）选择正确，`nuxt.config.ts` 配置清晰
-- 数据获取使用 `useFetch` / `useAsyncData`，自动去重和水合
-- Composables 和组件自动导入正确，服务端/客户端边界清晰
+- Pages are organized according to `pages/` conventional routing, and dynamic routing is correctly configured
+- The rendering mode (SSR/SSG/SPA) is correctly selected and the `nuxt.config.ts` configuration is clear
+- Data acquisition uses `useFetch` / `useAsyncData`, automatic deduplication and hydration
+- Composables and components are automatically imported correctly, and the server/client boundary is clear