Bạn đang biên soạn tệp tham chiếu hệ thống thiết kế CLAUDE.md chính xác.
Tệp này sẽ nằm trong thư mục gốc của dự án và đóng vai trò là nguồn duy nhất của
sự thật cho bất kỳ trợ lý AI (hoặc nhà phát triển con người) nào đang làm việc trên cơ sở mã này.
## Đầu vào
- **Cấu trúc mã thông báo:** [Phase 2 output]
- **Tài liệu về thành phần:** [Phase 3 output]
- **Siêu dữ liệu dự án:**
- Tên dự án:
- Nhóm công nghệ: [Next.js 14+ / React 18+ / Tailwind 3.x / etc.]
- Phiên bản nút:
- Trình quản lý gói: [npm / pnpm / yarn]
## Cấu trúc CLAUDE.md
Biên dịch tệp cuối cùng với các phần này THEO THỨ TỰ NÀY:
### 1. Nhận dạng dự án
- Tên dự án, mô tả, định vị
- Tóm tắt ngăn xếp công nghệ (một bảng)
- Tổng quan về cấu trúc thư mục (src/layout)
### 2. Thẻ tham khảo nhanh
Một bảng tóm tắt ngắn gọn - thông tin cần thiết thường xuyên nhất trong nháy mắt:
- Màu chính có giá trị hex (tối đa 6)
- Ngăn xếp phông chữ
- Thang đo khoảng cách (thể hiện trực quan: 4, 8, 12, 16, 24, 32, 48, 64)
- Điểm dừng
- Giá trị bán kính đường viền
- Giá trị bóng
- Bản đồ chỉ số Z
### 3. Design Token — Tham khảo đầy đủ
Được tổ chức theo cấp (Nguyên thủy → Ngữ nghĩa → Thành phần).
Mỗi mục nhập mã thông báo: tên, giá trị, biến CSS, lớp Tailwind tương đương.
Sử dụng bảng để có thể quét được.
### 4. Hệ thống kiểu chữ
- Bảng tỷ lệ loại (tên, kích thước, trọng lượng, chiều cao dòng, khoảng cách chữ, cách sử dụng)
- Quy tắc đáp ứng
- Chiến lược tải phông chữ
### 5. Hệ màu
- Bảng màu đầy đủ với mô tả mẫu màu (tên, hex, ngữ cảnh sử dụng)
- Bảng ánh xạ màu ngữ nghĩa
- Ánh xạ chế độ tối (nếu có)
- Ghi chú tuân thủ tỷ lệ tương phản
### 6. Hệ thống bố cục
- Đặc điểm lưới
- Chiều rộng thùng chứa
- Hệ thống khoảng cách với tỷ lệ trực quan
- Hành vi điểm dừng
### 7. Thư viện thành phần
[Insert Phase 3 output for each component]
### 8. Chuyển động & Hoạt hình
- Bảng đặt trước được đặt tên (tên, thời lượng, nới lỏng, cách sử dụng)
- Quy tắc: khi nào nên tạo hiệu ứng động, khi nào không
- Hạn chế về hiệu suất
### 9. Quy ước mã hóa
- Các mẫu đặt tên file
- Đơn hàng nhập khẩu
- Mẫu cấu trúc tập tin thành phần
- Quy ước sắp xếp lớp CSS (nếu là Tailwind)
- Các mô hình quản lý nhà nước được sử dụng
### 10. Quy tắc & ràng buộc
Những quy tắc cứng rắn không bao giờ được phá vỡ:
- "Không bao giờ sử dụng màu hex nội tuyến - luôn là mã thông báo tham chiếu"
- "Tất cả các yếu tố tương tác phải có trạng thái tiêu điểm rõ ràng"
- "Mục tiêu cảm ứng tối thiểu: 44x44px"
- "Tất cả hình ảnh phải có văn bản thay thế"
- "Không có giá trị chỉ số z nào nằm ngoài thang đo được xác định"
- [Add project-specific rules]
## Yêu cầu về định dạng
- Sử dụng bảng đánh dấu cho tất cả ánh xạ mã thông báo/giá trị
- Sử dụng các khối mã cho tất cả các mẫu mã
- Giữ mỗi phần khép kín (có thể đọc được mà không cần cuộn sang các phần khác)
- Đính kèm mục lục ở trên cùng với các liên kết neo
- Độ dài dòng tối đa: 100 ký tự để dễ đọc
- Thích các giá trị rõ ràng hơn các tham chiếu "xem ở trên"
## Quy tắc quan trọng
Tập tin này phải là AUTHORITATIVE. Nếu có sự mơ hồ giữa
CLAUDE.md và mã thực tế CLAUDE.md phải được cập nhật thành
phù hợp với thực tế - không bao giờ ngược lại. Tài liệu này ghi lại LÀ gì,
không phải những gì NÊN LÀ (đó là một lộ trình riêng).
