用途：为前端项目提供系统化的组件层级规范，按原子设计方法论划分 atoms（原子）→ molecules（分子）→ organisms（有机体）→ templates（模板）→ pages（页面），并统一应用于 Phlex（Rails）、ReactJS Vite SPA、Next.js App Router、React Native 四个平台。
主要能力：定义各级组件的导入与组合规则。原子不可再分、不能组合其他原子，且必须使用设计令牌而非硬编码值；分子只组合原子，单一职责；有机体是独立界面区块，也是最低的数据感知层级（通过 props/hooks）；模板只定义布局骨架，不含真实内容；页面由模板加真实数据构成。另含目录结构与各平台命名约定规则。
使用方式：每条规则对应 rules/<rule-id>.md 自包含文件，含四个平台的 bad/good 代码对照，按任务只读取匹配的规则文件，不要预加载整个目录。规则前缀包括 atom-、molecule-、organism-、template-、page-、org-。不确定组件属于哪一级时读 references/choosing-the-atomic-level.md；层级错乱时读 references/diagnosing-misplaced-components.md；Next.js 判断 use client 位置或 layout.tsx 与模板取舍时读 references/nextjs-server-client-boundary.md（Vite、Phlex、React Native 跳过）。
适用场景：创建新 UI 组件、审查组件组合与导入方向、跨平台组织组件目录、构建设计系统或组件库、决定数据获取逻辑归属。
限制：本技能只负责层级归属与组合关系，不负责组件样式所用的令牌，令牌规则由 std-design-system 负责；未注册的令牌类名会静默编译为无 CSS，因此“使用令牌”与“使用已注册令牌”是不同断言。导航结构相关内容指向 @skills/ui-ux-patterns/references/drill-down-navigation.md。具体安装命令与收费信息暂未提供。