@bovinphang/frontend-craft 2.7.0 → 2.8.0

package/skills/fec-vue3-project-standard/references/vue3-project-structure.md

@@ -1,40 +1,40 @@
 # Vue 3 project structure and component standards
 
-## 项目结构
+## Project structure
 
-以下为中大型 Vue 3 项目的业界最佳实践结构，按项目实际情况裁剪：
+The following is the industry's best practice structure for medium and large Vue 3 projects, tailored according to the actual situation of the project:
 
 ```
 src/
-├── app/                        # 应用入口与全局配置
-│   ├── App.vue                 # 根组件
-│   ├── main.ts                 # 应用启动入口
-│   └── router.ts               # 路由实例与配置
+├── app/ # Application entry and global configuration
+│ ├── App.vue # Root component
+│ ├── main.ts # Application startup entrance
+│ └── router.ts # Routing instance and configuration
 │
-├── pages/                      # 页面组件（与路由一一对应）
+├── pages/ # Page components (one-to-one correspondence with routing)
 │   ├── Dashboard/
 │   │   ├── DashboardPage.vue
-│   │   ├── components/         # 页面私有组件
-│   │   └── composables/        # 页面私有 composables
+│ │ ├── components/ # Page private components
+│ │ └── composables/ # Page private composables
 │   ├── UserList/
 │   └── Settings/
 │
-├── layouts/                    # 布局组件
-│   ├── MainLayout.vue          # 主布局（侧边栏 + 顶栏 + 内容区）
-│   ├── AuthLayout.vue          # 登录/注册页布局
-│   └── BlankLayout.vue         # 空白布局（错误页等）
+├── layouts/ # Layout component
+│ ├── MainLayout.vue # Main layout (sidebar + top bar + content area)
+│ ├── AuthLayout.vue # Login/registration page layout
+│ └── BlankLayout.vue # Blank layout (error page, etc.)
 │
-├── features/                   # 功能模块（按业务领域划分）
+├── features/ # Function modules (divided by business areas)
 │   ├── auth/
-│   │   ├── components/         # 模块组件
-│   │   ├── composables/        # 模块 composables
-│   │   ├── api.ts              # 模块 API 调用
-│   │   ├── types.ts            # 模块类型定义
-│   │   ├── constants.ts        # 模块常量
-│   │   └── index.ts            # 模块公开导出
+│ │ ├── components/ # Module components
+│ │ ├── composables/ # module composables
+│ │ ├── api.ts # Module API call
+│ │ ├── types.ts # Module type definition
+│ │ ├── constants.ts # Module constants
+│ │ └── index.ts # Module publicly exported
 │   └── order/
 │
-├── components/                 # 全局共享 UI 组件
+├── components/ # Globally shared UI components
 │   ├── AppButton/
 │   │   ├── AppButton.vue
 │   │   └── __tests__/
@@ -42,113 +42,113 @@ src/
 │   ├── AppForm/
 │   └── AppErrorBoundary/
 │
-├── composables/                # 全局共享 composables
+├── composables/ # Global shared composables
 │   ├── useAuth.ts
 │   ├── useDebounce.ts
 │   └── useMediaQuery.ts
 │
-├── services/                   # API 基础层
-│   ├── request.ts              # Axios/fetch 实例与拦截器
-│   └── endpoints/              # API 端点定义（如按领域拆分）
+├── services/ # API base layer
+│ ├── request.ts # Axios/fetch instance and interceptor
+│ └── endpoints/ # API endpoint definition (such as split by field)
 │
-├── stores/                     # Pinia 状态管理
+├── stores/ # Pinia status management
 │   ├── authStore.ts
 │   └── uiStore.ts
 │
-├── locales/                    # 国际化语言包
-│   ├── zh-CN.json              # 中文
-│   ├── en-US.json              # 英文
-│   └── index.ts                # i18n 实例初始化（vue-i18n）
-│
-├── assets/                     # 静态资源
-│   ├── images/                 # 图片（PNG、JPG、WebP）
-│   ├── icons/                  # SVG 图标
-│   └── fonts/                  # 自定义字体
-│
-├── config/                     # 应用配置
-│   ├── env.ts                  # 环境变量类型化封装
-│   └── features.ts             # Feature Flags 管理
-│
-├── types/                      # 全局共享类型
-│   ├── api.ts                  # API 响应/请求通用类型
-│   ├── models.ts               # 业务实体类型
-│   └── global.d.ts             # 全局类型扩展（组件类型、模块声明等）
-│
-├── utils/                      # 纯工具函数
-│   ├── format.ts               # 日期、数字、货币格式化
-│   ├── validators.ts           # 表单校验规则
-│   └── storage.ts              # LocalStorage / SessionStorage 封装
-│
-├── directives/                 # 自定义指令
-│   ├── vPermission.ts          # 权限指令
-│   └── vClickOutside.ts        # 点击外部关闭
-│
-├── plugins/                    # Vue 插件注册
-│   ├── i18n.ts                 # vue-i18n 插件配置
-│   └── index.ts                # 插件统一注册入口
-│
-├── styles/                     # 全局样式与主题
-│   ├── global.css              # 全局基础样式（reset / normalize）
-│   ├── variables.css           # CSS 变量（颜色、间距、字号）
-│   ├── breakpoints.ts          # 响应式断点常量
-│   └── themes/                 # 主题定义
-│       ├── light.css           # 亮色主题变量
-│       ├── dark.css            # 暗色主题变量
-│       └── index.ts            # 主题切换逻辑
-│
-└── constants/                  # 全局常量
-    ├── routes.ts               # 路由路径常量
-    └── config.ts               # 业务常量（分页大小、超时时间等）
+├── locales/ # International language pack
+│ ├── zh-CN.json # Simplified Chinese
+│ ├── en-US.json # English
+│ └── index.ts # i18n instance initialization (vue-i18n)
+│
+├── assets/ # Static resources
+│ ├── images/ # Pictures (PNG, JPG, WebP)
+│ ├── icons/ # SVG icon
+│ └── fonts/ # Custom fonts
+│
+├── config/ # Application configuration
+│ ├── env.ts # Typed encapsulation of environment variables
+│ └── features.ts # Feature Flags Management
+│
+├── types/ # Global shared types
+│ ├── api.ts # API response/request common type
+│ ├── models.ts #Business entity type
+│ └── global.d.ts # Global type extension (component type, module declaration, etc.)
+│
+├── utils/ # Pure utility function
+│ ├── format.ts # Date, number, currency formatting
+│ ├── validators.ts # Form validation rules
+│ └── storage.ts # LocalStorage / SessionStorage package
+│
+├── directives/ # Custom directives
+│ ├── vPermission.ts # Permission command
+│ └── vClickOutside.ts # Click outside to close
+│
+├── plugins/ # Vue plug-in registration
+│ ├── i18n.ts # vue-i18n plug-in configuration
+│ └── index.ts # Plug-in unified registration entrance
+│
+├── styles/ # Global styles and themes
+│ ├── global.css # Global basic style (reset/normalize)
+│ ├── variables.css # CSS variables (color, spacing, font size)
+│ ├── breakpoints.ts # Responsive breakpoint constants
+│ └── themes/ # theme definition
+│ ├── light.css # Light theme variable
+│ ├── dark.css # Dark theme variable
+│ └── index.ts # theme switching logic
+│
+└── constants/ # Global constants
+    ├── routes.ts #Routing path constants
+    └── config.ts #Business constants (paging size, timeout, etc.)
 ```
 
