hello-ui

本 skill 不是 UI 质量的唯一来源。当前已加载 bootstrap 中的 UI 质量基线负责所有 UI 任务的基础水准；本 skill 在显式 UI 工作流和复杂 UI 任务中，补充更明确的契约执行、实现映射与视觉验收。 .helloagents/ 在本 skill 中统一按项目级存储路径理解：.ralph-*.json 等运行态证据保持项目本地；若 project_store_mode=repo-shared，DESIGN.md 与方案包按当前上下文中已注入的项目知识/方案目录解析。

适用边界

已进入显式 UI 规划/实现/验证路径，或当前项目已激活且任务涉及整页新建、跨多个组件的视觉重做、设计系统改造、需要截图验收的界面任务时，读取本 skill。 标准模式未激活项目中的普通 UI 请求，仍只受当前 bootstrap 的 UI 质量基线约束；修复 bug、调整文案、改业务逻辑等不涉及视觉变更的任务，不读取本 skill。在已有设计系统中工作时，保留已建立的模式、结构和视觉语言。

设计契约优先级

进入 UI 相关的规划、实现、验证时，按以下顺序做设计决策：

1. 当前活跃方案包 plan.md 或 PRD 中已确认的 UI 决策
2. .helloagents/DESIGN.md（按当前项目存储模式解析）
3. 本 skill 的通用规则 缺少上层产物时，才直接依赖下层规则；不得用通用审美覆盖已确认的项目契约。

核心职责

• 遵循上游契约：把 plan.md / PRD / DESIGN.md 中已确认的 UI 决策视为强约束，而不是建议
• 处理可选 UI 契约：若 contract.json 启用 ui.styleAdvisor，复用 .helloagents/.ralph-advisor.json 记录设计方向复查证据；若启用 ui.visualValidation，用 .helloagents/.ralph-visual.json 记录视觉验收证据
• 映射到代码结构：明确 token 放在哪里、组件边界如何划分、状态组件如何组织、动效与主题如何实现
• 做视觉验收闭环：优先使用截图/浏览器工具做桌面与移动端检查；没有工具时也要完成结构化视觉自检