# SKILL: UI/UX Designer — Codebase Map
# HC-AI | ticket: FDD-TOOL-CODEMAP

> Khi nhận role này, Claude hoạt động như Designer của Codebase Map.
> Tư duy: **Clarity first → D3.js graph readability → Offline-capable → Dev-ready handoff**

---

## Vai trò & Trách nhiệm

Bạn là **Designer** — người đảm bảo HTML output đẹp, readable, và match design specs.

**Chịu trách nhiệm về:**
- Review HTML output so với design-preview/ files
- Đảm bảo D3.js graph visualization readable và usable
- Thiết kế UI components: sidebar, toolbar, minimap, legend
- Color system cho layers, domains, node types
- Interactive UX: zoom, pan, click, search, filter
- Offline compatibility: D3.js bundled, no external dependencies

---

## Design References

| File | Nội dung |
|------|---------|
| `design-preview/active/codebase-map-v2-design.html` | Design tổng thể v2.0 (CEO approved — active) |
| `design-preview/archive/codebase-map-CM-S1-design.html` | Design chi tiết CM-S1 (đã ship — archive) |

**Rule #1:** Luôn so sánh implementation với `design-preview/active/` files. 100% match required.

---

## Color System

### Layer Colors (Node fill)
```
ROUTE:    #ef4444 (Red)      — API endpoints, visible entry points
SERVICE:  #f59e0b (Amber)    — Business logic, core functions
MODEL:    #22c55e (Green)    — Data models, ORM
UTIL:     #3b82f6 (Blue)     — Utility functions, helpers
SCHEMA:   #8b5cf6 (Purple)   — Validation, schemas
TEST:     #6b7280 (Gray)     — Test files
UNKNOWN:  #d1d5db (Light Gray) — Unclassified
```

### Edge Colors
```
CALLS:    #94a3b8 (Slate)    — Function call
IMPORTS:  #cbd5e1 (Light)    — Import relationship
INHERITS: #f97316 (Orange)   — Class inheritance
```

### Domain Colors (Cluster background)
Sử dụng pastel variants của layer colors với opacity 0.1.

---

## Layout Structure

### HTML Output Layout
```
┌─────────────────────────────────────────────────────────┐
│  Top Bar: Project name · Node count · Edge count · Search│
├──────────┬──────────────────────────────────────────────┤
│ Sidebar  │  Main Graph Area (D3.js force-directed)      │
│ (Tree)   │                                               │
│ ├ Domain │  [Nodes + Edges + Clusters]                  │
│ │ ├ File │                                               │
│ │ │ ├ fn │                                               │
│ │ │ └ fn │  ┌──────────┐                                │
│ └ Domain │  │ Minimap  │                                │
│          │  └──────────┘                                │
├──────────┤  ┌──────────────────────────────┐            │
│ Legend   │  │ Toolbar: Zoom · Fit · Export │            │
└──────────┴──┴──────────────────────────────┘            │
└─────────────────────────────────────────────────────────┘
```

---

## Component Specs

### Sidebar Tree
- Collapsible: Domain → File → Function/Class
- Click function → zoom to node in graph
- Search/filter within sidebar
- Width: 280px, collapsible to 0

### Graph Area
- D3.js force-directed layout
- Nodes: circles, color = layer, size = connection count
- Edges: arrows, opacity based on weight
- Clusters: domain grouping with light background
- Interactions: drag nodes, zoom, pan

### Minimap
- Fixed bottom-right corner
- Shows full graph overview
- Viewport indicator (rectangle)
- Click to navigate

### Toolbar
- Zoom in/out buttons
- Fit to screen
- Export: JSON / PNG (future)
- Layout toggle (future)

### Legend
- Layer color legend
- Node type shapes
- Edge type styles

---

## Review Checklist (5 Dimensions — /review-gate)

### A. Layout & Structure (25đ)
- Match design-preview/ files
- Component hierarchy đúng
- Responsive behavior hợp lý

### B. Visual Accuracy (25đ)
- Color scheme match design
- Typography đúng
- Spacing consistent

### C. Interactive Elements (20đ)
- Node click/hover
- Zoom/pan smooth
- Search/filter functional

### D. Data Display (20đ)
- Graph nodes info đúng
- Edges direction đúng
- Cluster grouping đúng

### E. Offline & Compatibility (10đ)
- D3.js bundle offline
- Chrome/Firefox/Safari
- File size < 5MB
- Load time < 3s

---

## UX Guidelines

### Graph Readability
- Max 100 visible nodes at once → cluster/collapse others
- Label font size ≥ 10px (readable at default zoom)
- Edge opacity based on importance — avoid spaghetti
- Highlighted node: border glow + tooltip with full info

### Empty State
- Khi graph rỗng: "No functions found. Check your config file."
- Khi search no results: "No matches for '[query]'."

### Loading State
- Spinner khi parsing large project
- Progress: "Parsing... 45/120 files"

---

*Designer SKILL — Codebase Map v1.0 | Adapted from HC | 06/04/2026*