-### 关键原则
-
-- `pages/` 做路由映射和布局组合，不放业务逻辑
-- `layouts/` 定义页面骨架（侧边栏、顶栏、面包屑），由路由配置的 `component` 引用
-- `features/` 按业务领域划分，模块内自包含（components + composables + api + types）
-- `components/` 仅放无业务耦合的通用组件，可跨项目复用
-- `composables/` 仅放通用逻辑（防抖、媒体查询等），业务 composables 放到对应 feature 中
-- `locales/` 存放语言包 JSON 文件，模板中使用 `$t('key')` 而非硬编码文案
-- `assets/` 存放静态资源，图标优先使用 SVG，图片优先使用 WebP/AVIF
-- `config/` 封装环境变量和 Feature Flags，禁止组件中直接读取 `import.meta.env`
-- `styles/themes/` 通过 CSS 变量实现主题切换，组件中引用变量而非硬编码颜色
-- 每个模块通过 `index.ts` 管控公开 API，避免深层路径导入
-
-## 组件设计规范
-
-- 使用 `<script setup lang="ts">`
-- 明确使用 `defineProps` / `defineEmits` 并附带类型
-- 可复用逻辑优先提取到 composables
-- 保持 template 可读，避免过深条件嵌套
-- 优先使用计算属性，而不是重复维护状态
-- 避免构建大型单体组件；**单文件规模**见 `templates/shared/rules/fec-vue.md`「**组件文件规模**」（约 300 行内为佳，逾 500 行或复杂度过高拆子组件与 Composables）
-- 优先使用强类型的 props、emits 和暴露方法
-- 遵循仓库的文件与目录命名规范
-- 优先复用现有 UI 组件和 Token
-
-### 组件分层
+### Key Principles
+
+- `pages/` does route mapping and layout combination without putting business logic
+- `layouts/` defines the page skeleton (sidebar, top bar, breadcrumbs), referenced by the `component` of the routing configuration
+- `features/` is divided by business areas, self-contained within the module (components + composables + api + types)
+- `components/` only contains common components without business coupling and can be reused across projects
+- `composables/` only places common logic (anti-shake, media query, etc.), and business composables are placed in the corresponding feature
+- `locales/` stores language pack JSON files, use `$t('key')` in the template instead of hard-coded copy
+- `assets/` stores static resources, SVG is preferred for icons, and WebP/AVIF is preferred for images.
+- `config/` encapsulates environment variables and Feature Flags, prohibiting direct reading of `import.meta.env` in components
+- `styles/themes/` implements theme switching through CSS variables. Variables are referenced in components instead of hard-coded colors.
+- Each module controls the public API through `index.ts` to avoid deep path imports
+
+## Component design specifications
+
+- Use `<script setup lang="ts">`
+- Explicitly use `defineProps` / `defineEmits` with accompanying types
+- Reusable logic is first extracted to composables
+- Keep the template readable and avoid too deep nesting of conditions
+- Prefer using computed properties instead of repeatedly maintaining state
+- Avoid building large single components; **single file size** see `templates/shared/rules/fec-vue.md` "**component file size**" (approximately 300 lines or less, more than 500 lines or too complex to separate sub-components and Composables)
+- Prioritize the use of strongly typed props, emits and exposed methods
+- Follow the file and directory naming conventions of the warehouse
+- Prioritize reuse of existing UI components and tokens
+
+### Component layering
 
 ```
-页面组件 (Pages)          → 路由映射、布局组合
-  └── 容器组件 (Containers)  → 数据获取、状态编排
-       └── 业务组件 (Features) → 领域逻辑展示
-            └── 通用组件 (UI)   → 纯展示，无业务耦合
+Pages → Route mapping, layout combination
+  └── Container components (Containers) → Data acquisition, status orchestration
+       └── Business components (Features) → Domain logic display
+            └── Universal Component (UI) → Pure display, no business coupling
 ```
 
