@bovinphang/frontend-craft 2.7.0 → 2.9.0

package/skills/fec-state-management/SKILL.md

@@ -1,28 +1,28 @@
 ---
 name: fec-state-management
-description: Use when choosing, implementing, reviewing, or refactoring frontend state ownership across React, Vue, Next.js, Nuxt, URL state, server state, form state, browser persistence, or global stores. Prefer narrower skills for TanStack Query cache details, browser storage persistence, or form validation internals; Chinese triggers include 状态管理, 状态归属, store 选型.
+description: Use when choosing, implementing, reviewing, or refactoring frontend state ownership across React, Vue, Next.js, Nuxt, URL state, server state, form state, browser persistence, or global stores. Prefer narrower skills for TanStack Query cache details, browser storage persistence, or form validation internals; Chinese triggers include state management, state ownership, store selection.
 ---
 
-# 前端状态管理
+# Front-end status management
 
 ## Purpose
 
-为前端状态确定清晰归属，避免全局 store 膨胀、重复缓存和派生状态同步错误。
+Determine clear ownership of front-end state to avoid global store bloat, duplicate caching, and derived state synchronization errors.
 
 ## Procedure
 
-### 1. 先分类状态来源
+### 1. Classify status sources first
 
-不要先选 Redux、Zustand、Pinia 或 Context。先把每个状态标到唯一归属，再决定工具。
+Don't choose Redux, Zustand, Pinia or Context first. First mark each state to its unique owner, and then decide on the tool.
 
-| 状态类型         | 典型例子                             | 默认归属                 |
+| Status Type | Typical Example | Default Attribution |
 | ---------------- | ------------------------------------ | ------------------------ |
-| 本地 UI 状态     | 弹窗开关、tab、展开行、hover 编辑态  | 组件内 state / ref       |
-| 表单状态         | 输入值、脏字段、校验错误、提交中     | 表单库或表单组件         |
-| 服务端状态       | 列表、详情、分页结果、远程错误       | 请求缓存库               |
-| URL 状态         | 搜索词、筛选、排序、页码、选中 tab   | 路由参数 / search params |
-| 全局客户端状态   | 登录用户、主题、权限快照、购物车草稿 | 全局 store               |
-| 浏览器持久化状态 | 跨刷新保留的草稿、偏好、离线队列     | 存储层 + 状态适配器      |
+| Local UI state | Pop-up window switch, tab, expand row, hover editing state | In-component state / ref |
+| Form status | Input value, dirty field, validation error, submitting | Form library or form component |
+| Server status | List, details, paging results, remote errors | Request cache library |
+| URL status | Search terms, filter, sort, page number, selected tab | Routing parameters / search params |
+| Global client status | Login users, topics, permission snapshots, shopping cart drafts | Global store |
+| Browser persistent state | Drafts, preferences, offline queues retained across refreshes | Storage layer + state adapter |
 
 ```tsx
 type ReportsStateMap = {
@@ -34,9 +34,9 @@ type ReportsStateMap = {
 };
 ```
 
-### 2. 保持最小状态
+### 2. Keep it minimal
 
-可从 props、server state、URL 或已有 state 推导出来的值，不要另存一份。
+Do not save a new copy of a value that can be inferred from props, server state, URL, or existing state.
 
 ```tsx
 interface Invoice {
@@ -51,9 +51,9 @@ function InvoiceList({ invoices }: { invoices: Invoice[] }) {
 }
 ```
 
-### 3. 选择 React 全局状态方案
+### 3. Select the React global state solution
 
-React 中优先本地化和组合；只有跨页面、跨 feature 或需要统一动作时才引入全局 store。
+Priority is given to localization and combination in React; the global store is only introduced when cross-page, cross-feature or unified actions are required.
 
 ```tsx
 import { create } from "zustand";
@@ -69,17 +69,17 @@ export const useWorkspaceStore = create<WorkspaceState>((set) => ({
 }));
 ```
 
-决策顺序：
+Decision order:
 
-1. 只在一个组件或一个小子树使用：`useState` / `useReducer`。
-2. 低频全局配置或依赖注入：Context。
-3. 中等复杂业务状态：Zustand 或 Jotai，按仓库现有选型优先。
-4. 大型应用、严格动作流、审计或时间旅行调试：Redux Toolkit。
-5. 远程数据：使用数据获取 skill 管理 query key、缓存和失效策略。
+1. Use only in one component or a small subtree: `useState` / `useReducer`.
+2. Low-frequency global configuration or dependency injection: Context.
+3. Moderately complex business status: Zustand or Jotai, priority will be given based on the existing selection of the warehouse.
+4. Large applications, strict action flow, auditing or time travel debugging: Redux Toolkit.
+5. Remote data: Use the data acquisition skill to manage query keys, cache and invalidation policies.
 
