Bovin Phang

需要在不修改业务代码的前提下诊断既有前端代码的结构性可维护性问题，并要求提供证据、误判检查与候选重构方向时。

The English summary is being prepared. Showing the original description.

用于编写或审查靠近 UI 代码的前端单元、组件或轻量集成测试，包括 React Testing Library、Vue Test Utils、hooks/composables、props/emits、回调、可访问查询、user-event 交互、mock、loading/error/empty 状态和回归覆盖。若是测试分层规划、真实浏览器旅程或现有验证失败，优先选择对应测试或验证工作流；中文触发词包括 组件测试、组件单测、单元测试、轻量集成测试。

The English summary is being prepared. Showing the original description.

用于创建带 draw.io / diagrams.net 源文件的可编辑技术图，包括架构图、ERD、UML、序列图、流程图、ML 模型图、官方形状检索、品牌符号、Graphviz 自动布局、代码结构图、.drawio 校验或 draw.io CLI 导出兜底。不要用于普通位图生成、手绘草图、交互式 Canvas/Three.js 场景或装饰性 SVG 动画；中文触发词包括 draw.io、diagrams.net、可编辑架构图、.drawio、ER 图、UML、序列图、自动布局、形状检索、代码结构图。

The English summary is being prepared. Showing the original description.

用于生成或编辑图表、图形资产、海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板或图像编辑工作流，尤其是导出 PNG 需要视觉质检和有限自动修复时。文字密集图表优先使用确定性的 Mermaid/SVG/HTML/canvas 源；浏览器可打开的技术图优先使用 HTML technical diagrams，覆盖系统蓝图、架构图、部署拓扑、Agent runtime、memory flow、before-after architecture、流程、序列、数据流、生命周期、runbook、PII/数据血缘和状态机；不要用于不涉及生成图像的普通 UI 打磨。中文触发词包括 图片生成、图像编辑、图表生成、架构图、系统蓝图、部署拓扑、Agent runtime、memory flow、before-after architecture、工作流图、数据流、生命周期图、状态机、ER 图、UML、序列图、海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板、PNG 自检、自动修复。

The English summary is being prepared. Showing the original description.

用于优化或审查大列表、虚拟滚动、windowing、react-window、TanStack Virtual、可变高度行、动态测量、无限滚动、网格虚拟化或滚动性能；中文触发词包括 虚拟列表、大列表优化、滚动性能。

The English summary is being prepared. Showing the original description.

Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.

The English summary is being prepared. Showing the original description.

用于创建、审查或重构前端 monorepo，包括 pnpm workspace、Turborepo、Nx、多包依赖边界、任务编排、包命名或包发布；中文触发词包括 monorepo、workspace、多包。

The English summary is being prepared. Showing the original description.

用于维护或安全修改既有非框架前端代码：原生 JavaScript、jQuery、HTML/CSS、MPA 页面、服务端渲染模板、遗留插件或需要长期保持当前技术栈的代码。若是规划迁移到 React/Vue/TypeScript，请使用迁移 skill；中文触发词包括 传统前端、原生 JS、jQuery。

The English summary is being prepared. Showing the original description.

用于创建、维护、调试或审查真实浏览器端到端测试，包括 Playwright/Cypress、Page Object、CI 产物、trace、不稳定用例、跨页面视觉回归以及登录、支付、权限或 CRUD 等关键用户旅程。若是测试层规划或靠近 UI 组件的测试，先选择对应测试工作流；中文触发词包括 E2E、端到端测试、Playwright、Cypress。

The English summary is being prepared. Showing the original description.

用于用户要求通用前端代码评审、PR 评审、合并就绪评估、架构可维护性、类型安全、渲染/状态风险、样式一致性、可测性缺口或横向评审总结时。深度安全、无障碍、E2E 或性能问题应委托对应专项 skill；中文触发词包括 代码审查、代码评审、review。

The English summary is being prepared. Showing the original description.

用于在不改变可观察行为的前提下重组既有前端代码，包括职责提炼、模块搬移、条件逻辑简化、API 整理和数据组织。不要用于新增功能、改变行为的缺陷修复、依赖或框架迁移，以及已经证实的死代码清理。

The English summary is being prepared. Showing the original description.

用于构建或审查 Canvas 2D、Three.js/WebGL、React Three Fiber、GLSL shader、ShaderToy 到 WebGL 适配、2D/3D 可视化、游戏渲染、动画循环、GPU 资源清理或渲染性能。不要用于标准 DOM UI、已有图表库覆盖的图表或非图形类性能工作；中文触发词包括 Canvas、Three.js、WebGL、GLSL、Shader、3D、数据可视化、游戏。

The English summary is being prepared. Showing the original description.

用于选择、实现或审查 localStorage、sessionStorage、IndexedDB、cookie、客户端持久化、离线数据、安全存储或清理策略等浏览器存储方案；中文触发词包括 浏览器存储、客户端持久化。

The English summary is being prepared. Showing the original description.

用于根据 package.json、lockfile、配置、env 示例、路由、API client 或 server routes、schema、组件、测试、CI、构建/部署配置、ADR、changelog 或迁移说明等事实源同步前端项目文档。不要用于单纯润色普通文案；中文触发词包括 文档同步、更新 README、docs sync、环境变量文档、命令清单、API 文档同步。

The English summary is being prepared. Showing the original description.

保持行为的前端重构主要涉及搬移特性类重构，已经选定或正在评估对应手法，需要查询该 family 的操作步骤、风险与 JavaScript/TypeScript/React/Vue 适配时。

The English summary is being prepared. Showing the original description.

用于选择、实现、审查或重构 React、Vue、Next.js、Nuxt、URL 状态、服务端状态、表单状态、浏览器持久化或全局 store 的前端状态归属。TanStack Query 缓存细节、浏览器存储持久化或表单校验内部问题优先使用更窄的 skill；中文触发词包括 状态管理、状态归属、store 选型。

The English summary is being prepared. Showing the original description.

用于前端工作需要向后端团队说明数据、动作、状态、权限、校验或业务规则需求，但不指定端点设计、字段名、数据库形态或实现细节；中文触发词包括 前后端需求交接、后端需求、API 需求澄清、数据需求说明。

The English summary is being prepared. Showing the original description.

用于诊断或改进前端性能、Core Web Vitals、包体积、运行时渲染成本、网络瀑布、内存泄漏、长任务、Lighthouse 问题或性能预算；中文触发词包括 性能优化、页面卡顿、首屏慢、包体积、Web Vitals。

The English summary is being prepared. Showing the original 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.

The English summary is being prepared. Showing the original description.

保持行为的前端重构主要涉及函数类重构，已经选定或正在评估对应手法，需要查询该 family 的操作步骤、风险与 JavaScript/TypeScript/React/Vue 适配时。

The English summary is being prepared. Showing the original 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.

The English summary is being prepared. Showing the original description.

保持行为的前端重构主要涉及数据重组类重构，已经选定或正在评估对应手法，需要查询该 family 的操作步骤、风险与 JavaScript/TypeScript/React/Vue 适配时。

The English summary is being prepared. Showing the original description.

保持行为的前端重构主要涉及封装类重构，已经选定或正在评估对应手法，需要查询该 family 的操作步骤、风险与 JavaScript/TypeScript/React/Vue 适配时。

The English summary is being prepared. Showing the original description.

Use when running existing project validation commands and fixing failures after code changes, including lint, type-check, unit/integration test, build, CI, or local script failures. Do not use when the task is to design or author new component/E2E tests; Chinese triggers include validation, check failures, fix failures, CI failures.

The English summary is being prepared. Showing the original description.