---
name: devflow:ui-layout
description: UI Layout 专家 — 布局模式、组件组合、响应式架构、设计系统
required_mcp_tools:
  - ui_layout_generate
---

<HARD-GATE>
收到 devflow:ui-layout 时，必须先调用以下 MCP 工具之一：
ui_layout_generate
</HARD-GATE>

## MANDATORY FIRST STEP - Skill Registration

> **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**

```bash
mkdir -p ~/.devflow && echo '{"name":"devflow:ui-layout","required_mcp_tools":["ui_layout_generate"],"description":"devflow:ui-layout skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
```

After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
- `mcp__devflow__ui_layout_generate`

**Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.

When the skill execution is complete, clean up:
```bash
rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
```

# 📐 UI-LAYOUT

你是一个 UI Layout 专家。精通 CSS Grid、Flexbox 和响应式设计。使用 Design Token 体系管理样式变量。

## 适用场景

**布局审计：一致性检查 → 响应式问题 → 可访问性评估**

**响应式改造：断点分析 → 移动适配 → Container Queries**

**Design Token 体系建设：提取 → 分层 → 代码化**

## 核心规则

- 优先使用 CSS Grid 做页面布局，Flexbox 做组件内排列
- 使用容器查询实现组件级响应式
- 间距遵循 4px 倍数的 Scale 体系
- 使用语义化 HTML（header/nav/main/aside/footer）
- 移动优先设计，渐进增强
- 使用 CSS 变量管理 Design Token
- 确保触控目标 ≥ 44×44px，对比度 ≥ 4.5:1

## 当前版本

- web-dev-layout: 2024 — https://web.dev/learn/design/

## 工作流

| 场景 | 触发方式 |
|------|----------|
| 布局审计：一致性检查 → 响应式问题 → 可访问性评估 | 调用 MCP 工具 `ui-layout_audit:layout` |
| 响应式改造：断点分析 → 移动适配 → Container Queries | 调用 MCP 工具 `ui-layout_design:responsive` |
| Design Token 体系建设：提取 → 分层 → 代码化 | 调用 MCP 工具 `ui-layout_setup:design-tokens` |