-### 4. 选择 Vue 全局状态方案
+### 4. Select Vue global state solution
 
-Vue 3 中，局部跨层级传递使用 `provide/inject`；全局业务状态使用 Pinia 或项目既有 store。
+In Vue 3, use `provide/inject` for local cross-level transfer; use Pinia or the existing store of the project for global business status.
 
 ```ts
 import { computed, readonly, ref } from "vue";
@@ -101,9 +101,9 @@ export const useSessionStore = defineStore("session", () => {
 });
 ```
 
-### 5. 明确状态边界和迁移步骤
+### 5. Clarify status boundaries and migration steps
 
-重构状态时先做状态清单，再逐步移动读写入口。每一步都应保持行为可验证。
+When reconstructing the state, first make a state list, and then gradually move the read and write entries. Each step should keep the behavior verifiable.
 
 ```ts
 interface StateMigrationItem {
@@ -123,18 +123,18 @@ const migrationPlan: StateMigrationItem[] = [
 ];
 ```
 
-## 详细参考
+## Detailed reference
 
-需要 Store 形状示例、选择器模式、URL 状态同步、持久化适配器、SSR 边界或审查清单时，加载 [references/state-patterns.md](references/state-patterns.md)。
+Load [references/state-patterns.md](references/state-patterns.md) when you need Store shape examples, selector patterns, URL state synchronization, persistence adapters, SSR boundaries, or review checklists.
 
 ## Constraints
 
-- 不把服务端响应复制到全局 store；缓存、失效和重试归数据获取层。
-- 不把表单每个字段提升到全局 store；跨步骤共享也优先由表单上下文或提交草稿适配器处理。
-- 不用 Context 承载高频变化的大对象；会扩大重渲染范围。
-- 持久化状态必须明确字段白名单、版本号、过期策略和敏感数据排除。
-- SSR 场景不要在模块顶层创建带用户数据的单例 store。
+- Do not copy the server response to the global store; caching, invalidation and retries belong to the data acquisition layer.
+- Do not promote each field of the form to the global store; cross-step sharing is also handled first by the form context or submit draft adapter.
+- No need to use Context to carry large objects that change frequently; it will expand the re-rendering range.
+- Persistence state must specify field whitelist, version number, expiration policy and sensitive data exclusion.
+- In SSR scenarios, do not create a singleton store with user data at the top level of the module.
 
 ## Expected Output
 
-产出状态归属清单、选型理由、store/API 边界和验证步骤。实现时应保留 loading/error/empty、刷新、回退、跨路由和权限变化等关键行为。
+Output status attribution list, selection reasons, store/API boundaries and verification steps. Key behaviors such as loading/error/empty, refresh, rollback, cross-routing, and permission changes should be retained during implementation.

package/skills/fec-state-management/references/state-patterns.md

@@ -1,15 +1,15 @@
-# 状态管理模式
+#State management mode
 
-## 所有权审查清单
+## Ownership Review Checklist
 
-- 每个状态字段有唯一归属：本地状态、表单状态、服务端缓存、URL 状态、全局 Store 或浏览器持久化。
-- 派生值由源状态计算得出，而不是通过 effect 或 watcher 手动同步。
-- URL 状态用于可分享、刷新后需保留的视图状态，如筛选、搜索、排序和分页。
-- 服务端数据保留在请求缓存中；全局 Store 仅存放选中的 ID、本地偏好或乐观更新提示。
-- 持久化的客户端状态需有白名单、schema 版本号、迁移路径和敏感字段排除规则。
-- Store 的 action 以领域事件命名，而非组件处理器命名。
+- Each status field has a unique ownership: local status, form status, server-side cache, URL status, global Store or browser persistence.
+- Derived values are calculated from the source state rather than manually synchronized via effects or watchers.
+- URL state is used for view states that are shareable and need to be retained after refresh, such as filtering, searching, sorting, and paging.
+- Server-side data is kept in the request cache; the global Store only stores selected IDs, local preferences, or optimistic update prompts.
+- Persistent client state requires a whitelist, schema version number, migration path and sensitive field exclusion rules.
+- Store actions are named after domain events, not component processors.
 
