---
name: ui-orchestrator
description: 进行 UI/UX 设计、界面开发或设计系统工作时，选择适用的专门 skill。
allowed-tools: Read, Glob, Bash, AskUserQuestion
---

# UI Orchestrator

UI/UX 技能调度器，根据项目需求路由到专业的外部 Skill。

## Language

- Accept questions in both Chinese and English
- Always respond in Chinese

## 外部 Skill 清单

| Skill | 定位 | 适用场景 | 安装命令 |
|-------|------|----------|----------|
| `baseline-ui` | 代码审查 & 质量守护 | 企业内部系统、代码审查、性能优化 | `npx skills add ibelick/ui-skills` |
| `ui-ux-pro-max` | 设计系统生成 & 决策引擎 | 行业垂直产品、Dashboard、新项目设计 | `npm install -g uipro-cli && uipro init --ai claude` |
| `frontend-design` | 创意美学 & 视觉冲击 | 营销着陆页、品牌官网、创意作品集 | `npx skills add anthropics/skills --skill frontend-design` |
| `swiftui-expert-skill` | SwiftUI 专家指导 | iOS/macOS SwiftUI 开发 | `npx skills add https://github.com/avdlee/swiftui-agent-skill --skill swiftui-expert-skill` |

## 设计哲学光谱

```
保守/安全                    中性/平衡                    大胆/创意
    │                          │                          │
    ▼                          ▼                          ▼
baseline-ui              ui-ux-pro-max              frontend-design

"不出错"                   "符合行业"                  "令人难忘"
```

## 工作流程

```
1. 检测项目需求
   │
   ├── 平台类型（Web / iOS / Android）
   ├── 项目性质（企业 / 创意 / 行业垂直）
   └── 任务类型（新建 / 审查 / 修复）
   │
   ▼
2. 检查 Skill 是否存在
   │
   ├── 存在 → 路由到对应 Skill
   └── 不存在 → 提示安装命令
   │
   ▼
3. 执行对应 Skill
```

## 场景路由表

### 按平台路由

| 平台 | 首选 Skill | 备选 |
|------|-----------|------|
| **SwiftUI** (iOS/macOS) | `swiftui-expert-skill` | - |
| **Web** (React/Vue/HTML) | 见下方按任务路由 | - |
| **Flutter/Compose** | `ui-ux-pro-max` | - |

### 按任务路由（Web）

| 任务类型 | 首选 Skill | 理由 |
|----------|-----------|------|
| **新项目设计系统** | `ui-ux-pro-max` | 生成完整设计系统 |
| **代码审查** | `baseline-ui` | 专为审查设计 |
| **修复无障碍** | `baseline-ui` (`fixing-accessibility`) | 最专业 |
| **修复动画性能** | `baseline-ui` (`fixing-motion-performance`) | 最深入 |
| **营销着陆页** | `frontend-design` | 需要视觉冲击力 |
| **品牌官网** | `frontend-design` | 需要独特识别度 |
| **企业内部系统** | `baseline-ui` | 稳定、可维护 |
| **Dashboard** | `ui-ux-pro-max` → `baseline-ui` | 功能性 + 质量保障 |

### 按项目性质路由

| 项目性质 | 推荐组合 | 使用顺序 |
|----------|---------|----------|
| **创意/营销** | `frontend-design` → `baseline-ui` | 先创意，后审查 |
| **企业/行业** | `ui-ux-pro-max` → `baseline-ui` | 先设计系统，后质量 |
| **内部工具** | `baseline-ui` | 全程约束 |

## Skill 检测

在调用外部 Skill 前，**必须**检测其是否已安装。

### 检测方法

```bash
# 检查 skills 目录（Claude Code / Codex / OpenCode）
for dir in ~/.claude/skills ~/.agents/skills; do
    ls -la "$dir" 2>/dev/null | grep -E "(baseline-ui|ui-ux-pro-max|frontend-design|swiftui-expert)"
done

# 检查项目本地 skills
for dir in .claude/skills .agents/skills; do
    ls -la "$dir" 2>/dev/null | grep -E "(baseline-ui|ui-ux-pro-max|frontend-design|swiftui-expert)"
done
```

### 未安装提示模板

```markdown
**⚠️ 所需 Skill 未安装**

您需要的 `{skill-name}` 尚未安装。请运行以下命令安装：

{install-command}

安装完成后，请重新运行 UI 任务。
```

## 约束

### 调度约束

- [ ] **必须先检测目标 Skill 是否存在**
- [ ] **禁止复制外部 Skill 的具体规则**

### 路由约束

- [ ] SwiftUI 项目 → 必须路由到 `swiftui-expert-skill`
- [ ] 创意/营销项目 → 优先 `frontend-design`
- [ ] 企业/内部项目 → 优先 `baseline-ui`
- [ ] 新项目设计系统 → 优先 `ui-ux-pro-max`

### 组合使用约束

- [ ] 创意项目完成后，**建议**使用 `baseline-ui` 审查

## Skill 协作

| 场景 | 协作 Skill | 说明 |
|------|-----------|------|
| 开发阶段 | `/dev-workflow` | 被调用：UI 任务开发时 |
| 代码审查 | `/code-quality` | 协作：UI 代码质量检查 |
| 测试阶段 | `/testing-guide` | 协作：UI 组件测试 |

## 使用示例

### 示例一：SwiftUI 开发

```
用户：帮我优化这个 SwiftUI 视图的性能

Claude：
1. 检测 Skill...
   ✅ swiftui-expert-skill 已安装

2. 路由到 swiftui-expert-skill 处理 SwiftUI 性能优化...
```

### 示例二：新项目设计系统

```
用户：我要做一个医疗行业的 SaaS 产品，帮我设计 UI

Claude：
1. 检测 Skill...
   ❌ ui-ux-pro-max 未安装

⚠️ 所需 Skill 未安装

您需要的 `ui-ux-pro-max` 尚未安装。请运行以下命令安装：

npm install -g uipro-cli && uipro init --ai claude

安装完成后，请重新运行 UI 任务。
```

### 示例三：营销着陆页

```
用户：帮我设计一个有视觉冲击力的产品着陆页

Claude：
1. 检测 Skill...
   ✅ frontend-design 已安装

2. 路由到 frontend-design 处理创意设计...

（设计完成后）

3. 建议：设计完成后，可使用 baseline-ui 进行无障碍和性能审查
```

## 参考资料

- [ibelick/ui-skills](https://github.com/ibelick/ui-skills) - 代码审查 & 质量守护
- [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) - 设计系统生成
- [AvdLee/SwiftUI-Agent-Skill](https://github.com/AvdLee/SwiftUI-Agent-Skill) - SwiftUI 专家指导
- [anthropics/skills/frontend-design](https://github.com/anthropics/skills) - 创意美学 & 视觉冲击