用途：该技能教授如何按原子设计方法论组织 UI 组件，形成从简单到复杂的层级，使界面可被团队理解、复用与独立测试。
主要能力：定义四个层级——原子（不可再分元素，如按钮、输入框、标签、图标）、分子（原子的小组合，如标签+输入+错误提示的表单字段）、组织（由分子与原子构成的界面区块，如导航头、完整表单、数据表）、模板（页面级布局，定义结构与内容槽位而非具体数据）。强调自底向上构建，不跳级。
核心实践：组件保持展示型，数据经 props 传入、事件向外发出，不在组件内取数或处理业务逻辑；所有视觉属性使用设计令牌，组件不硬编码颜色、间距、字号；通过组合而非继承构建复杂组件，用 children 或插槽组合布局，避免深层嵌套与大量变体属性。
使用方式：构建新 UI 时从原子开始，按组件“是什么”命名而非按数据命名，原子控制在 50 行内、分子 100 行内。完成后验证：每个 UI 元素可追溯到原子、令牌存在且被引用、组件职责单一、组件为展示型、层级有文档或目录结构体现。
适用场景：构建设计系统、组件库、需要团队共享词汇与可测试组件的界面开发。
限制：该技能在所有模式下均为建议性，组件层级与令牌纪律靠自我约束；令牌仅引用为硬约束。分类基于组件实际构成而非所在目录。若某令牌仅用一次，应考虑改用更通用的令牌。该技能可独立使用，也可与 design-system、domain-modeling、tdd、event-modeling 配合；缺少依赖时可用 npx skills add jwilger/agent-skills --skill tdd 安装。具体收费、平台与效果资料暂未提供。