Claude Skills by bovinphang

用于设计、实现或审查前端交互动效、页面转场、滚动动画、Framer Motion、GSAP、Lottie、CSS 动画、动效强度、动画性能、减少动效行为或兼具表现力与可访问性的 UI 动效。不要用于仅 SVG 路径绘制、Canvas/WebGL 渲染或普通 hover 状态；中文触发词包括 动效设计、交互动效、页面转场、滚动动画、Framer Motion、GSAP。

用于创建或审查 Next.js 14+ App Router 项目、文件路由、layout、服务端/客户端组件边界、SSR/SSG/ISR、streaming、metadata、middleware、server actions 或 Next 特定数据获取。通用客户端 React 组件架构另按项目 React 约定处理；中文触发词包括 Next.js、App Router。

用于创建或审查 Nuxt 3 项目、文件路由、pages、layouts、SSR/SSG/SPA 行为、Nuxt 数据获取、route middleware、plugins、modules、server routes 或 Nuxt 特定 Vue 3 约定。通用 Vue 组件架构另按项目 Vue 约定处理；中文触发词包括 Nuxt、Nuxt 3。

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

用于添加或审查 Progressive Web App 能力，如可安装性、manifest 元数据、Service Worker 注册、Workbox 缓存、离线兜底、应用更新提示、maskable icons 或 iOS PWA 兼容性。不要用于普通 API 缓存或不可安装的性能调优；中文触发词包括 PWA、离线、Service Worker。

用于设计或审查 React + TypeScript 项目结构、feature/module 边界、组件架构、hooks 组织、路由组合、状态/API/错误/样式默认约定或仓库级 React 规范。表单、数据获取、测试、无障碍、虚拟列表、动画或安全深挖优先使用更窄的 skill；中文触发词包括 React 项目规范、React 组件架构。

用于安全移除前端死代码、未使用导出、陈旧组件、废弃路由、未使用依赖，或由 knip、depcheck、ts-prune、TypeScript、ESLint、人工审查发现的清理目标。不要用于会改变行为的功能重写；中文触发词包括 死代码、清理未使用、refactor clean、依赖清理、删除无用代码。

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

已经有结构问题证据，需要在多种保持行为的重构手法之间比较前置条件、选择最小安全方案，或决定多个重构步骤的合理先后关系时。

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

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

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

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

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

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

用于证明前端重构保持了既有行为、选择合适的安全网、逐步验证结构修改，或依据证据给出 PASS、PARTIAL、NOT PROVEN 的行为保持结论。

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

用于设计、实现或审查响应式前端布局、移动优先断点、容器查询、流式网格、数据密集表格、触摸目标、安全区域、横竖屏变化、视口溢出或跨设备 UI 行为；中文触发词包括 响应式布局、移动端适配、断点、容器查询、横竖屏、触摸目标。

用于实现或审查前端路由保护、auth guard、RBAC、权限路由、登录态处理、重定向、middleware、React Router、Next.js、Vue Router 或 Nuxt route middleware；中文触发词包括 路由保护、权限路由、登录态。

用于审查前端安全风险，如 XSS、CSRF、敏感数据暴露、不安全 DOM API、不可信用户输入、认证/token 处理、支付流程、文件上传、CSP、依赖风险或第三方脚本；中文触发词包括 安全审查、安全检查。

用于前端决策依赖可能变化的框架、库、浏览器、运行时、包、API 或平台行为时，包括官方文档核验、版本敏感模式、迁移选择或公共接口假设；中文触发词包括 查官方文档、以源码为准、source-driven、版本差异。

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

用于设置或审查 Storybook 组件文档、设计系统展示、隔离组件状态预览、stories、addons、decorators、MDX 文档、组件状态交互检查、视觉基线或 Chromatic。真实浏览器跨页面旅程或更广覆盖规划优先选择对应测试工作流；中文触发词包括 Storybook、组件文档、Design System、视觉回归。

用于实现或审查 SVG 动画、路径绘制、图标动效、Logo 动画、插画动效、微交互、CSS/SMIL/Framer Motion/GSAP 选型、动效无障碍或降级行为；中文触发词包括 SVG 动画、路径描边、动效。

用于设计、实现或审查 Tailwind CSS 设计系统、Token 映射、主题扩展、工具类治理、组件变体、暗色模式、响应式工具、safelist 或可维护的 class 组合；中文触发词包括 Tailwind、设计 Token、组件变体、暗色模式、class 管理。

用于实现新前端行为、修复 bug 或重构可先由测试描述预期行为的逻辑。适用于组件、hooks/composables、工具函数、API clients、路由守卫或用户工作流；中文触发词包括 TDD、测试驱动、先写测试、红绿重构、回归测试。

用于规划或审查前端测试策略，按风险选择正确测试层级，将覆盖映射到静态检查、单元测试、组件测试、集成测试、E2E、Storybook/视觉回归、a11y、安全、性能或 CI gates。不要用于编写单个组件/E2E 测试或只是运行现有验证命令；中文触发词包括 测试策略、测试分层、测试计划、覆盖矩阵。

