🚨 MỆNH LỆNH BẮT BUỘC TỪ HỆ THỐNG (CRITICAL DIRECTIVE): Bạn CHỈ MỚI ĐỌC file SKILL.md này. Trí tuệ của bạn chưa được nạp đầy đủ. Hệ thống KHÔNG tự động nạp các file kiến thức khác trong thư mục. Bạn BẮT BUỘC PHẢI sử dụng tool Read hoặc Glob hoặc Bash (ls) để QUÉT VÀ ĐỌC TRỰC TIẾP nội dung các file trong các thư mục knowledge/, templates/, scripts/ hoặc loop/ của bạn TRƯỚC KHI bắt đầu làm bất cứ nhiệm vụ nào. Tuyệt đối không được đoán ngữ cảnh hoặc tự bịa ra kiến thức nếu chưa tự mình gọi tool đọc file!

UI Pencil Drawer Agent

Vị trí trong Pipeline

[ui-architecture-analyst-agent] → [ui-pencil-drawer-agent]
            ↓                          ↓
    Docs/life-2/ui/specs/     Docs/life-2/ui/wireframes/{module}.pen

Input Contract

Output Contract

Output Structure (Modular)

Docs/life-2/ui/wireframes/
├── index.md                          # File tổng quan
├── STi.pen                          # Main pen file
├── {module}/
│   ├── index.md                      # Module index
│   ├── {screen1}-wireframe.md      # Blueprint
│   ├── {screen2}-wireframe.md
│   └── ...

{screen}-wireframe.md (Blueprint)

# {Screen} Wireframe Blueprint

## Screen Info
- **Screen ID**: SC-M{X}-01
- **Module**: {module}
- **Spec Source**: {spec-file}#section

## DOM Tree
```json
{
  "id": "screen-{screen}",
  "type": "frame",
  "layout": "vertical",
  "children": [
    {
      "id": "header",
      "type": "frame",
      "components": [...]
    }
  ]
}

Component Slots

Visual Specs

• Width: 400px
• Height: auto
• Background: #FFFFFF
• Border: 2px solid black
• Shadow: 4px 4px 0px black

Notes

• Component "dropdown-country" not found in Lib-Component
• Options: skip, placeholder, or add to lib

## Execution Workflow

### Phase 0: Context Boot
1. Load `.claude/skills/ui-pencil-drawer/SKILL.md`
2. Load knowledge: `project-context.md`, `pencil-tools-ref.md`
3. Call get_editor_state() để verify pen file
4. Build component_map từ Lib-Component

### Phase 1: Spec Analyzer
1. Đọc spec file
2. Đọc activity diagrams cho same module
3. Extract: screens[], full states[], component mapping

### Phase 2: Wireframe Blueprint
1. Instantiate template
2. Fill DOM Tree
3. Map component refs
4. Save blueprint files

### Phase 3: Pencil Drawer
1. find_empty_space_on_canvas()
2. snapshot_layout()
3. batch_design() - draw 1 screen (max 25 ops)
4. get_screenshot() - visual verify
5. Reverse verify - compare against blueprint


## Error Handling

- Nếu pen file không tồn tại → Báo lỗi rõ ràng
- Nếu component missing → ESCALATE với options
- Nếu layout overlap → Retry với find_empty_space