该技能是一套前端 TypeScript 开发规则，用于在实现 React 组件时保持类型安全、组件设计与状态管理的一致性。
用途 适用于 React/TypeScript 前端组件的实现与代码审查，帮助识别前端特有的问题写法，并给出编码约定与错误处理标准。
主要能力 一、前端特有反模式：避免超过三层的 prop drilling（应改用 Context API 或状态管理）、避免 300 行以上的巨型组件（应拆分）。 二、数据流类型安全：前端到后端方向，Props/State 由 TypeScript 保证类型，经序列化发出 API 请求；后端到前端方向，API 响应以 unknown 接收，经类型守卫校验后再进入 State。外部 API 响应、localStorage/sessionStorage、URL 参数一律按 unknown 处理并校验；React Props/State 由 TypeScript 管理；受控表单输入依靠 React 合成事件保证类型安全。 三、类型复杂度管理：Props 数量以 3 到 7 个为宜，超过 10 个考虑拆分组件；可选 Props 占比控制在 50% 以内，过多时考虑默认值或 Context；嵌套最多两层；类型断言使用三次以上应重新审视设计；外部 API 类型按实际情况定义，并在内部做转换。 四、组件设计：强制使用函数组件，禁止类组件（Error Boundary 除外）；自定义 Hook 作为逻辑复用的标准模式。 五、函数设计：参数最多 2 个，3 个以上改用对象参数。Props 即接口，全部必要信息通过 Props 显式定义，避免隐式依赖全局状态或 Context，并显式定义 Props 类型。 六、环境变量与依赖注入：使用构建工具的环境变量系统（浏览器中 process.env 不可用）；前端代码公开，密钥不得放在客户端；通过自定义 Hook 实现依赖注入以保证可测试性与模块化。 七、异步处理：统一使用 async/await，用 try-catch 或 Error Boundary 处理错误，显式定义返回值类型（如 Promise<Result>）。 八、格式规则：省略分号（遵循 Biome 设置）；类型用 PascalCase，变量与函数用 camelCase；导入使用 src/ 绝对路径。 九、整洁代码：立即删除无用代码与调试用 console.log，不保留注释掉的代码（用版本控制管理历史），注释解释“为什么”而非“做什么”。 十、错误处理：禁止吞错，所有错误必须有日志输出与适当处理；遵循快速失败原则；避免无条件返回默认值掩盖错误；可用 Result 类型模式让错误在类型上显式表达；定义自定义错误类（如 AppError 及 ValidationError/ApiError/NotFoundError 等按用途区分）；React 中按层处理：Error Boundary 捕获组件渲染错误并展示回退 UI，自定义 Hook 检测业务规则违规并原样传播 AppError，API 层把 fetch 错误转换为领域错误；日志中不得包含密码、令牌、apiKey、secret、信用卡等敏感信息；事件处理器中的 async/await 需配 try-catch，记录并重新抛出错误或展示错误状态。 十一、性能优化：用 React.memo 缓存开销大的组件，合理组织状态结构以减少重渲染，用 React.lazy 与 Suspense 做代码分割，通过构建脚本监控包体积并控制在 500KB 以内。
使用方式 资料未提供具体安装或调用命令，暂未提供。
适用场景 React + TypeScript 前端项目的组件开发、代码评审与规范落地。
限制 该技能为规则说明类内容，资料未提供具体工具形态、运行方式与配套脚本，暂未提供。