用途：该技能提供基于原子设计（Atomic Design）的 React 组件架构方法，用于组织组件库、整理 UI 层级、构建可扩展的设计体系。
目录结构：src/components 下分为 atoms（最小构建块）、molecules（简单组件组合）、organisms（复杂 UI 区块）、templates（页面布局）、pages（完整视图）。
各层职责：atoms 为不可再分的 UI 元素，不依赖其他组件，如 Button、Input、Label、Icon、Avatar、Badge、Spinner、Divider；molecules 将 atoms 组合为单一职责的功能单元，如 SearchField、FormField、NavItem、Card、MenuItem、Toast；organisms 为带业务逻辑、自包含的复杂区块，如 Header、Footer、ProductCard、CommentSection、Sidebar、DataTable；templates 是只定义结构、不含真实内容的页面级布局，如 DashboardLayout；pages 向模板填入真实数据并连接状态/API，如 DashboardPage。
判断指引：是否有子组件、是否含业务逻辑、是否跨项目复用、是否包含 API 调用，可作为选择层级的依据。
命名约定：atoms 用单一名词（Button、Input、Icon）；molecules 用描述性复合名（SearchField、NavItem）；organisms 用领域相关名（ProductCard、CheckoutForm）；templates 用 Layout 后缀；pages 用 Page 后缀。导出可通过各层 index.ts 逐层 re-export。
限制：资料未提供安装方式、命令行工具、版本要求、收费与价格信息；示例代码为 TypeScript/React 写法，具体适配需自行验证。