@bovinphang/frontend-craft 2.7.0 → 2.8.0

package/skills/fec-web-workers/SKILL.md

@@ -1,35 +1,35 @@
 ---
 name: fec-web-workers
-description: Use when moving expensive browser work off the main thread with Web Workers, SharedWorker, worker pools, Comlink, transferable objects, Vite/Webpack worker integration, or UI responsiveness fixes. Do not use for lightweight synchronous work or DOM manipulation; Chinese triggers include Web Worker, 后台线程, 主线程阻塞.
+description: Use when moving expensive browser work off the main thread with Web Workers, SharedWorker, worker pools, Comlink, transferable objects, Vite/Webpack worker integration, or UI responsiveness fixes. Do not use for lightweight synchronous work or DOM manipulation; Chinese triggers include Web Worker, background thread, main thread blocking.
 ---
 
 # Web Workers
 
 ## Purpose
 
-把昂贵计算移出主线程，保持输入、滚动和动画响应。
+Move expensive calculations off the main thread and keep input, scrolling, and animations responsive.
 
 ## Procedure
 
-1. 先确认瓶颈：任务超过约 10ms、用户输入延迟明显、FPS 下滑或大文件解析/图像处理/加密计算才考虑 Worker。
-2. 选择通信模型：简单任务用 `postMessage`，函数式 RPC 用 Comlink，大量并行小任务用 Worker pool，跨 Tab 同步用 SharedWorker。
-3. 设计消息协议：请求/响应类型、错误类型、取消或超时策略都要明确。
-4. 传大对象时优先 Transferable Objects；不要让结构化克隆吞掉 Worker 带来的收益。
-5. 在组件或页面卸载时 `terminate()`，并通过 Profiler、Performance 面板或 FPS 指标验证主线程改善。
+1. Confirm the bottleneck first: consider workers only if the task exceeds about 10ms, user input delay is obvious, FPS drops, or large file parsing/image processing/encryption calculation.
+2. Choose a communication model: use `postMessage` for simple tasks, use Comlink for functional RPC, use Worker pool for a large number of parallel small tasks, and use SharedWorker for cross-Tab synchronization.
+3. Design the message protocol: request/response types, error types, cancellation or timeout strategies must be clear.
+4. Prioritize Transferable Objects when transferring large objects; don’t let structured cloning swallow up the benefits brought by Worker.
+5. `terminate()` when a component or page is unloaded and verify main thread improvements through Profiler, Performance panel or FPS metrics.
 
-## 详细参考
+## Detailed reference
 
-- 需要原生 Worker 文件、构建工具导入、React 生命周期封装和清理示例时，加载 [references/basic-worker.md](references/basic-worker.md)。
-- 需要 Transferable Objects、Comlink、Worker pool、SharedWorker、CSP 和 SharedArrayBuffer 注意事项时，加载 [references/advanced-workers.md](references/advanced-workers.md)。
+- Load [references/basic-worker.md](references/basic-worker.md) when you need native Worker files, build tool imports, React lifecycle encapsulation and cleanup examples.
+- Load [references/advanced-workers.md](references/advanced-workers.md) when Transferable Objects, Comlink, Worker pool, SharedWorker, CSP and SharedArrayBuffer considerations are required.
 
 ## Constraints
 
-- Worker 内不能访问 DOM、`window`、`document`、`alert()` 或同步 `localStorage`。
-- 高频通信可能比主线程计算更慢；先测量再拆分。
-- Worker 文件必须同源加载，并受 `worker-src` CSP 限制。
-- 大型二进制数据优先 transfer，transfer 后原引用会失效。
-- 每个 Worker 有独立 JS 堆，必须主动管理生命周期和内存。
+- Cannot access DOM, `window`, `document`, `alert()` or synchronize `localStorage` within Worker.
+- High frequency communication may be slower than main thread calculations; measure first then split.
+- Worker files must be loaded from the same source and are subject to `worker-src` CSP restrictions.
+- Large binary data is transferred first, and the original reference will become invalid after the transfer.
+- Each Worker has an independent JS heap and must actively manage life cycle and memory.
 
 ## Expected Output
 