-## React Store 形状示例
+## React Store shape example
 
 ```tsx
 import { create } from "zustand";
@@ -41,7 +41,7 @@ export const useCartStore = create<CartState>()(
 );
 ```
 
-选择器应尽可能返回稳定的原始值或经过 memo 的切片：
+Selectors should return stable raw values or memo-encoded slices whenever possible:
 
 ```tsx
 const itemCount = useCartStore((state) =>
@@ -49,9 +49,9 @@ const itemCount = useCartStore((state) =>
 );
 ```
 
-## URL 状态边界
+## URL status boundaries
 
-当另一个用户应能打开相同视图，或刷新后需要保留视图时，使用 URL 状态。
+Use URL state when another user should be able to open the same view, or when the view needs to be preserved after a refresh.
 
 ```tsx
 import { useSearchParams } from "react-router-dom";
@@ -72,9 +72,9 @@ export function useReportFilters() {
 }
 ```
 
-## 持久化适配器边界
+## Persistence adapter boundary
 
-仅持久化稳定的客户端偏好设置或非敏感草稿。序列化逻辑放在组件外部。
+Only persist stable client preferences or non-sensitive drafts. Serialization logic is placed outside the component.
 
 ```ts
 interface PersistedGridState {
@@ -101,9 +101,9 @@ export function writeGridState(state: PersistedGridState): void {
 }
 ```
 
-## SSR 与请求隔离
+## SSR is isolated from requests
 
-- 当状态可能包含用户数据时，每次请求需创建独立的 Store。
-- 服务端渲染期间不要读取 `window`、`localStorage` 或 `document`。
-- 水合后再加载持久化偏好，并在水合前提供确定性默认值。
-- 服务端缓存脱水与纯客户端全局 Store 分开处理。
+- When the state may contain user data, a separate Store needs to be created for each request.
+- Do not read `window`, `localStorage` or `document` during server rendering.
+- Reload persistence preferences after hydration and provide deterministic defaults before hydration.
+- Server-side cache dehydration is handled separately from pure client-side global Store.

package/skills/fec-storybook-component-doc/SKILL.md

@@ -1,37 +1,37 @@
 ---
 name: fec-storybook-component-doc
-description: Use when setting up or reviewing Storybook component documentation, design-system presentation, isolated component state previews, stories, addons, decorators, MDX docs, component-state interaction checks, visual baselines, or Chromatic. For real-browser cross-page journeys or broader coverage planning, choose the matching testing workflow first; Chinese triggers include Storybook, 组件文档, Design System, 视觉回归.
+description: Use when setting up or reviewing Storybook component documentation, design-system presentation, isolated component state previews, stories, addons, decorators, MDX docs, component-state interaction checks, visual baselines, or Chromatic. For real-browser cross-page journeys or broader coverage planning, choose the matching testing workflow first; Chinese triggers include Storybook, component documentation, Design System, visual regression.
 ---
 
-# Storybook 组件文档化
+# Storybook component documentation
 
 ## Purpose
 
-为 UI 组件建立文档化、设计系统展示和隔离状态预览环境；交互与视觉测试只覆盖 Storybook 场景内的组件状态。
+Establish documentation, design system display and isolated state preview environment for UI components; interaction and visual testing only cover component states within the Storybook scene.
 
 ## Procedure
 
-1. 初始化或识别现有 Storybook 配置，沿用项目框架适配器、stories glob、主题和构建命令。
-2. 每个组件的 Story 覆盖默认态、主要变体、尺寸、语义 tone、disabled、loading、error、empty、selected、invalid 和关键边缘状态。
-3. 依赖 Router、Store、i18n、ThemeProvider 的组件用 decorators 包裹，不在 Story 中复制应用入口。
-4. 复杂组件用 MDX 补充使用说明、Props、slots/children、variant 矩阵、状态示例、可访问性要求和源码展示。
-5. 需要自动化时接入 interaction tests、addon-a11y、Chromatic 或 Storybook Test Runner；这些能力服务于组件文档和设计系统展示，不承接跨页业务旅程。
-6. 设计系统组件应记录 token 来源、Tailwind/class 变体、暗色模式、响应式尺寸和不支持的组合，避免消费者靠猜测拼装。
+1. Initialize or identify an existing Storybook configuration, inheriting the project framework adapter, stories globs, themes, and build commands.
+2. Each component's Story covers default state, main variant, size, semantic tone, disabled, loading, error, empty, selected, invalid and key edge states.
+3. Components that rely on Router, Store, i18n, and ThemeProvider are wrapped with decorators and do not copy the application entry in Story.
+4. Use MDX to supplement complex components with usage instructions, Props, slots/children, variant matrices, status examples, accessibility requirements and source code display.
+5. When automation is required, connect interaction tests, addon-a11y, Chromatic or Storybook Test Runner; these capabilities serve component documentation and design system display and do not undertake cross-page business journeys.
+6. Design system components should record token sources, Tailwind/class variants, dark modes, responsive sizes, and unsupported combinations to avoid consumers guessing at assembly.
 