-## 注释规范
+## Comment specifications
 
-- **优先使用中文**：解释「为什么这样做」、业务约束、边界情况、非显而易见的权衡时，优先用中文撰写注释，便于团队与业务方阅读。
-- **与代码语言一致时的例外**：对接第三方协议字段名、HTTP 头、规范中的英文术语时，注释里可保留英文专有名词，必要时中英文并列说明。
-- **少而精**：能通过清晰命名与类型表达清楚的逻辑不写废话注释；复杂分支、临时兼容、性能取舍必须写清意图。
-- **公开 API**：composable 或模块的对外契约可用 JSDoc（`@param` / `@returns` / `@example`），说明用中文即可，除非仓库统一要求英文。
+- **Prefer using Chinese**: When explaining "why this is done", business constraints, boundary conditions, and non-obvious trade-offs, give priority to writing comments in Chinese to make it easier for the team and business parties to read.
+- **Exception when consistent with the code language**: When connecting third-party protocol field names, HTTP headers, and English terms in specifications, English proper nouns can be retained in the comments, and Chinese and English descriptions can be given when necessary.
+- **Less but more precise**: Can express clear logic through clear naming and types without writing nonsense comments; complex branches, temporary compatibility, and performance trade-offs must be clearly stated.
+- **Public API**: Composable or module external contracts can use JSDoc (`@param` / `@returns` / `@example`). The instructions can be in Chinese, unless the warehouse requires English.
 
-## TypeScript 规范
+## TypeScript Specification
 
