62 lines
2.1 KiB
Markdown
62 lines
2.1 KiB
Markdown
# 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 |