HumanLayer Skills：识别『可疑 React 组件』的 5 个危险信号

HumanLayer Skills识别『可疑 React 组件』的 5 个危险信号【免费下载链接】skills项目地址: https://gitcode.com/GitHub_Trending/skills53/skillsHumanLayer Skills 是一个开源的 Claude Code 技能集合其中最有意思的技能之一是narrow-react-prop-types——它教你如何揪出代码库中的可疑 React 组件那些为了 Storybook、测试或 Mock 数据而把 props 类型越写越宽、最终掩盖了真实产品状态的组件。本文带你掌握识别这些组件的5 个危险信号并了解如何用这个技能一次性把类型收紧回来。什么是可疑 React 组件在真实项目中组件的 props 类型往往会悄悄变胖为了让某个 story 跑起来回调改成了可选为了让测试好写items加上了?? []兜底为了 demo 方便加了个defaultFoo的展示开关结果是类型描述的状态线上代码根本不会进入。每个多余的可选 prop都意味着多一个分支要处理、要测试、要维护。HumanLayer 的 SKILL.md 里把这件事说得很直白类型应该尽可能严格这样代码才能尽可能简单。5 个危险信号一眼识别可疑组件以下信号整理自技能文档第 1 步Identify the suspect component看到任意一条这个组件就该被重点审视了。信号 1巨大的 props 接口一堆可选字段 interface CardProps { items?: Item[] onSelect?: (id: string) void onArchive?: (id: string) void defaultExpandedIds?: string[] ...还有十几个 }可选字段越多说明这个接口被撑大的可能性越大。如果大部分调用方其实都老老实实传值那这些?很可能只是历史包袱。信号 2可选回调调用onSelect?.(...)⚠️文档点名了这类写法onSelect?.(...)、onArchive?.(...)。更危险的场景是UI 交互始终会渲染回调却可选。比如菜单项永远显示在界面上点它时却可能调用一个不存在的onRename?.(...)——用户点了没反应这就是僵尸交互。信号 3防御式兜底items ?? []、count ?? 0️new Set(expandedIds ?? defaultExpandedIds ?? [])一连串??兜底往往是在掩盖这个值本应必填的事实。技能文档给出的修正方式很干脆new Set(expandedIds)信号 4永远渲染的 UI 交互配一个可选回调 ️按钮、菜单项、图标始终在界面上但驱动它的 handler 是可选的。文档的审查清单里专门有一条渲染出来的菜单项和按钮不能因为缺少 handler 而变成死的。如果交互一定会出现handler 就必须是 required。信号 5面向 demo 的展示型 props 典型的有defaultFoo、多种 handler 形态、线上代码从不使用的展示开关。它们存在的唯一理由是让 Storybook 或 demo 更好看——但线上代码根本不会用到。关键原则只信活代码不信故事和测试识别出可疑组件后HumanLayer 技能给出的核心方法论是代码类型角色路由、已接入的组件、Provider、生产包导出活代码路径props 契约的唯一事实来源Storybook stories、测试、fixtures、mocks支撑代码只能作为类型被撑宽的辅助证据一句话不要从一个 story 或测试出发去选定修改目标而要从真实调用方反推类型应该长什么样。类型收紧后故事和测试如果跑挂了让它们去适配更严格的契约而不是把 prop 改回可选来迁就测试。技能还能做什么自动化的 CI 工作流narrow-react-prop-types不只是文档它还可以配成一个定时运行的 CI Agent 工作流自动扫描仓库、收紧 props、提 PR。你可以参考这些文件工作流模板agent-narrow-component-props.ymlAgent 记忆文件narrow-component-props-memory.mdPR 响应模板response-template.md工作流每天定时运行Agent 会挑选一组小而有把握的类型收紧改动跑通 typecheck 后自动提 PRPR 描述里会附上每一处改动的理由和佐证调用点——Reviewer 可以直接照着检查。如何安装这个技能安装只需一行命令需有 Node 环境npx skills add humanlayer/skills --skill narrow-react-prop-types然后在你的项目里输入/narrow-react-prop-types即可触发。其他技能同样适用--skill参数如improve-claude-md、show-me、design-control-loop等详见 README.md。避坑清单这些反模式要主动规避技能文档最后列出了一份反模式清单新手尤其值得收藏❌ 为了让 story 省代码把回调改成可选❌ 渲染一个调用onAction?.(...)的菜单项❌ 线上代码是受控的却给 Storybook 加default*props❌ 用?? []或?? 0掩盖本应必填的线上状态❌ 活代码只用一种 API 形态却允许多种写法小结把类型收紧本质上是让不可能状态变得不可表达。识别可疑 React 组件记住这 5 个信号庞大的可选 props 接口、?.()可选回调、?? []式兜底、死交互、demo 型 props。配合 HumanLayer Skills 的narrow-react-prop-types技能你可以手动逐个排查也可以交给 CI Agent 定期体检——组件类型回到真实契约后代码会更简单测试会更诚实。 提示仓库基于 MIT 协议开源见 LICENSE可放心在项目中安装使用。【免费下载链接】skills项目地址: https://gitcode.com/GitHub_Trending/skills53/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考