-通用 TypeScript 工程规则由 `fec-typescript-project-standard` 负责，包括 `tsconfig`、strictness、DTO / view model 边界、`unknown` 收窄、public API 类型、声明产物和类型测试。
+Common TypeScript project rules are taken care of by `fec-typescript-project-standard`, including `tsconfig`, strictness, DTO / view model boundaries, `unknown` narrowing, public API types, declared artifacts, and type tests.
 
-Vue 规范只补充 SFC、Props / Emits、暴露方法、Provide / Inject 和 composable 响应性类型；复杂类型建模或跨框架类型契约先分流到 `fec-typescript-project-standard`。
+The Vue specification only supplements SFC, Props / Emits, exposed methods, Provide / Inject and composable reactive types; complex type modeling or cross-framework type contracts are first offloaded to `fec-typescript-project-standard`.
 
-### Vue 3 项目补充约定
+### Vue 3 project supplementary conventions
 
 ```vue
 <script setup lang="ts">
@@ -171,7 +171,7 @@ const emit = defineEmits<Emits>();
 </script>
 ```
 
-- Props 和 Emits 使用 TypeScript interface 定义
-- 使用 `withDefaults` 设置默认值
-- `defineExpose` 暴露的方法需有类型约束
+- Props and Emits are defined using the TypeScript interface
+- Use `withDefaults` to set default values
+- `defineExpose` exposed methods must have type constraints
 

package/skills/fec-vue3-project-standard/references/vue3-state-api-quality.md

@@ -1,18 +1,18 @@
 # Vue 3 state, API, and quality patterns
 
-## 状态管理（Pinia）
+## Status Management (Pinia)
 
-| 状态类型           | 推荐方案                      |
+| Status type | Recommended solution |
 | ------------------ | ----------------------------- |
-| 组件内临时 UI 状态 | `ref` / `reactive`            |
-| 跨组件共享业务状态 | Pinia store                   |
-| 服务端数据缓存     | VueQuery / 自定义 composable  |
-| URL 驱动状态       | 路由参数 / `useRoute().query` |
-| 表单状态           | VeeValidate / FormKit         |
+| Temporary UI state within the component | `ref` / `reactive` |
+| Sharing business status across components | Pinia store |
+| Server-side data cache | VueQuery / Custom composable |
+| URL driver status | Route parameters / `useRoute().query` |
+| Form Status | VeeValidate / FormKit |
 
-### Pinia Store 规范
+### Pinia Store Specifications
 
-使用 Composition API 风格（`setup store`）：
+Using Composition API style (`setup store`):
 
 ```typescript
 // stores/authStore.ts
@@ -39,16 +39,16 @@ export const useAuthStore = defineStore("auth", () => {
 });
 ```
 
-### Store 原则
+### Store Principles
 
-- 每个 store 职责单一，按领域拆分
-- 对外暴露 `readonly` 的状态，通过 action 修改
-- 不要在 store 中存放 UI 临时状态（modal 开关、表单输入等）
-- 服务端数据优先用请求库管理，而非手动存入 store
+- Each store has a single responsibility and is split by area.
+- Expose the status of `readonly` to the outside world and modify it through action
+- Do not store UI temporary states (modal switches, form inputs, etc.) in the store
+- Server-side data is first managed by the request library rather than manually stored in the store
 
-## API 层规范
+## API layer specification
 
-### 请求实例
+### Request instance
 
 ```typescript
 // services/request.ts
@@ -78,7 +78,7 @@ request.interceptors.response.use(
 );
 ```
 
-### API 函数
+### API functions
 
 ```typescript
 // features/user/api.ts
@@ -93,13 +93,13 @@ export function updateUser(id: string, data: UpdateUserDTO): Promise<User> {
 }
 ```
 
-- API 函数按 feature 组织，而非全部堆在一个文件
-- 请求参数和响应都有类型约束
-- 拦截器统一处理认证、错误格式化
+- API functions are organized by feature instead of all being piled in one file
+- Request parameters and responses have type constraints
+- The interceptor handles authentication and error formatting uniformly
 
-## 错误处理
+## Error handling
 
-### 全局错误捕获
+### Global error capture
 
 ```typescript
 // main.ts
@@ -108,13 +108,13 @@ app.config.errorHandler = (err, instance, info) => {
 };
 ```
 
-### 组件级错误
+### Component level errors
 
