cidopa9049

使用该子代理将 Figma、Sketch、MasterGo、Pixso、墨刀或摹客中的样式与变量映射到项目已有的设计 Token、主题变量和样式约定，并将映射报告保存为 Markdown 文件。

专注于按设计稿精确实现 UI 组件的代理，并将实现报告保存为 Markdown 文件。支持 Figma、Sketch、MasterGo、Pixso、墨刀、摹客六种设计工具。提供设计稿链接、选区截图或标注数据，自动获取设计数据并生成高保真前端代码。当需要基于设计上下文实现 UI，尤其是通过 MCP 完成设计稿转代码任务时，使用该子代理。

当任务涉及页面拆分、组件架构、状态流设计、目录规划、数据流设计、模块边界划分或大型前端重构时，使用该子代理。将架构方案报告保存为 Markdown 文件。

专注于前端代码（React/Vue/Next/Nuxt、TypeScript、样式、客户端安全）的资深评审。在编写或修改前端后委托；按 CRITICAL→LOW 检查、控制噪声并合并同类问题，报告写入 reports。适合结合 git diff 的独立 Code Review。当用户要求前端 code review、合并前评审、或评审最近改动时优先使用。

前端端到端测试专精子代理：编写与维护关键用户旅程、执行 Playwright/Cypress、治理不稳定用例、管理截图/Trace/视频与 CI 产物。在需要生成、运行或修复 E2E、或保障核心流程可测时委托。若环境已安装 Vercel Agent Browser 等语义化浏览器工具可优先使用，否则以 Playwright 为主。

专注于前端与浏览器侧的安全评审：XSS、客户端密钥泄露、危险 DOM/API 用法、第三方脚本、CSP、依赖与供应链、认证态存储等。在用户输入、认证、支付、上传、动态 HTML、外链 fetch 等变更后主动委托；输出分级结论并写入 reports。当用户要求前端安全审查、渗透前自检、或评审 OWASP 相关客户端风险时优先使用。

前端性能分析与优化专精：Core Web Vitals、打包体积、运行时与渲染、网络与缓存、内存泄漏排查；可配合 Lighthouse、Bundle 分析与 Profiler。当用户提到页面慢、卡顿、首屏、包体积、渲染差、Web Vitals 不达标时使用。

TypeScript/JavaScript 专项评审：类型安全、异步正确性、Node/Web 安全、惯用法。先跑项目 typecheck/eslint 再读 diff；只报告不直接改代码。适用于 .ts/.tsx/.js/.jsx 变更或 PR 级 TS/JS 审查。与 frontend-code-reviewer 分工：本代理以语言与运行时语义为主，对方以前端 UI/组件架构为主。

使用该子代理排查前端 UI 中的视觉缺陷、布局错乱、CSS 问题、响应式异常以及交互与设计不一致的问题，将报告保存为 Markdown 文件。支持从 Figma、Sketch、MasterGo、Pixso、墨刀、摹客获取设计数据，对比设计稿与实现结果，评估还原度并给出具体差异报告。

将 frontend-craft 的项目模板（CLAUDE.md、settings.json、rules）初始化到当前项目的 .claude 目录中。

对指定文件或最近变更的前端代码进行规范化评审，输出分级评审报告并保存为 Markdown 文件。

按项目规范创建 page、feature 或 component 的标准目录结构和样板文件。用法：/scaffold <type> <Name>，如 /scaffold page UserDetail

审查或改进前端 UI 的语义结构、键盘支持、焦点管理、标签以及常见的 WCAG 相关问题，并将报告保存为 Markdown 文件。当用户提到无障碍、accessibility、a11y、WCAG，或在实现交互组件时自动激活。

Playwright 与 Cypress E2E 规范，涵盖目录结构、Page Object、用例组织、Playwright 配置、产物与 Trace、CI 集成、不稳定用例治理与关键业务场景。当用户提到 E2E、端到端测试、Playwright、Cypress、集成测试时自动激活。

从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。

基于 Figma、Sketch、MasterGo、Pixso、墨刀或摹客的设计上下文实现页面或组件，强调复用、设计 Token 映射以及面向生产的前端实现方式，并将实现计划保存为 Markdown 文件。当用户提供设计稿链接、设计选区、截图或要求按设计稿实现组件/页面时自动激活。

指导将 JS + jQuery + HTML 传统前端项目迁移至 React + TypeScript 或 Vue 3 + TypeScript 的迁移策略、概念映射、分阶段步骤和检查清单。含图片、样式、功能等价等重构实施要求。当用户提到技术栈升级、jQuery 迁移、MPA 转 SPA、项目重构、遗留项目迁移为 React/Vue 时自动激活。

针对 JavaScript + jQuery + HTML/CSS 传统前端项目的开发与维护规范。当用户在非框架项目中工作，涉及 jQuery、原生 JS、传统多页面应用（MPA）、模板引擎渲染页面、或维护遗留代码时自动激活。

Monorepo 项目规范，涵盖 pnpm workspace、Turborepo、Nx 的目录结构、依赖管理、任务编排、包发布。当用户提到 monorepo、workspace、多包、pnpm workspace、Turborepo、Nx 时自动激活。

Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.js 项目中创建、修改页面或模块时自动激活。

Nuxt 3 项目规范，涵盖目录结构、SSR/SSG、组合式 API、数据获取、路由、中间件、插件与模块。当用户在 Nuxt 3 项目中创建、修改页面或模块时自动激活。

React + TypeScript 项目的完整工程规范，涵盖项目结构、组件设计、组合与复合组件等 UI 模式、Hooks、路由、状态管理、API 层、错误处理、测试和性能优化。当用户在 React 项目中创建、修改组件或模块，涉及架构设计、代码编写时自动激活。

前端代码安全审查，检测 XSS、CSRF、敏感数据泄露、不安全的用户输入处理和依赖风险，并将报告保存为 Markdown 文件。当用户要求安全检查、安全审查，或代码涉及用户输入、认证、支付、文件上传等敏感操作时自动激活。

执行项目校验命令（lint、type-check、test、build），分析失败原因，安全修复问题，并将总结报告保存为 Markdown 文件。当用户要求检查、验证、测试代码改动时自动激活。

Vue 3 + TypeScript 项目的完整工程规范，涵盖项目结构、组件设计、Composables、路由、Pinia 状态管理、API 层、错误处理、测试和性能优化。当用户在 Vue 项目中创建、修改组件或模块，涉及架构设计、代码编写时自动激活。