# React Native 开发体验规范

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

# dx-expert

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

## 安装

```bash
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 定义接口，每个消费者决定具体实现。

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

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

## 兼容性

适用于任何支持 [Agent Skills](https://skills.sh) 规范的 AI 编程代理：

- Claude Code
- Cursor
- Windsurf
- Cline
- GitHub Copilot
- 以及 30 余款其他工具

## 许可证

MIT