-- 使用 `onErrorCaptured` 在父组件中捕获子组件错误
-- 数据请求失败需有用户可见的提示和重试机制
-- 不要吞掉错误（空 catch 块）
+- Use `onErrorCaptured` to capture child component errors in the parent component
+- Failed data requests must have user-visible prompts and retry mechanisms
+- Don't swallow errors (empty catch block)
 
-## 自定义指令
+## Custom directive
 
 ```typescript
 // directives/vPermission.ts
@@ -128,30 +128,30 @@ export const vPermission: Directive<HTMLElement, string> = {
 };
 ```
 
-- 指令只处理 DOM 层面的操作
-- 业务逻辑不要放在指令中
-- 需要响应式更新时实现 `updated` 钩子
+- The directive only handles operations at the DOM level
+- Do not put business logic in instructions
+- Implement the `updated` hook when responsive updates are required
 
-## 样式规范
+## Style specification
 
-- 使用 `<style scoped>` 隔离样式
-- 深度选择器使用 `:deep()` 而非已废弃的 `::v-deep`
-- 与项目现有样式体系保持一致
-- 动态样式优先使用 `:class` / `:style` 绑定
-- 复杂主题切换使用 CSS 变量
-- 主题/全局变量通过 CSS 变量或 Token 管理
+- Use `<style scoped>` to isolate styles
+- Depth selector uses `:deep()` instead of the deprecated `::v-deep`
+- Be consistent with the existing style system of the project
+- Dynamic styles preferentially use `:class` / `:style` binding
+- Complex theme switching using CSS variables
+- Theme/global variables are managed through CSS variables or Token
 
-## 测试规范
+## Test specifications
 
-### 必须测试
+### Must be tested
 
-- 核心交互行为（点击、输入、提交）
-- 条件渲染（loading / error / empty / data）
-- Emits 的触发和 payload
-- 关键 composables 的返回值
-- Pinia store 的 action 和 getter
+- Core interaction behaviors (click, input, submit)
+- Conditional rendering (loading/error/empty/data)
+- Emits trigger and payload
+- Return value of key composables
+- Pinia store actions and getters
 
-### 测试风格
+### Test style
 
 ```typescript
 describe("UserForm", () => {
@@ -167,12 +167,12 @@ describe("UserForm", () => {
   it("should show validation error on empty submit", async () => {
     const wrapper = mount(UserForm);
     await wrapper.find("form").trigger("submit");
-    expect(wrapper.text()).toContain("用户名不能为空");
+    expect(wrapper.text()).toContain("Username cannot be empty");
   });
 });
 ```
 
-### Store 测试
+### Store Test
 
 ```typescript
 describe("authStore", () => {
@@ -187,30 +187,30 @@ describe("authStore", () => {
 ```
 
 
-## 反模式
-
-- 在模板驱动组件中内联大段业务逻辑
-- 本该用 computed 却使用大范围 watcher
-- 事件 payload 不明确
-- 在纯展示组件中直接混入原始 API 调用
-- ref 和 props 没有类型约束
-- 用 `watch` + 手动赋值模拟 computed
-- 在一个组件中混入无关职责
-- 用大范围全局样式覆盖去解决局部 UI 问题
-- 将所有状态推入 Pinia store，而非就近管理
-- 在 `components/` 中放业务耦合组件
-- 直接从 feature 内部深层路径导入，绕过 `index.ts`
-
-## 输出检查清单
-
-- [ ] 文件结构与项目约定一致（pages / features / components 分离）
-- [ ] 使用 `<script setup lang="ts">`
-- [ ] Props / Emits 类型完整
-- [ ] 解释性注释是否优先使用中文且点到要害
-- [ ] 可复用逻辑已提取到 composable
-- [ ] Loading / Error / Empty 状态均已处理
-- [ ] 路由组件使用动态 import 加载
-- [ ] 状态管理方案合理（就近原则）
-- [ ] API 调用有类型约束和统一错误处理
-- [ ] 样式使用 scoped 隔离
-- [ ] 关键行为有测试覆盖
+## Anti-pattern
+
+- Inline large sections of business logic in template-driven components
+- Used wide range watcher instead of computed
+- The event payload is unclear
+- Mix raw API calls directly into pure presentation components
+- ref and props have no type constraints
+- Use `watch` + manual assignment to simulate computed
+- Mixing unrelated responsibilities into a component
+- Use large-scale global style coverage to solve local UI problems
+- Push all status to Pinia store instead of managing it nearby
+- Put business coupling components in `components/`
+- Import directly from the deep path inside the feature, bypassing `index.ts`
+
+## Output checklist
+
+- [ ] The file structure is consistent with the project convention (pages/features/components are separated)
+- [ ] Use `<script setup lang="ts">`
+- [ ] Props / Emits type complete
+- [ ] Whether explanatory comments should be given priority in Chinese and to the point
+- [ ] Reusable logic has been extracted to composable
+- [ ] Loading / Error / Empty status have been processed
+- [ ] Routing components are loaded using dynamic import
+- [ ] Reasonable status management plan (proximity principle)
+- [ ] API calls have type constraints and unified error handling
+- [ ] styles use scoped isolation
+- [ ] Key behaviors are covered by tests