-## 详细参考
+## Detailed reference
 
-- 需要 `main.ts`、`preview.ts`、stories、decorators、MDX、交互测试和视觉回归示例时，加载 [references/story-patterns.md](references/story-patterns.md)。
+- Load [references/story-patterns.md](references/story-patterns.md) when you need `main.ts`, `preview.ts`, stories, decorators, MDX, interaction tests and visual regression examples.
 
 ## Constraints
 
-- Story 需随组件 prop 变更同步更新。
-- Provider 依赖必须通过 decorator 补齐。
-- Storybook 构建产物 `storybook-static/` 不应提交到 Git。
-- Storybook 用于开发和组件文档，不替代生产页面 SEO。
-- Storybook 视觉基线用于组件状态；跨页面截图和真实路由流程分流到 E2E workflow。
-- 大型组件库需控制 stories glob 和 addon 开销。
-- 不用 Storybook 隐藏组件 API 问题；若变体组合爆炸，应先收敛组件职责或拆分组件。
+- Story needs to be updated synchronously with component prop changes.
+- Provider dependencies must be completed through decorators.
+- Storybook build product `storybook-static/` should not be committed to Git.
+- Storybook is used for development and component documentation and is not a replacement for production page SEO.
+- Storybook visual baseline for component state; cross-page screenshots and real routing processes are offloaded to E2E workflow.
+- Large component libraries need to control stories glob and addon overhead.
+- Don’t use Storybook to hide component API issues; if variant combinations explode, you should first converge component responsibilities or split components.
 
 ## Expected Output
 
-可交互的组件文档和设计系统展示站点，每个组件状态都有隔离预览，Props 表格可生成，关键 Storybook 场景有可选 play 测试或视觉回归基线。
+Interactive component documentation and design system showcase site with isolated previews of each component state, Props tables to generate, and key Storybook scenes with optional play testing or visual regression baselines.

package/skills/fec-storybook-component-doc/references/story-patterns.md

@@ -1,6 +1,6 @@
-# Storybook 配置与示例
+# Storybook configuration and examples
 
-## 初始化
+## Initialization
 
 ```bash
 npx storybook@latest init
@@ -75,22 +75,22 @@ import * as InputStories from "./Input.stories";
 
 <Meta of={InputStories} />
 
-# Input 输入框
+#Input input box
 
-用于用户文本输入，支持校验提示、前后缀图标、字数统计等。
+Used for user text input, supporting verification prompts, suffix and suffix icons, word count, etc.
 
-### 何时使用
+### When to use
 
-- 单行文本输入
-- 需要实时校验反馈的表单字段
+- Single line text input
+- Form fields that require real-time verification feedback
 
 <Canvas of={InputStories.Default} />
 
-### 属性
+### Properties
 
 <Controls />
 
-### 源码
+### Source code
 
 <Source of={InputStories.Default} />
 ```
@@ -103,9 +103,9 @@ import { expect, userEvent, within } from "@storybook/test";
 export const FormSubmission: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByLabelText("用户名"), "admin");
