React Native 开发体验规范

React Native Expo AI编程 代码规范 组件模式

dx-expert

一个用于 AI 编程代理的技能，在 React Native Expo 项目中强制执行开发体验原则。

npx skills add agustinoberg/dx-expert-skill

该技能通过强制执行以下规范，教导 AI 代理编写简洁、可维护的 React Native 代码：

单一职责原则 — 状态逻辑放在 Hook 中，渲染逻辑放在组件中
Hook 架构 — 每个文件一个 Hook，小而专注，使用单一对象参数
复合组件模式 — 使用 Component.Root / Component.Header / Component.Content 组合方式，替代布尔 props 和 prop 透传
避免 useEffect — 优先使用派生状态、事件处理器和计算值
记忆化策略 — 不使用 useCallback（交由 React Compiler 处理），仅对计算型常量使用 useMemo
用户体验打磨 — 键盘处理、加载/错误/空状态、安全区域、触摸目标
Expo Router 优先 — 文件路由、布局、模态框、参数传递，优先于手动替代方案
库推荐 — 当代码明显在重复造轮子时，主动建议更好的库

以下情况下，该技能会自动生效：

组合即一切。 与其使用带有不断增长的布尔 props（isEditing、isThread、isForwarding）的庞大组件，不如构建组合共享内部实现的独立组件树。Provider 定义接口，每个消费者决定具体实现。

// 不推荐
<Composer isEditing={true} hideClientPicker={true} showCancelButton={true} />

// 推荐
<EditComposer />  // 只渲染编辑所需的内容，无需布尔值

适用于任何支持 Agent Skills 规范的 AI 编程代理：

MIT