-计算密集型操作在后台线程执行，主线程输入和滚动恢复流畅，错误与取消路径明确，Worker 在卸载时被终止且无内存泄漏。
+Computationally intensive operations are performed on a background thread, main thread input and scrolling resume smoothly, error and cancellation paths are clear, and workers are terminated on unloading without memory leaks.

package/skills/fec-web-workers/references/advanced-workers.md

@@ -1,14 +1,14 @@
-# 高级 Worker 模式
+#Advanced Worker mode
 
 ## Transferable Objects
 
 ```ts
 const buffer = new ArrayBuffer(10 * 1024 * 1024);
 worker.postMessage(buffer, [buffer]);
-// transfer 后主线程中的 buffer.byteLength 变为 0。
+// After transfer, buffer.byteLength in the main thread becomes 0.
 ```
 
-适用于图片像素、音频采样、大型二进制文件。不要在 transfer 后继续读取原引用。
+Suitable for image pixels, audio samples, and large binary files. Do not continue to read the original reference after transfer.
 
 ## Comlink
 
@@ -37,18 +37,18 @@ const result = await mathApi.batchProcess([1, 2, 3]);
 
 ## Worker Pool
 
-- 适合大量独立任务，不适合强顺序依赖任务。
-- 默认 pool size 不要超过 `navigator.hardwareConcurrency`。
-- 队列中任务需要超时、取消或页面卸载清理策略。
+- Suitable for a large number of independent tasks, not suitable for tasks with strong sequence dependencies.
+- Default pool size should not exceed `navigator.hardwareConcurrency`.
+- Tasks in the queue require timeout, cancellation or page unloading cleaning strategies.
 
 ## SharedWorker
 
-- 适合跨 Tab 共享连接或广播状态。
-- 兼容性弱于 Dedicated Worker，必须先确认目标浏览器。
-- 每个连接使用 `MessagePort`，需要 `port.start()`。
+- Suitable for sharing connections or broadcasting status across tabs.
+- Compatibility is weaker than Dedicated Worker, the target browser must be confirmed first.
+- Uses `MessagePort` per connection, requires `port.start()`.
 
-## 安全与兼容
+## Security and Compatibility
 
-- CSP 需允许 `worker-src`。
-- `SharedArrayBuffer` 需要 COOP/COEP 头。
-- Worker 中可用 IndexedDB，但不可用同步 localStorage。
+- CSP needs to allow `worker-src`.
+- `SharedArrayBuffer` requires COOP/COEP headers.
+- IndexedDB is available in Worker, but synchronized localStorage is not.

package/skills/fec-web-workers/references/basic-worker.md

@@ -1,6 +1,6 @@
-# 基础 Worker 与生命周期
+#Basic Worker and life cycle
 
-## Worker 文件
+## Worker file
 
 ```ts
 // workers/heavy-compute.worker.ts
@@ -10,7 +10,7 @@ self.onmessage = (event: MessageEvent<{ numbers: number[] }>) => {
 };
 ```
 
-## Vite 导入
+## Vite import
 
 ```ts
 import HeavyComputeWorker from "./workers/heavy-compute.worker?worker";
@@ -25,7 +25,7 @@ worker.onerror = (error) => {
 };
 ```
 
-## React 生命周期封装
+## React life cycle encapsulation
 
 ```tsx
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -60,8 +60,8 @@ export function useWorker<TRequest, TResult>(factory: () => Worker) {
 }
 ```
 
-## 验证
+## Verify
 
-- Performance 面板中长任务减少。
-- 用户输入延迟下降。
-- 组件卸载后没有继续收到 worker message。
+- Long tasks in the Performance panel have been reduced.
+- User input latency reduced.
+- Worker messages are not received after the component is uninstalled.