用于构建、审查或改进需要产品专属设计方向的前端 UI，包括设计系统生成、Master/Page 覆盖、独特视觉识别、反通用界面选择、首屏层级、UI 打磨、图表 UX、交互状态、响应式行为或视觉 QA。外部设计文件为权威时，应从该来源实现，而不是自行发明方向；中文触发词包括 UI 设计、设计系统、视觉风格、不要模板化、高级感、界面打磨、交互状态。

用于运行现有项目验证命令并修复代码变更后的失败，包括 lint、type-check、单元/集成测试、build、CI 或本地脚本失败。不要用于设计或编写新的组件/E2E 测试；中文触发词包括 验证、检查失败、修复失败、CI 失败。

用于创建、配置、审查或调试基于 Vite 的前端项目、vite.config.ts、环境变量、dev server proxy、HMR、插件顺序、library mode、依赖预打包、bundle splitting 或 Vite 构建性能。React/Vue 组件架构请使用框架专项 skill；中文触发词包括 Vite 配置、vite.config、Vite 构建、Vite 性能。

用于设计或审查 Vue 3 + TypeScript 项目结构、SFC/组件边界、composables 组织、路由组合、Pinia 归属、API/错误/样式默认约定、directives 或仓库级 Vue 规范。表单、数据获取、测试、无障碍、虚拟列表、动画或安全深挖优先使用更窄的 skill；中文触发词包括 Vue 3 项目规范、Vue 组件架构。

用于将文章、演讲稿、课程、产品演示或口播解释转成可录制的 16:9 网页演示，包含步骤驱动场景、可选口播对齐、主题 Token 与录屏指导；中文触发词包括 网页视频、动态演示、口播稿转视频、可录屏演示、16:9 演示。

用于将昂贵的浏览器工作移出主线程，涉及 Web Workers、SharedWorker、worker 池、Comlink、transferable objects、Vite/Webpack worker 集成或 UI 响应性修复。不要用于轻量同步工作或 DOM 操作；中文触发词包括 Web Worker、后台线程、主线程阻塞。

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling...

Use when frontend work needs to communicate data, action, state, permission, validation, or business-rule needs to backend teams without dictating endpoint design, field names, database shape, or implementation details; Chinese triggers include front-end and back-end requirements handover, back-end requirements, API requirements clarification, data requirements description.

Use when the user asks for general frontend code review, PR review, merge-readiness assessment, architecture maintainability, type-safety, rendering/state risks, style consistency, testability gaps, or a cross-cutting review summary. Delegate deep security, accessibility, E2E, or performance investigations to their specialized skills; Chinese triggers include code review, code review, review.

Use when diagnosing structural maintainability problems in existing frontend code before deciding how to refactor it, especially when evidence, false-positive checks, and candidate transformations are needed without editing business code.

Use when diagnosing frontend build failures, runtime errors, UI anomalies, API/data problems, white screens, request failures, or unexplained production exceptions; Chinese triggers include debugging, debug, troubleshooting, positioning, error reporting, exceptions, white screens, request failures.

Use when planning, implementing, or reviewing frontend dependency upgrades, package migrations, lockfile changes, major framework version bumps, CVE remediation, peer dependency conflicts, ESM/CJS shifts, build-tool compatibility, or CI verification matrices; Chinese triggers include dependency upgrades, version upgrades, lockfile, peer dependency, CVE fixes, major version migrations.

Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI export fallback. Do not use for ordinary raster image generation, freehand sketches, interactive canvas/Three.js scenes, or decorative SVG animation. Chinese triggers include draw.io, diagrams.net, edi...

Use when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer deterministic Mermaid/SVG/HTML/canvas sources for text-heavy diagrams; use HTML technical diagrams for browser-ready system blueprints, architecture, deployment topology, agent runtime, memory flow, before-after archit...

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.

Use when diagnosing or improving frontend performance, Core Web Vitals, bundle size, runtime rendering cost, network waterfalls, memory leaks, long tasks, Lighthouse findings, or performance budgets; Chinese triggers include performance optimization, page freeze, slow first screen, bundle volume, Web Vitals.

Use when behavior-preserving frontend refactoring focuses on function API shape, flags, dependencies, mutability, construction, or command/function trade-offs, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

Use when selecting or composing behavior-preserving refactoring techniques after structural evidence is known, especially when multiple candidate transformations, preconditions, or ordering choices must be compared.

Use when behavior-preserving frontend refactoring focuses on conditional complexity, repeated branches, guards, special cases, or internal invariants, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

Use when behavior-preserving frontend refactoring focuses on variable meaning, field naming, derived state, or reference/value identity, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

Use when behavior-preserving frontend refactoring focuses on record, collection, value, responsibility, delegation, or algorithm boundaries, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.

Use when behavior-preserving frontend refactoring focuses on function structure, naming, parameters, shared context, or phase boundaries, and the selected technique needs family-specific mechanics, risks, and JavaScript/TypeScript/React/Vue adaptation.