package/skills/fec-web-video-presentation/SKILL.md

@@ -1,61 +1,61 @@
 ---
 name: fec-web-video-presentation
-description: Use when turning an article, talk script, lesson, product demo, or narrated explanation into a recordable 16:9 web presentation with step-driven scenes, optional narration alignment, theme tokens, and screen-recording guidance; Chinese triggers include 网页视频, 动态演示, 口播稿转视频, 可录屏演示, 16:9 演示.
+description: Use when turning an article, talk script, lesson, product demo, or narrated explanation into a recordable 16:9 web presentation with step-driven scenes, optional narration alignment, theme tokens, and screen-recording guidance; Chinese triggers include web video, dynamic demonstration, spoken script to video, screen-recordable demonstration, 16:9 demonstration.
 ---
 
-# 网页视频演示
+# Web video demonstration
 
 ## Purpose
 
-把文章、口播稿、课程、产品讲解或技术分享转成可录屏的 16:9 网页演示。产物应像一个可点击推进的视频舞台：每一步承载一个口播节拍，视觉设计服务内容节奏，并能用浏览器稳定录制。
+Convert articles, oral presentations, courses, product explanations or technology sharing into screen-recordable 16:9 web presentations. The product should be like a clickable video stage: each step carries a spoken rhythm, the visual design serves the content rhythm, and can be stably recorded using the browser.
 
 ## Procedure
 
-1. 判断输入形态
-   - 用户给文章或长文时，先拆成口播稿和 outline。
-   - 用户给现成口播稿时，保留原顺序，只补 outline、章节和 step。
-   - 用户只给主题但没有内容时，先要求素材、大纲或目标要点；不要替用户虚构整篇内容。
+1. Determine the input form
+   - When the user submits an article or long text, it is first split into a spoken draft and an outline.
+   - When the user broadcasts the manuscript to the ready-made script, the original order is retained and only the outline, chapters and steps are added.
+   - When the user only provides a topic but no content, first ask for materials, outlines or key points; do not make up the entire content for the user.
 
-2. 生成内容计划
-   - 按 [content-plan.md](references/content-plan.md) 输出 script 与 outline。
-   - script 决定讲述顺序和每个节拍；outline 决定章节、step、估时、屏幕信息和素材清单。
-   - outline 只描述内容密度和画面任务，不提前写死具体动画实现。
+2. Generate a content plan
+   - Press [content-plan.md](references/content-plan.md) to output script and outline.
+   - The script determines the order of telling and each beat; the outline determines the chapters, steps, time estimates, screen information and material list.
+   - The outline only describes the content density and screen tasks, and does not write down the specific animation implementation in advance.
 
-3. 对齐演示系统
-   - 从 [theme-system.md](references/theme-system.md) 或 [starter-themes.json](data/starter-themes.json) 选择一个 starter theme，也可以按项目品牌重新定义 token。
-   - 使用 [create-video-presentation.mjs](scripts/create-video-presentation.mjs) 创建最小 Vite + React + TypeScript 演示骨架：
+3. Align the demo system
+   - Choose a starter theme from [theme-system.md](references/theme-system.md) or [starter-themes.json](data/starter-themes.json), or redefine the token by project brand.
+   - Create a minimal Vite + React + TypeScript presentation skeleton using [create-video-presentation.mjs](scripts/create-video-presentation.mjs):
      ```bash
      node skills/fec-web-video-presentation/scripts/create-video-presentation.mjs ./presentation --theme editorial-slate
      ```
