用途:审查 F0 React 组件是否符合 packages/react/AGENTS.md 中的约定,适用于审查 PR、审计组件代码质量、检查 F0 规范合规性。
审查流程:先阅读 packages/react/AGENTS.md 获取完整组件约定;对含交互或动画元素的组件,加载 a11y 技能(.agents/skills/a11y/)获取 WCAG 模式;逐项检查并将问题标记严重程度,分为阻塞(必须修复)与建议(可选)。
阻塞项:TypeScript 方面禁止 any 或 as any、import * as React、组件默认导出、循环导入;组件结构方面 forwardRef 组件缺 displayName、直接导入 Radix/第三方原语(须用 @/ui/ 包装)、新组件名缺 F0 前缀、新组件放入 experimental/ 而非 components/(应使用 @/lib/experimental.ts 的 experimentalComponent)、公开导出内部组件或 internal-types.ts、新组件未在 exports.ts 导出;测试方面新/改组件缺测试文件、测试文件用 .spec.ts 而非 .test.tsx、用 @testing-library/react 的 render 而非 @/testing/test-utils.tsx 的 zeroRender、用 jest.fn() 而非 vi.fn()、使用快照测试(应仅用显式断言);Storybook 缺 withSnapshot({}) 的 Snapshot story;安全方面无明确理由使用 dangerouslySetInnerHTML。
建议项:注释描述“做什么”而非“为什么”、缺少必要的 React.memo/useMemo/useCallback、useEffect 缺清理、公共 API 暴露 className、联合类型 props 未用 const 数组模式;测试中该用 userEvent 却用 fireEvent、覆盖率低于 80%、重复多步交互缺辅助函数;无障碍方面动画组件缺 useReducedMotion()、加载/骨架状态缺 aria-live="polite"、纯图标按钮缺 sr-only 标签、可聚焦元素缺 focusRing()、交互 div 缺键盘处理或 tabIndex={0}+role;i18n 方面硬编码面向用户字符串(应用 useI18n())、翻译键缺回退;样式方面使用 CSS modules 或 CSS-in-JS(应用 Tailwind)、从 "class-variance-authority" 导入 CVA 而非 "cva"、可用 Tailwind 类表达却用内联样式。
Storybook 审查:Meta 用 satisfies Meta<typeof Component>(非 as Meta);tags 含 ["autodocs", "stable"] 或 ["autodocs", "experimental"];联合 props 的 argTypes 直接引用组件 const 数组,无 const 数组的联合类型用 table.type.summary;Snapshot story 在 flex 布局中渲染所有有意义的变体。
Props 审查:命名功能清晰;联合类型使用导出的 const 数组;公共接口导出、内部类型留在 internal-types.ts;默认值在解构时内联设置(非 defaultProps);需要 data-* 支持时使用 @/global.types 的 DataAttributes。
限制:本技能为审查清单,具体执行依赖仓库内 AGENTS.md 与相关技能文件;未提供安装命令、收费或平台信息。