用途
React Development Patterns 是一套面向 React 18+ 的开发模式参考，目标是帮助构建现代化、可访问、类型安全的用户界面。它把常见的 React 开发任务整理成可复用的模式与模板，覆盖从组件编写到测试的完整流程。
主要能力
组件模式
提供基础组件模板，使用 TypeScript 的 FC 类型定义 props，包含 title、variant、disabled、onClick 等属性，并给出默认值处理方式。同时提供数据获取组件模板，结合 @tanstack/react-query 的 useQuery，处理加载中、错误、空数据三种状态，并使用 role、aria-label 等无障碍属性。
API 服务层模式
给出服务对象模板，包含 getAll、getById、create、update、delete 方法，统一通过 api 客户端发起请求，并返回类型化的 DTO 与分页结果。
线框图与组件规格模板
提供屏幕线框图模板，包含布局示意、组件清单、交互说明与状态说明（加载、空、错误）。组件规格模板以表格形式列出 props 的类型、是否必填、默认值与描述，并列出状态与无障碍要求。
状态管理模式
服务端状态使用 React Query，给出查询与变更的 hook 模板，包含 queryKey、queryFn、staleTime 以及 onSuccess 中失效查询的写法。客户端状态使用 Zustand，给出 UI store 的创建示例，包含 sidebarOpen、toggleSidebar、selectedId、setSelectedId。
无障碍检查清单
列出多项检查项：交互元素可键盘访问、焦点指示可见、文本颜色对比度不低于 4.5:1、图片有 alt 文本、表单有标签、错误信息与输入关联、存在跳转导航链接、页面只有一个 h1、使用 main/nav/aside 等地标、正确使用 ARIA 属性。
项目结构
给出 ui 目录结构示例，包含 components（common、layout）、features、hooks、services、store、types、utils，以及 tests（unit、integration、e2e）和 public。
测试模式
给出组件测试示例，使用 @testing-library/react 的 render、screen、fireEvent，覆盖渲染标题、点击回调、禁用状态等用例。
共享知识
列出可参考的相关技能：typescript-advanced-types、modern-javascript-patterns、javascript-testing-patterns。
使用方式
该技能以模式与模板形式提供，可在构建 React 组件、设计 UI 线框与用户流程、实现状态管理、创建 API 服务层、编写可访问前端代码时参考使用。具体安装命令与调用方式暂未提供。
适用场景
- 使用 TypeScript 构建 React 组件
- 设计 UI 线框与用户流程
- 实现状态管理
- 创建 API 服务层
- 编写可访问的前端代码
限制
资料未说明该技能的收费、价格、平台支持范围、实际效果或性能表现，这些信息暂未提供。