# Skill: Thiết kế Layout và Prototype HTML/CSS - Phiên bản v1

## 1. Mục đích (Purpose)
Kỹ năng này hướng dẫn BA thiết kế và hiện thực hóa giao diện người dùng (UI mockup/prototype) dưới dạng mã nguồn HTML/CSS tự chứa (self-contained). Prototype giúp khách hàng hình dung trực quan luồng đi của màn hình, đồng thời giúp lập trình viên và kiểm thử viên xác định chính xác cấu trúc trang, ID của các phần tử và vị trí hiển thị lỗi.

Ngôn ngữ output: auto-detect theo ngôn ngữ của ticket/task input — xem `custom/rules/output-language.md` (input tiếng Việt → output tiếng Việt; ngược lại mặc định tiếng Anh).

## 2. Kiến thức cần có (Prerequisite Knowledge)
- **HTML5 Semantic Tags:** Sử dụng các thẻ ngữ nghĩa như `<header>`, `<main>`, `<section>`, `<nav>`, `<form>`, `<input>`, `<button>`, `<label>` để trang web có cấu trúc chuẩn SEO và dễ kiểm thử.
- **Vanilla CSS Layouts:** Thành thạo Flexbox và CSS Grid để dựng bố cục nhanh chóng, đáp ứng tốt trên các kích thước màn hình khác nhau (Responsive).
- **Nguyên lý UX/UI cơ bản:**
  - *Primary Flow & Visual Hierarchy:* Làm nổi bật các thành phần quan trọng bằng kích thước, màu sắc và độ tương phản (ví dụ: nút bấm chính).
  - *Bố cục F-pattern & Z-pattern:* Đặt tiêu đề, logo ở góc trên bên trái, thông tin quan trọng chạy ngang và chéo xuống nút bấm thực thi ở góc dưới bên phải.
  - *Khoảng trắng (Whitespace):* Giữ khoảng cách hợp lý giữa các nhóm thông tin (Chunking) để tránh rối mắt.

## 3. Quy trình thực hiện (Step-by-step Process)
- **Bước 1: Phân tích các thành phần (Wireframing mentally):**
  Dựa trên tài liệu phân tích, liệt kê tất cả các phần tử UI cần có (ví dụ: Logo, Tiêu đề, Ô nhập ID, Ô nhập Password, Nút Đăng nhập, Link Quên mật khẩu, Vùng hiển thị lỗi).
- **Bước 2: Dựng khung HTML:**
  - Viết mã HTML chuẩn. Bắt buộc đặt các thuộc tính `id`, `name`, `type`, `placeholder` rõ ràng cho các ô nhập liệu (ví dụ: `<input type="text" id="username" name="username"...>`).
  - Đưa các thông báo lỗi (Error message) vào đúng vị trí dưới các ô nhập liệu, gán class dạng `.error-message` hoặc `.inline-error` và tạm ẩn đi bằng CSS (`display: none;` hoặc thông qua trạng thái ẩn) nhưng vẫn có mặt trong mã nguồn để Tester biết vị trí hiển thị.
- **Bước 3: Tạo kiểu dáng CSS:**
  - Sử dụng thẻ `<style>` nội bộ nằm ngay trong file HTML (để file HTML tự chứa tất cả tài nguyên, dễ chia sẻ và import vào tài liệu spec).
  - Sử dụng bảng màu hiện đại (tránh màu đỏ/xanh lá gốc, dùng các màu trung tính, dịu mắt phối hợp hiệu ứng hover cho các nút bấm).
  - Đảm bảo thiết kế responsive cơ bản bằng media queries nếu cần.
- **Bước 4: Kiểm tra và lưu trữ:**
  Mở file HTML trên trình duyệt để kiểm tra trực quan. Lưu vào thư mục `02.BA-Specs/03.UI-Prototypes/[functionId]/`.

## 4. Checklist kiểm tra (Checklist for Verification)
- [ ] File HTML có tự chứa toàn bộ CSS không? (Không liên kết tới file CSS bên ngoài trừ font chữ hệ thống).
- [ ] Tất cả các trường nhập liệu đã có thẻ `<label>` tương ứng và thuộc tính `id`, `name` chưa?
- [ ] Vị trí các thông báo lỗi (Alert và Inline error) đã được dựng sẵn trong code và định dạng rõ ràng chưa?
- [ ] Giao diện có hiển thị cân đối trên cả màn hình Desktop và Mobile không?
- [ ] Các phần tử tương tác (Button, Link, Input) có hiệu ứng trực quan khi hover hoặc focus không?

## 5. Output mong đợi (Expected Output)
- Một file HTML độc lập chứa đầy đủ code HTML và CSS nội bộ, đặt tên theo chuẩn: `UI-Prototype_v1.html` trong thư mục `02.BA-Specs/03.UI-Prototypes/[functionId]/`.