-   - 如只想预览可选主题或计划写入内容：
+   - If you just want to preview optional themes or plan to write content:
      ```bash
      node skills/fec-web-video-presentation/scripts/create-video-presentation.mjs --list-themes
      node skills/fec-web-video-presentation/scripts/create-video-presentation.mjs --dry-run ./presentation --theme editorial-slate
      ```
 
-4. 实现章节
-   - 每章按 [chapter-craft.md](references/chapter-craft.md) 实现。
-   - 每个 step 独占舞台，屏幕只承载当前口播节拍需要用户理解的核心内容。
-   - 章节必须有可见的视觉演示、图形、布局变化、状态推进或数据/媒体呈现；不要交付纯文本幻灯片。
-   - 第一章应作为风格锚点优先完成并验收，再继续其它章节。
+4. Implementation Chapter
+   - Each chapter is implemented as [chapter-craft.md](references/chapter-craft.md).
+   - Each step occupies the stage exclusively, and the screen only carries the core content that the user needs to understand for the current spoken beat.
+   - Chapters must have visible visual presentation, graphics, layout changes, status progression, or data/media presentation; do not deliver text-only slides.
+   - The first chapter should be completed and accepted first as the style anchor before continuing with other chapters.
 
-5. 录屏和音频
-   - 使用 [recording-and-audio.md](references/recording-and-audio.md) 检查舞台比例、导航、录制模式和可选音频同步。
-   - 音频可以来自用户已有文件、宿主工具或项目自己的 TTS 流程；本技能不绑定特定 TTS 供应商。
+5. Screen recording and audio
+   - Use [recording-and-audio.md](references/recording-and-audio.md) to check stage scale, navigation, recording mode and optional audio synchronization.
+   - Audio can come from the user's existing files, host tools, or the project's own TTS process; this skill is not bound to a specific TTS provider.
 
-6. 交付前验证
-   - 浏览器打开演示，检查 16:9 缩放、键盘/点击推进、step 数、文本溢出、隐藏控件、控制台错误和录屏路径。
-   - 若章节数量、顺序或 step 数变化，重置本地持久化 key 或清理旧进度，避免恢复到不存在的 step。
+6. Pre-delivery verification
+   - Open the demo in a browser to check 16:9 zoom, keyboard/click advancement, step count, text overflow, hidden controls, console errors, and screen recording path.
+   - If the number, order or step number of chapters changes, reset the local persistence key or clear the old progress to avoid reverting to a non-existent step.
 
 ## Constraints
 
-- 不把网页视频做成普通营销落地页、静态 PPT 或长滚动文章。
-- 不复制参考项目的主题、模板章节、长提示词或脚手架实现；按当前项目生成原创骨架。
-- 不在 outline 阶段锁死每个动画名称；动画应由章节内容关系驱动。
-- 不使用假数据、假引用、假产品截图或不可检查媒体填充画面。
-- 不让控件、页码、说明文字或调试面板污染录屏画面；必要控件默认隐藏或弱化。
-- 不为音频合成引入项目外供应商约定；TTS 属于可选适配层。
+- Do not turn web videos into ordinary marketing landing pages, static PPT or long scrolling articles.
+- Do not copy the reference project's themes, template chapters, long prompts, or scaffolding implementations; generate an original skeleton based on the current project.
+- Do not lock each animation name in the outline stage; animations should be driven by chapter content relationships.
+- Do not use fake data, fake quotes, fake product screenshots or uncheckable media to fill the screen.
+- Do not let controls, page numbers, explanatory text or debugging panels pollute the screen recording; necessary controls are hidden or weakened by default.
+- No outside-project vendor conventions are introduced for audio synthesis; TTS is an optional adaptation layer.
 
 ## Expected Output
 
-输出 script、outline、可运行的 16:9 网页演示骨架或章节实现，并说明主题、章节/step 数、录屏方式、可选音频路径和验证结果。最终演示应可通过点击或键盘稳定推进，视觉节奏贴合口播内容，且适合浏览器录屏。
+Output script, outline, runnable 16:9 web page demonstration skeleton or chapter implementation, and describe the theme, number of chapters/steps, screen recording method, optional audio path and verification results. The final presentation should be able to be progressed steadily through clicks or keyboards, the visual rhythm should fit the spoken content, and it should be suitable for browser screen recording.