用途
该技能为现代前端应用提供全面、可直接用于生产的代码审查，针对 React / TypeScript / Tailwind 技术栈给出可执行的反馈。其目标是将前端代码审查从人工检查转变为系统化分析，覆盖安全、性能、质量、架构、类型、无障碍、响应式、SEO、测试与状态管理等维度。
主要能力
审查覆盖以下维度：
- 前端安全：XSS、CSRF、敏感数据暴露、认证问题
- React 性能：重复渲染、记忆化、包体积、懒加载
- 代码质量：可读性、可维护性、React 最佳实践
- 组件架构：分层架构、关注点分离、可复用性
- 类型安全：TypeScript 使用、类型正确性、运行时校验
- 无障碍：WCAG 合规、键盘导航、屏幕阅读器
- 响应式设计：移动优先、断点、Tailwind 模式
- SEO 与元信息：meta 标签、语义化 HTML、性能指标
- 测试：组件测试、hooks 测试、边界情况
- 状态管理：Zustand / Context 模式、React Query 使用
使用方式
当出现以下情况时使用该技能：用户要求代码审查或反馈；用户提到“review”“check”“feedback”“quality”“security”；在生成组件或功能之后；用户询问性能或无障碍问题；提交重大变更之前。
示例请求包括：“Review this component”“Is this React code optimized?”“Can you check for accessibility issues?”“How can I improve this?”“Review my feature implementation”。
审查流程
第一步：理解上下文
审查前先收集上下文，包括代码类型（React 组件、自定义 Hook、工具函数、API 集成、Store / 状态管理、样式）、审查范围（单个组件 / Hook、整个功能、页面 / 路由、共享工具）以及优先级（安全关键、性能关键、面向用户、内部工具）。
第二步：初步扫描
快速扫描明显问题，并按严重程度分类：
严重（CRITICAL）：XSS 漏洞（dangerouslySetInnerHTML）、CSRF 漏洞（缺少 token）、敏感数据暴露（token 存入 localStorage）、认证绕过、硬编码密钥 / API key。
高优先级（HIGH）：性能瓶颈（不必要的重复渲染、缺少记忆化）、内存泄漏（useEffect 缺少清理）、错误处理缺口、无障碍违规（缺少 ARIA 标签、键盘支持）、缺少输入校验。
中优先级（MEDIUM）：代码重复、组件 / 变量命名不清、缺少加载 / 错误状态、TypeScript 使用不佳（any 类型）、Tailwind 使用不一致。
低优先级（LOW）：代码风格不一致、复杂逻辑缺少注释、次要优化、文档缺口。
第三步：深度分析
系统性地跨所有维度进行审查：
前端安全审查：检查是否存在 XSS 漏洞（如未净化的 dangerouslySetInnerHTML）、是否将 token 存放在 localStorage、是否硬编码 API key、是否缺少 CSRF 保护等，并给出应做与不应做的代码对比。安全清单包括：不在用户输入处使用危险的 dangerouslySetInnerHTML；不在 localStorage 存放敏感 token；不硬编码密钥；对状态变更操作做 CSRF 保护；对所有表单输入做校验；对用户生成内容做输出净化；强制 HTTPS；不在 console.log 输出敏感数据；受保护路由做认证检查；敏感字段关闭自动补全等。
React 性能审查：识别瓶颈与优化点，例如不必要的重复渲染、缺少 useMemo / useCallback / memo、useEffect 缺少清理导致内存泄漏、缺少懒加载、内联对象 / 函数作为 props 等。性能清单包括：对昂贵计算使用 useMemo；对子组件回调使用 useCallback；对昂贵子组件使用 memo；useEffect 正确清理；重组件懒加载；路由代码分割；长列表虚拟化；频繁事件防抖；图片优化；避免内联对象 / 函数 props；正确使用 key；避免深层 prop drilling。
组件架构审查：检查关注点分离，建议分层架构（展示层、业务逻辑层、数据访问层），不应在组件内直接发起 API 调用或编写业务逻辑，应使用 Hook 复用逻辑，使用 Zustand / Context 管理全局状态，使用 React Query 管理服务端状态，避免循环依赖，遵循单一职责，组件保持小而专注，提供正确的 prop 类型。
类型安全审查：检查是否滥用 any、是否无理由使用非空断言、是否缺少运行时校验（如使用 Zod）、事件处理器是否显式类型等。清单包括：不用 any；不无理由使用非空断言；为 props 定义正确的接口 / 类型；对外部数据用 Zod 做运行时校验；对可辨识联合使用类型守卫；为事件处理器显式类型；开启 tsconfig 严格模式；禁止隐式 any；在 Hook 中正确使用泛型。
无障碍审查：对照 WCAG 2.1 AA 检查，包括语义化 HTML、ARIA 标签、键盘导航、焦点管理、颜色对比度、图片 alt 文本、表单标签关联、错误提示使用 role="alert"、避免键盘陷阱、跳转链接、标题层级、交互元素角色等。
响应式设计审查：检查 Tailwind / 响应式模式，避免固定宽度、无响应式类、缺少移动端考虑，建议使用响应式 Tailwind 类与移动优先布局。
适用场景
适用于使用 React、TypeScript、Tailwind 的前端项目在开发过程中或提交前进行代码审查，尤其适合安全关键（认证、支付表单）、性能关键（大列表、复杂计算）、面向用户（无障碍、UX）以及内部工具等不同类型的代码。
限制
关于该技能的价格、收费、平台支持范围、具体安装命令、运行时依赖等事实，资料中暂未提供。