-    await userEvent.click(canvas.getByRole("button", { name: /登录/ }));
-    await expect(canvas.findByText("登录成功")).resolves.toBeInTheDocument();
+await userEvent.type(canvas.getByLabelText("username"), "admin");
+    await userEvent.click(canvas.getByRole("button", { name: /login/ }));
+    await expect(canvas.findByText("Login successful")).resolves.toBeInTheDocument();
   },
 };
 ```

package/skills/fec-svg-animation/SKILL.md

@@ -1,38 +1,38 @@
 ---
 name: fec-svg-animation
-description: Use when implementing or reviewing SVG animation, path drawing, icon motion, logo animation, illustration motion, micro-interactions, CSS/SMIL/Framer Motion/GSAP choices, motion accessibility, or fallback behavior; Chinese triggers include SVG 动画, 路径描边, 动效.
+description: Use when implementing or reviewing SVG animation, path drawing, icon motion, logo animation, illustration motion, micro-interactions, CSS/SMIL/Framer Motion/GSAP choices, motion accessibility, or fallback behavior; Chinese triggers include SVG animation, path stroke, animation.
 ---
 
-# SVG 动画实现
+# SVG animation implementation
 
 ## Purpose
 
-为 SVG 图标、插画和数据可视化提供可维护、可访问、性能可控的动画方案。
+Provide maintainable, accessible, and performance-controllable animation solutions for SVG icons, illustrations, and data visualizations.
 
 ## When to Use
 
-- 需要实现 SVG 图标、Logo、插画或路径描边动画。
-- 需要在 React/Vue 组件中接入 Framer Motion、GSAP 或 CSS 动画。
-- 需要根据 `prefers-reduced-motion` 提供动效降级。
-- 不用于复杂 3D/WebGL 场景；此类场景优先使用 Canvas / Three.js workflow。
+- SVG icon, logo, illustration or path stroke animation needs to be implemented.
+- Framer Motion, GSAP or CSS animation needs to be connected to React/Vue components.
+- Need to provide motion reduction according to `prefers-reduced-motion`.
+- Not used for complex 3D/WebGL scenes; for such scenes, Canvas / Three.js workflow is preferred.
 
 ## Procedure
 
-### 1. 选择动画方式
+### 1. Select animation mode
 
-按复杂度和运行时需求选型：
+Choose based on complexity and runtime requirements:
 
-| 场景 | 推荐 |
+| Scenario | Recommendation |
 | --- | --- |
 | hover/focus、opacity、transform | CSS animation/transition |
-| 路径描边、简单重复动效 | CSS + `stroke-dasharray` |
-| React 组件状态驱动动画 | Framer Motion |
-| 时间轴、复杂编排、滚动触发 | GSAP |
-| 需要保持零依赖的静态 SVG | CSS 或 SMIL |
+| Path stroke, simple repeating animation | CSS + `stroke-dasharray` |
+| React component state-driven animation | Framer Motion |
+| Timeline, complex arrangement, scrolling trigger | GSAP |
+| Need to keep static SVG with zero dependencies | CSS or SMIL |
 
-如果动效跨越页面转场、滚动叙事或复杂组件编排，应先按交互动效 workflow 判断强度、懒加载和 reduced-motion 策略；本 skill 只负责 SVG 图形本身的路径、形变和图标 motion。
+If the animation spans page transitions, scrolling narratives, or complex component arrangements, you should first judge the intensity, lazy loading, and reduced-motion strategies according to the interactive effects workflow; this skill is only responsible for the path, deformation, and icon motion of the SVG graphics themselves.
 
-### 2. 使用 CSS 实现路径描边
+### 2. Use CSS to implement path strokes
 
 ```tsx
 export function CheckmarkIcon() {
@@ -73,7 +73,7 @@ export function CheckmarkIcon() {
 }
 ```
 
-### 3. 在 React 中使用 Framer Motion
+### 3. Using Framer Motion in React
 
 ```tsx
 import { motion, useReducedMotion } from "framer-motion";
@@ -82,7 +82,7 @@ export function AnimatedSparkline({ path }: { path: string }) {
   const reduceMotion = useReducedMotion();
 
   return (
-    <svg viewBox="0 0 120 40" role="img" aria-label="趋势图">
+    <svg viewBox="0 0 120 40" role="img" aria-label="Trend Chart">
       <motion.path
         d={path}
         fill="none"
@@ -97,7 +97,7 @@ export function AnimatedSparkline({ path }: { path: string }) {
 }
 ```
 
-### 4. 使用 GSAP 编排复杂时间轴
+### 4. Use GSAP to orchestrate complex timelines
 
 ```tsx
 import { useLayoutEffect, useRef } from "react";
@@ -126,23 +126,23 @@ export function LogoReveal() {
 }
 ```
 
-### 5. 控制运行成本
+### 5. Control operating costs
 
-- 大型 SVG 拆成静态底图和少量可动画节点，不要让每个 path 都参与时间轴。
-- 图标库或 Lottie 替代方案必须按需加载，不进入所有页面的基础包。
-- 循环动画只在可见区域运行，页面隐藏或组件卸载时停止。
-- 移动端减少滤镜、mask、clipPath 和大量渐变叠加。
+- Split large SVG into static basemaps and a small number of animatable nodes. Do not let each path participate in the timeline.
+- Icon libraries or Lottie alternatives must be loaded on demand, without going into the base package for all pages.
+- The loop animation only runs in the visible area and stops when the page is hidden or the component is unloaded.
+- The mobile version reduces filters, masks, clipPaths and a large number of gradient overlays.
 
 ## Constraints
 
-- 优先动画 `transform`、`opacity` 和 SVG 路径属性；避免高频修改 layout 相关属性。
-- 交互控件必须保留可见 focus 状态，动画不能替代状态表达。
-- 所有非装饰性 SVG 必须有可访问名称；装饰性 SVG 使用 `aria-hidden="true"`。
-- 默认尊重 `prefers-reduced-motion`，复杂动效必须提供静态或弱动效降级。
-- 不要把大型 SVG 内联到频繁重渲染的组件中；提取为 memoized 组件或外部资源。
-- 不用动画改变可点击区域、阅读顺序或焦点位置。
-- 不让 SVG 滤镜、模糊、mask 或 clipPath 成为移动端掉帧主因；复杂效果需要设备降级。
+- Prioritize animation `transform`, `opacity` and SVG path attributes; avoid frequent modification of layout-related attributes.
+- Interactive controls must retain the visible focus state, and animation cannot replace state expression.
+- All non-decorative SVGs must have accessible names; decorative SVGs use `aria-hidden="true"`.
+- Default respects `prefers-reduced-motion`, complex animations must provide static or weak motion degradation.
+- Don't inline large SVGs into frequently re-rendered components; extract as memoized components or external resources.
+- Change clickable area, reading order or focus position without animation.
+- Don't let SVG filters, blur, mask or clipPath become the main cause of frame drops on mobile devices; complex effects require device downgrading.
 
 ## Expected Output
 
-产出一个可复用的 SVG 动画组件或样式方案，包含选型理由、动效降级和可访问性处理。验证时检查动画流畅、无布局抖动、键盘与 reduced-motion 场景可用。
+Produce a reusable SVG animation component or style solution, including selection reasons, animation degradation and accessibility processing. During verification, check that the animation is smooth, there is no layout jitter, and keyboard and reduced-motion scenes are available.

package/skills/fec-tailwind-design-system/SKILL.md

@@ -1,34 +1,34 @@
 ---
 name: fec-tailwind-design-system
-description: Use when designing, implementing, or reviewing Tailwind CSS design systems, token mapping, theme extension, utility class governance, component variants, dark mode, responsive utilities, safelists, or maintainable class composition; Chinese triggers include Tailwind, 设计 Token, 组件变体, 暗色模式, class 管理.
+description: Use when designing, implementing, or reviewing Tailwind CSS design systems, token mapping, theme extension, utility class governance, component variants, dark mode, responsive utilities, safelists, or maintainable class composition; Chinese triggers include Tailwind, design Token, component variants, dark mode, class management.
 ---
 
-# Tailwind 设计系统
+#Tailwind Design System
 
-适用于用 Tailwind CSS 承载产品设计系统、组件变体和主题规则的前端任务。需要具体配置、variant、class 组织和迁移细节时加载 [references/tailwind-system-patterns.md](references/tailwind-system-patterns.md)。
+Suitable for front-end tasks hosting product design systems, component variations, and theme rules with Tailwind CSS. Load [references/tailwind-system-patterns.md](references/tailwind-system-patterns.md) when specific configuration, variant, class organization and migration details are needed.
 
 ## Purpose
 
-让 Tailwind 项目中的 token、主题、组件变体和响应式样式可维护，而不是把一次性 utility class 散落到业务代码里。
+Make the tokens, themes, component variations, and responsive styles in the Tailwind project maintainable instead of scattering one-off utility classes into business code.
 
 ## Procedure
 
-1. 识别现状：确认 Tailwind 版本、配置位置、暗色模式策略、组件库、CSS 变量、设计 token 和 class 合并工具。
-2. 建立 token 边界：颜色、间距、圆角、阴影、字体、z-index 和断点优先从项目 token 或 `theme.extend` 派生。
-3. 设计组件变体：按钮、输入框、卡片、弹窗、表格等基础组件用集中 variant API 表达尺寸、语义、状态和密度。
-4. 控制 class 复杂度：重复组合沉淀为组件、slot、variant 或局部 helper；不要把长 class 字符串复制到多个页面。
-5. 处理主题和暗色模式：明确 `class`、`data-theme` 或 CSS 变量方案，避免首次渲染闪烁和对比度回归。
-6. 接入响应式：移动优先组织 utility；复杂布局交给响应式布局工作流，不要只靠堆叠断点前缀碰运气。
-7. 验证样式结果：检查 hover、active、focus-visible、disabled、loading、selected、invalid、dark 和不同断点。
+1. Identify the current situation: Confirm Tailwind version, configuration location, dark mode strategy, component library, CSS variables, design token and class merging tool.
+2. Establish token boundaries: color, spacing, rounded corners, shadow, font, z-index and breakpoints are first derived from the project token or `theme.extend`.
+3. Design component variants: Basic components such as buttons, input boxes, cards, pop-up windows, and tables use centralized variant APIs to express size, semantics, status, and density.
+4. Control class complexity: Repeated combinations are precipitated into components, slots, variants or local helpers; do not copy long class strings to multiple pages.
+5. Handle themes and dark modes: Explicit `class`, `data-theme` or CSS variable schemes to avoid first render flickering and contrast regression.
+6. Access responsiveness: mobile-first organization utility; leave complex layouts to responsive layout workflow, don’t just rely on stacked breakpoint prefixes to try your luck.
+7. Verify style results: check hover, active, focus-visible, disabled, loading, selected, invalid, dark and different breakpoints.
 
 ## Constraints
 
-- 不把 Tailwind class 当作设计系统本身；真正的系统是 token、组件 API、状态矩阵和使用约束。
-- 不为单个页面随意扩展全局 token；新增 token 必须有语义名称和复用场景。
-- 不使用拼接的动态 class 破坏构建扫描；必要时使用 safelist、映射表或 variant 工具。
-- 不在组件外部覆盖基础组件内部结构来实现变体。
-- 不让暗色模式只靠反色；状态色、边框、阴影、图表和图片都要重新检查。
+- Don't think of the Tailwind class as the design system itself; the real system is the token, component API, state matrix, and usage constraints.
+- Do not expand global tokens arbitrarily for a single page; new tokens must have semantic names and reuse scenarios.
+- Do not use spliced dynamic classes to break build scans; use safelist, mapping table or variant tools when necessary.
+- Do not override base component internals outside the component to implement variations.
+- Don't let dark mode rely solely on inverse colors; status colors, borders, shadows, charts, and images are all re-examined.
 
 ## Expected Output
 
-输出 Tailwind token 映射、主题配置边界、组件 variant 设计、class 复用策略、暗色模式和响应式验证结果。完成后样式应能被项目组件复用、可搜索、可测试，并与设计系统规则一致。
+Output Tailwind token mapping, theme configuration boundaries, component variant design, class reuse strategy, dark mode and responsive validation results. After completion, the style should be reusable by project components, searchable, testable, and consistent with the design system rules.

package/skills/fec-tailwind-design-system/references/tailwind-system-patterns.md

@@ -1,28 +1,28 @@
-# Tailwind 系统模式
+# Tailwind system mode
 
-## Token 映射
+## Token mapping
 
-优先使用语义化名称：
+Prefer using semantic names:
 
-| 需求 | 推荐 | 避免 |
+| Need | Recommend | Avoid |
 | ---- | ---- | ---- |
-| 品牌色 | `brand.600`, `--color-brand-primary` | 到处复制 `blue-600` |
-| 表面层级 | `surface.canvas`, `surface.panel` | 一次性灰色值 |
-| 圆角 | `radius.control`, `radius.panel` | 随意重复的具体值 |
-| 阴影 | `shadow.floating`, `shadow.focus` | 没有状态含义的装饰阴影 |
+| Brand color | `brand.600`, `--color-brand-primary` | Copy everywhere `blue-600` |
+| Surface level | `surface.canvas`, `surface.panel` | One-time gray value |
+| rounded corners | `radius.control`, `radius.panel` | optionally repeated specific values |
+| Shadow | `shadow.floating`, `shadow.focus` | Decorative shadow with no state meaning |
 
-如果项目已有 CSS 变量，把 Tailwind token 映射到这些变量，而不是重复维护字面量。
+If the project already has CSS variables, map Tailwind tokens to these variables instead of repeatedly maintaining literals.
 
-## Variant 归属
+## Variant Attribution
 
-长 class 组合应收敛到以下位置之一：
+Long class combinations should converge to one of the following locations:
 
-- 带 `variant`、`size`、`tone`、`density`、`state` props 的共享组件。
-- 复合组件的 slot 映射表。
-- CVA、tailwind-variants 或本地 `classNames` 映射等类型化 helper。
-- 只在一个模块内复用时，使用局部常量。
+- Shared components with `variant`, `size`, `tone`, `density`, `state` props.
+- Slot mapping table of composite components.
+- Typed helpers such as CVA, tailwind-variants or local `classNames` mappings.
+- Use local constants when reusing them within only one module.
 
-不要根据不受控的用户输入拼接 class 名。使用显式映射：
+Don't splice class names based on uncontrolled user input. Use explicit mapping:
 
 ```ts
 const toneClass = {
@@ -32,28 +32,28 @@ const toneClass = {
 } as const;
 ```
 
-## 暗色模式
+## Dark mode
 
-- 优先选择单一的项目级策略：`class`、`data-theme` 或 CSS 变量。
-- 如果应用支持手动切换主题，在 body 绘制前初始化已选主题，避免首屏先亮后暗或先暗后亮的主题闪烁。
-- 在亮色和暗色主题下都测试 disabled、focus、selected、invalid、chart 和 skeleton 状态。
-- 不要把降低透明度作为 disabled 的唯一提示；要保留对比度和可感知性。
-- Tailwind 项目使用 `darkMode: "class"` 或等价配置时，主题切换逻辑应同时维护根节点 class / data attribute，并持久化用户偏好。
-- CSS 变量方案中，Tailwind token 应引用语义变量；不要为亮色和暗色分别散落两套工具类字面量。
-- 在 `<head>` 或框架等价入口中放置极小同步初始化脚本时，只读取本地主题偏好和系统偏好，不执行业务逻辑、不访问服务端数据。
-- 暗色模式需复核图片亮度、阴影层级、表单控件、第三方组件、图表色板和 focus ring；不要只补背景色。
+- Prefer a single project-level strategy: `class`, `data-theme` or CSS variables.
+- If the application supports manual theme switching, initialize the selected theme before the body is drawn to avoid flickering of the first screen that first lights up and then darkens or first darkens and then lights up.
+- Test disabled, focus, selected, invalid, chart and skeleton states in both light and dark themes.
+- Don't use lowering transparency as the only hint of disabled; preserve contrast and perceptibility.
+- When the Tailwind project uses `darkMode: "class"` or equivalent configuration, the theme switching logic should maintain the root node class / data attribute and persist user preferences.
+- In the CSS variable scheme, Tailwind token should refer to semantic variables; do not scatter two sets of utility literals for light and dark colors.
+- When placing a minimal synchronization initialization script in `<head>` or a framework equivalent entry, only local theme preferences and system preferences are read, no business logic is executed, and no server-side data is accessed.
+- In dark mode, you need to review the image brightness, shadow level, form controls, third-party components, chart color palette and focus ring; don't just add the background color.
 
-## 响应式工具类
+## Responsive tool class
 
-- 默认 class 列表从移动端布局开始。
-- 只有信息架构变化时，才增加更大断点前缀。
-- 重复出现的响应式区块应沉淀为布局组件或 CSS 容器查询，不要反复复制同一串断点。
-- 控件、标签页、看板和数据单元格使用稳定尺寸，避免 hover 和 loading 状态造成布局跳动。
+- The default class list starts with mobile layout.
+- Only add larger breakpoint prefixes when the information architecture changes.
+- Recurring responsive blocks should be precipitated into layout components or CSS container queries, and do not duplicate the same string of breakpoints repeatedly.
+- Controls, tabs, dashboards and data cells use stable sizes to avoid layout jumps caused by hover and loading states.
 
-## 评审清单
+## Review Checklist
 
-- Token 值有语义角色，并且没有分叉既有设计规则。
-- 组件 variants 覆盖 loading、disabled、selected、invalid、focus-visible 和暗色模式。
-- 动态 class 可被静态扫描识别，或已安全加入 safelist。
-- Tailwind 工具类没有破坏可访问性、点击目标或 reduced-motion 要求。
-- 最终 UI 已在移动端、平板和桌面宽度检查过。
+- Token values have semantic roles and do not fork existing design rules.
+- Component variants cover loading, disabled, selected, invalid, focus-visible and dark mode.
+- Dynamic classes can be recognized by static scans, or have been safely added to the safelist.
+- Tailwind utility classes have no accessibility-breaking, click-targeting, or reduced-motion requirements.
+- Final UI checked in mobile, tablet and desktop widths.