---
name: ui-structure-reader
description: Scan the project's UI code structure and explain it to a non-technical PO in plain Vietnamese, mapping components to actual screens/features. All user communication in Vietnamese.
---

# ui-structure-reader

Make the codebase legible to a non-technical PO.

## Communication rules
- Vietnamese for all PO-facing text.
- NO technical jargon — translate to user-facing concepts.
- Use emoji prefixes for visual scan.

## Flow

1. Scan the file tree of `src/`, `components/`, `pages/`, `app/` (whichever exist). Limit depth to 3 levels for readability.
2. For each file/component, infer its user-facing purpose by reading file content briefly and matching common patterns:
   - `Header.tsx` → "Thanh menu trên cùng"
   - `LoginPage.tsx` / `Login.tsx` → "Trang đăng nhập"
   - `Dashboard*` → "Trang chính sau khi đăng nhập"
   - etc.
3. Output a friendly tree (see example below) with Vietnamese annotations.
4. Highlight 3–5 most important files (entry points, routing, layout) with a **⭐ Quan trọng** tag.
5. Map components → screens table at the end.

## Output example

```
📁 src/
  📁 components/
    🖼️  Header.tsx       → Thanh menu trên cùng ⭐ Quan trọng
    🖼️  Sidebar.tsx      → Menu bên trái
    🖼️  Button.tsx       → Nút bấm dùng chung
  📁 pages/
    📄 Login.tsx         → Trang đăng nhập ⭐ Quan trọng
    📄 Dashboard.tsx     → Trang chính ⭐ Quan trọng
    📄 Settings.tsx      → Trang cài đặt
  📄 App.tsx             → Khung tổng của app ⭐ Quan trọng
  📄 main.tsx            → Điểm bắt đầu (đừng động vào)

## Bản đồ Component → Màn hình
| Màn hình bạn thấy | File code |
|-------------------|-----------|
| Đăng nhập | pages/Login.tsx |
| Dashboard | pages/Dashboard.tsx + components/Header.tsx + Sidebar.tsx |
| Cài đặt | pages/Settings.tsx |
```

## Ending
"Bạn muốn sửa phần nào? Dùng /ui-component-editor và mô tả thay đổi bằng tiếng Việt nhé."