CSS

Tạo một máy tính khoa học toàn diện với HTML5, CSS3 và JavaScript bắt chước các máy tính chuyên nghiệp. Thực hiện tất cả các phép tính số học cơ bản với thứ tự phép tính thích hợp. Bao gồm các hàm khoa học nâng cao (lượng giác, logarit, hàm mũ, thống kê) với khả năng chuyển đổi độ/radian. Thêm các thao tác bộ nhớ (M+, M-, MR, MC) bằng các chỉ báo trực quan. Duy trì nhật ký lịch sử tính toán có thể cuộn được và có thể xóa hoặc lưu. Triển khai hỗ trợ bàn phím đầy đủ với ánh xạ phím và phím tắt thích hợp. Thêm khả năng xử lý lỗi mạnh mẽ để chia cho số 0, các hoạt động không hợp lệ và điều kiện tràn bằng các thông báo lỗi hữu ích. Tạo một thiết kế đáp ứng có thể chuyển đổi giữa bố cục tiêu chuẩn và bố cục khoa học dựa trên kích thước hoặc hướng màn hình. Bao gồm nhiều tùy chọn chủ đề (cổ điển, hiện đại, độ tương phản cao). Thêm phản hồi âm thanh tùy chọn khi nhấn nút bằng điều khiển âm lượng. Triển khai chức năng sao chép/dán cho kết quả và biểu thức.

Phát triển trò chơi bắn súng góc nhìn thứ nhất bằng Three.js và JavaScript. Tạo các mô hình vũ khí chi tiết với hình ảnh động và hiệu ứng chân thực. Triển khai hệ thống phát hiện và gây sát thương chính xác. Thiết kế nhiều cấp độ trò chơi với nhiều môi trường và mục tiêu khác nhau. Thêm kẻ thù AI ​​có hành vi tìm đường và chiến đấu. Tạo hiệu ứng hạt cho các tia sáng, tác động và vụ nổ của mõm. Triển khai chế độ nhiều người chơi với các mục tiêu theo nhóm. Bao gồm hệ thống nhặt và kiểm kê vũ khí. Thêm hiệu ứng âm thanh cho vũ khí, tiếng bước chân và môi trường. Tạo theo dõi số liệu thống kê và tính điểm chi tiết. Triển khai hệ thống phát lại cho các kill cam và điểm nổi bật của trận đấu.

Tạo trình xem PDF dựa trên web bằng HTML5, CSS3, JavaScript và PDF.js. Xây dựng giao diện rõ ràng với các điều khiển điều hướng trực quan. Triển khai điều hướng trang bằng hình thu nhỏ và chế độ xem phác thảo. Thêm tìm kiếm văn bản với tính năng đánh dấu kết quả. Bao gồm các điều khiển thu phóng và điều chỉnh độ rộng/chiều cao vừa vặn. Thực hiện lựa chọn và sao chép văn bản. Thêm các công cụ chú thích bao gồm đánh dấu, ghi chú và vẽ. Hỗ trợ chế độ xoay và trình bày tài liệu. Bao gồm chức năng in với các tùy chọn. Tạo một thiết kế đáp ứng hoạt động trên tất cả các thiết bị. Thêm thuộc tính tài liệu và hiển thị siêu dữ liệu.

Tạo ứng dụng hẹn giờ pomodoro toàn diện bằng HTML5, CSS3 và JavaScript theo kỹ thuật quản lý thời gian. Thiết kế một giao diện trang nhã với chỉ báo tiến trình hình tròn lớn, sinh động, thể hiện trực quan phiên hiện tại. Cho phép tùy chỉnh khoảng thời gian làm việc (mặc định 25min), thời gian nghỉ ngắn (mặc định 5min) và thời gian nghỉ dài (mặc định 15min). Bao gồm tích hợp danh sách nhiệm vụ nơi người dùng có thể liên kết các phiên pomodoro với các nhiệm vụ cụ thể. Thêm thông báo âm thanh có thể định cấu hình để chuyển đổi khoảng thời gian bằng điều khiển âm lượng. Thực hiện thống kê chi tiết theo dõi năng suất hàng ngày/hàng tuần bằng biểu đồ trực quan. Sử dụng localStorage để duy trì cài đặt và lịch sử giữa các phiên. Làm cho ứng dụng có thể cài đặt dưới dạng PWA với thông báo và hỗ trợ ngoại tuyến. Thêm phím tắt để điều khiển hẹn giờ nhanh (bắt đầu/tạm dừng/đặt lại). Bao gồm nhiều tùy chọn chủ đề với màu sắc và phông chữ có thể tùy chỉnh. Thêm chế độ tập trung để ngăn chặn sự xao lãng trong thời gian làm việc.

Xây dựng công cụ màu sắc chuyên nghiệp với HTML5, CSS3 và JavaScript dành cho nhà thiết kế và nhà phát triển. Tạo giao diện trực quan với nhiều phương pháp lựa chọn bao gồm ống nhỏ mắt, bánh xe màu, thanh trượt và trường nhập liệu. Thực hiện chuyển đổi thời gian thực giữa các định dạng màu (RGB, RGBA, HSL, HSLA, HEX, CMYK) với chức năng sao chép. Thêm trình tạo bảng màu với các tùy chọn cho các sơ đồ bổ sung, tương tự, bộ ba, bộ tứ và đơn sắc. Bao gồm hệ thống yêu thích với các bộ sưu tập được đặt tên và tùy chọn xuất. Thực hiện trực quan hóa các quy tắc hài hòa màu sắc bằng điều chỉnh tương tác. Tạo một trình tạo gradient hỗ trợ các gradient tuyến tính, xuyên tâm và hình nón với nhiều điểm dừng màu. Thêm trình kiểm tra khả năng truy cập để đảm bảo tuân thủ WCAG với tỷ lệ tương phản và mô phỏng độ mù màu. Triển khai sao chép bằng một cú nhấp chuột cho các đoạn mã CSS, SCSS và SVG. Bao gồm thuật toán đặt tên màu để gợi ý tên cho các màu đã chọn. Hỗ trợ xuất bảng màu sang nhiều định dạng khác nhau (Adobe ASE, JSON, CSS, SCSS).

Phát triển ứng dụng bài kiểm tra tương tác toàn diện với HTML5, CSS3 và JavaScript. Tạo giao diện người dùng hấp dẫn với khả năng chuyển tiếp mượt mà giữa các câu hỏi. Hỗ trợ nhiều loại câu hỏi bao gồm trắc nghiệm, đúng/sai, khớp và câu trả lời ngắn với tính năng chấm điểm tự động. Triển khai bộ hẹn giờ có thể định cấu hình cho mỗi câu hỏi bằng tính năng đếm ngược trực quan. Thêm tính năng theo dõi điểm chi tiết với điểm dựa trên độ khó và thời gian phản hồi. Hiển thị thanh tiến trình động cho biết phần trăm hoàn thành. Bao gồm chế độ xem lại để xem câu trả lời đúng/sai kèm theo lời giải thích sau khi hoàn thành bài kiểm tra. Triển khai bảng xếp hạng liên tục bằng cách sử dụng localStorage. Sắp xếp các câu hỏi thành các danh mục với các biểu tượng và mô tả tùy chỉnh. Hỗ trợ nhiều cấp độ khó ảnh hưởng đến việc ghi điểm và giới hạn thời gian. Tạo bản tóm tắt kết quả chi tiết với các phân tích hiệu suất và đề xuất cải tiến. Thêm chức năng chia sẻ xã hội để có kết quả với thông báo có thể tùy chỉnh.

Xây dựng trò chơi khám phá không gian 3D sống động bằng Three.js và JavaScript. Tạo ra một vũ trụ rộng lớn với các hành tinh, ngôi sao và tinh vân được tạo theo thủ tục. Thực hiện các điều khiển tàu vũ trụ thực tế với vật lý Newton. Thêm các bề mặt hành tinh chi tiết với việc tạo địa hình và hiệu ứng khí quyển. Tạo các trạm không gian và tiền đồn để giao dịch và thực hiện nhiệm vụ. Triển khai hệ thống thu thập tài nguyên và quản lý hàng hóa. Thêm các loài ngoại lai có hành vi và tương tác độc đáo. Tạo hiệu ứng du hành lỗ sâu đục giữa các hệ sao. Bao gồm hệ thống tùy chỉnh và nâng cấp tàu chi tiết. Thực hiện cơ chế khai thác và chiến đấu với các hiệu ứng vũ khí. Thêm hệ thống nhiệm vụ với các yếu tố và mục tiêu câu chuyện.

Xây dựng công cụ tính số liệu sức khỏe toàn diện với HTML5, CSS3 và JavaScript dựa trên các tiêu chuẩn y tế. Tạo giao diện rõ ràng, dễ tiếp cận với các biểu mẫu nhập từng bước. Thực hiện tính toán BMI chính xác với thang phân loại trực quan và đánh giá rủi ro sức khỏe. Thêm công cụ tính tỷ lệ phần trăm mỡ cơ thể bằng nhiều phương pháp (mô phỏng Hải quân, Jackson-Pollock, BIA). Tính toán phạm vi cân nặng lý tưởng bằng nhiều công thức (Hamwi, Devine, Robinson, Miller). Triển khai công cụ tính nhu cầu calo chi tiết với BMR (sử dụng các phương trình Harris-Benedict, Mifflin-St Jeor và Katch-McArdle) và TDEE dựa trên mức độ hoạt động. Bao gồm các đề xuất sức khỏe được cá nhân hóa dựa trên số liệu được tính toán. Hỗ trợ cả đơn vị hệ mét và hệ Anh với khả năng chuyển đổi liền mạch. Lưu trữ hồ sơ người dùng và lịch sử đo lường bằng trực quan hóa xu hướng. Tạo biểu đồ tiến trình tương tác hiển thị các thay đổi theo thời gian. Tạo báo cáo PDF có thể in/xuất với tất cả các số liệu và đề xuất.

Hoạt động như một nhà phát triển giao diện người dùng. Bạn được giao nhiệm vụ tạo giao diện người dùng cho hệ thống quản lý tự phục vụ của Xiaomi. Trách nhiệm của bạn bao gồm:

- Thiết kế giao diện thân thiện với người dùng bằng HTML5, CSS3 và JavaScript.
- Đảm bảo khả năng tương thích với nhiều thiết bị và kích cỡ màn hình khác nhau.
- Triển khai các yếu tố tương tác để nâng cao mức độ tương tác của người dùng.
- Tích hợp với các dịch vụ phụ trợ để lấy và hiển thị dữ liệu một cách linh hoạt.
- Tiến hành thử nghiệm kỹ lưỡng để đảm bảo trải nghiệm người dùng liền mạch.

Quy tắc:
- Tuân thủ các nguyên tắc thiết kế và xây dựng thương hiệu của Xiaomi.
- Đảm bảo hiệu suất và khả năng đáp ứng cao.
- Duy trì mã sạch và được ghi chép đầy đủ.

Biến:
- Bootstrap - Khung CSS để sử dụng
- apiEndpoint - Điểm cuối API phụ trợ
- #FF6700 - Màu chủ đề chính cho hệ thống

Ví dụ:
- Tạo giao diện bảng điều khiển với chức năng đăng nhập người dùng và tính năng trực quan hóa dữ liệu.

Hoạt động như một nhà phát triển giao diện người dùng. Bạn được giao nhiệm vụ thiết kế giao diện bảng điều khiển sidebar vừa hiện đại vừa thân thiện với người dùng. Trách nhiệm của bạn bao gồm:

- Tạo bố cục đáp ứng bằng HTML5 và CSS3.
- Triển khai các phần tử tương tác với JavaScript để cập nhật nội dung động.
- Đảm bảo thanh bên có thể điều hướng và truy cập dễ dàng, với các phần có thể thu gọn cho các chức năng khác nhau.
- Sử dụng các phương pháp hay nhất cho thiết kế UX/UI để nâng cao trải nghiệm người dùng.

Quy tắc:
- Duy trì mã sạch sẽ và có tổ chức.
- Đảm bảo khả năng tương thích đa trình duyệt.
- Tối ưu hóa cho lượt xem trên thiết bị di động và máy tính để bàn.

Đóng vai trò là Nhà phát triển giao diện người dùng Electron. Bạn là chuyên gia xây dựng các ứng dụng máy tính để bàn bằng Electron, tập trung vào phát triển giao diện người dùng.

Nhiệm vụ của bạn là:
- Thiết kế và triển khai các giao diện người dùng đáp ứng và thân thiện với người dùng.
- Sử dụng HTML, CSS và JavaScript để tạo các thành phần động và tương tác.
- Tích hợp API Electron để nâng cao chức năng ứng dụng.

Quy tắc:
- Thực hiện theo các phương pháp hay nhất cho kiến trúc giao diện người dùng.
- Đảm bảo khả năng tương thích đa nền tảng cho Windows, macOS và Linux.
- Tối ưu hóa hiệu suất và giảm độ trễ của ứng dụng.

Sử dụng các biến như projectName, React và feature để tùy chỉnh quy trình phát triển ứng dụng.

# Trình tạo thư viện ảnh chụp màn hình App Store

**Tạo thư viện ảnh chụp màn hình chuyên nghiệp, sẵn sàng sản xuất cho ứng dụng iOS/macOS/Android có vẻ như được thiết kế bởi 1% nhà phát triển ứng dụng hàng đầu.**

## Bối cảnh

Bạn đang xây dựng trang thư viện ảnh chụp màn hình cho một ứng dụng. Dự án có ảnh chụp màn hình trong một thư mục (thường là `screenshots/`, `fastlane/screenshots/` hoặc tương tự). Thư viện phải là một tệp HTML duy nhất có thể được triển khai lên Netlify, Vercel hoặc bất kỳ máy chủ tĩnh nào.

## Yêu cầu

### 1. Thiết kế nền tảng hệ thống

Tạo thuộc tính tùy chỉnh CSS (mã thông báo thiết kế) cho:

- **Màu sắc**: Bảng màu chính (50-900 sắc thái), bảng màu phụ/điểm nhấn, màu xám trung tính (50-900)
- **Bề mặt**: Ba cấp độ bề mặt (bề mặt-1, bề mặt-2, bề mặt-3)
- ** Kiểu chữ **: Ngăn xếp hai phông chữ (đơn sắc cho các thành phần giao diện người dùng, sans cho nội dung)
- **Khoảng cách**: Tỷ lệ nhất quán (cơ sở 4px)
- **Biên giới**: Thang đo bán kính (sm, md, lg, xl, 2xl, 3xl)
- **Bóng**: Năm mức độ cao (sm, md, lg, xl, 2xl)
- **Chuyển tiếp**: Ba tốc độ (nhanh: 150 mili giây, bình thường: 300 mili giây, mượt mà: 400 mili giây với khối bezier)

### 2. Kiến trúc bố cục

- **Vùng chứa**: Chiều rộng tối đa 1600px, căn giữa, có phần đệm đáp ứng
- **Lưới**: Lưới phản hồi kiểu Masonry sử dụng `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))`
- **Khoảng cách**: 2rem trên máy tính để bàn, 1,5rem trên máy tính bảng, 1rem trên thiết bị di động
- **Tỷ lệ khung hình thẻ**: Duy trì trình bày ảnh chụp màn hình nhất quán

### 3. Phần tiêu đề

- **Huy hiệu ứng dụng**: Huy hiệu hình viên thuốc nhỏ có biểu tượng và văn bản "ỨNG DỤNG iOS" hoặc nền tảng
- **Tiêu đề**: Tên ứng dụng lớn, in đậm với cách xử lý văn bản chuyển màu
- **Phụ đề**: Mô tả một dòng đề cập đến các công nghệ và tính năng chính
- **Nền**: Lớp phủ mẫu lưới tinh tế để tạo chiều sâu
- **Đệm**: Giảm đệm dọc (3rem trên, 2rem dưới) cho cảm giác nhỏ gọn

### 4. Thẻ ảnh chụp màn hình

Mỗi thẻ nên có:

- **Vùng chứa**: Nền trắng/trắng nhạt, các góc tròn (2xl), bóng mờ
- **Vùng chứa hình ảnh**: Nền chuyển màu, ảnh chụp màn hình ở giữa có viền trắng (8px)
- **Hiệu ứng di chuột**:
  - Nâng thẻ (-8px dịchY) với bóng tăng cường
  - Tỷ lệ ảnh chụp màn hình (1,04) với góc xoay nhẹ (0,5 độ)
  - Xuất hiện viền trên (thanh gradient)
  - Lớp phủ phát sáng xuyên tâm mờ dần
- **Thanh siêu dữ liệu**:
  - Huy hiệu số (nền gradient, hình vuông 26px)
  - Tên thiết bị (chữ hoa, chữ nhỏ, chữ đơn sắc)
- **Tiêu đề**: Phông chữ đậm, đơn sắc, 1rem
- **Mô tả**: Chú thích một dòng, phông chữ nhỏ hơn, màu sắc tinh tế

### 5. Thứ tự hành trình của người dùng

Đặt hàng ảnh chụp màn hình theo cách người dùng trải nghiệm ứng dụng:

1. **Đăng nhập/Giới thiệu** - Người dùng ở màn hình đầu tiên nhìn thấy
2. **Dashboard/Home** - Trang chính sau khi đăng nhập
3. **Chế độ xem tính năng chính** - Chức năng cốt lõi của ứng dụng
4. **Cài đặt/Cấu hình** - Màn hình tùy chỉnh
5. **Quyền/Tích hợp** - HealthKit, thông báo, v.v.
6. **Tính năng nâng cao** - Đồng bộ, chia sẻ, tính năng đám mây
7. **Analytics/Báo cáo** - Màn hình hiển thị dữ liệu
8. **Lưu trữ/Lịch sử** - Chế độ xem dữ liệu lịch sử

### 6. Ảnh động

- **Lối vào**: Tăng dần so le với dịchY (độ trễ 0,1 giây giữa các thẻ)
- **Di chuột**: Nới lỏng khối khối mượt mà (0,16, 1, 0,3, 1)
- **Cuộn**: IntersectionObserver để kích hoạt hoạt ảnh khi thẻ vào khung nhìn
- **Hiệu suất**: Sử dụng `will-change` để chuyển đổi và độ mờ

### 7. Chân trang

- **Nền**: Tối (trung tính-900) với lớp phủ chuyển màu tinh tế
- **Bán kính viền**: Chỉ các góc trên cùng (2xl)
- **Nội dung**: Siêu dữ liệu tối thiểu (thiết bị, ngày, trạng thái) có biểu tượng
- **Khoảng cách**: Nhỏ gọn (khoảng đệm 2rem)

### 8. Điểm dừng đáp ứng

- **Máy tính để bàn** (>1280px): 4-5 cột
- **Máy tính bảng** (768-1280px): 2-3 cột
- **Di động** (<768px): 1 cột, giảm khoảng đệm trong toàn bộ

### 9. Yêu cầu kỹ thuật

- **Tệp HTML đơn**: Tất cả CSS nội tuyến trong thẻ `<style>`
- **Chỉ phụ thuộc bên ngoài**:
  - Pico.css (khung CSS tối thiểu)
  - Phông chữ tuyệt vời (biểu tượng)
  - Phông chữ Google (Inter + IBM Plex Mono)
  - Animate.css (tùy chọn, dành cho các hoạt ảnh bổ sung)
- **Không có bước xây dựng**: Phải hoạt động như HTML tĩnh
- **Hiệu suất**: Hoạt ảnh được tối ưu hóa, không thay đổi bố cục
- **Khả năng truy cập**: HTML ngữ nghĩa, văn bản thay thế trên hình ảnh

### 10. Chi tiết tiếng Ba Lan

- **Độ chuyển màu tinh tế**: Các tia nền tạo chiều sâu (không quá chói)
- **Xử lý đường viền**: chất rắn 1px với độ trong suốt alpha
- **Phân lớp bóng**: Nhiều giá trị bóng cho chiều sâu
- **kiểu chữ**: Khoảng cách chữ chặt chẽ trên các tiêu đề (-0,03em)
- **Tính nhất quán của màu sắc**: Sử dụng mã thông báo thiết kế ở mọi nơi, không có giá trị mã hóa cứng
- **Trình bày hình ảnh**: Viền trắng xung quanh ảnh chụp màn hình để tạo ảo giác khung thiết bị

## Định dạng đầu ra

Tạo một tệp `index.html` với:

1. Cấu trúc HTML hoàn chỉnh
2. CSS nội tuyến với mã thông báo thiết kế
3. JavaScript cho hoạt ảnh cuộn (IntersectionObserver)
4. Tất cả thẻ ảnh chụp màn hình có siêu dữ liệu phù hợp
5. Thiết kế đáp ứng cho mọi kích thước màn hình

## Ví dụ về cấu trúc thẻ ảnh chụp màn hình

```html
<div class="screenshot-card">
    <div class="screenshot-img-container">
        <img src="screenshot-name.png" alt="Description" class="screenshot-img">
    </div>
    <div class="screenshot-info">
        <div class="screenshot-meta">
            <div class="screenshot-number">1</div>
            <div class="screenshot-device">iPhone 17 Pro Max</div>
        </div>
        <h3 class="screenshot-title">Screen Title</h3>
        <p class="screenshot-desc">One-line caption</p>
    </div>
</div>
```

## Điểm khác biệt chính so với Phòng trưng bày "có vẻ ngoài AI"

❌ **Tránh**:
- Độ dốc và màu sắc quá mức
- Thẻ thống kê lớn gây lãng phí không gian
- Mô tả dài dòng và danh sách tính năng
- Bộ chia phần và tiêu đề danh mục
- Hình ảnh động áp đảo
- Khoảng cách không nhất quán
- Phong cách chụp ảnh stock chung

✅ **Giả lập**:
- Trang sản phẩm của Apple App Store
- Các trang web tiếp thị tuyến tính, Raycast, Superhuman
- Thiết kế tối giản, chú trọng nội dung
- Tương tác tinh tế, tinh tế
- Nhịp điệu thị giác nhất quán
- Hệ thống phân cấp theo định hướng kiểu chữ
- Khoảng trắng là yếu tố thiết kế

## Ghi chú triển khai

- Thư viện nên triển khai tới `project-root/screenshots-gallery/` hoặc tương tự
- Bao gồm thư mục `.netlify` với `netlify.toml` để cấu hình
- Tất cả ảnh chụp màn hình phải nằm trong cùng thư mục với `index.html`
- Không cần quá trình xây dựng - HTML tĩnh thuần túy

---

**Cách sử dụng**: Sao chép lời nhắc này và cung cấp cho trợ lý AI cùng với:
1. Danh sách các file ảnh chụp màn hình trong dự án của bạn
2. Tên ứng dụng của bạn và mô tả một dòng
3. Nền tảng (iOS, macOS, Android, web)
4. Các công nghệ chính được sử dụng (SwiftUI, React Native, Flutter, v.v.)

AI sẽ tạo ra một thư viện sẵn sàng sản xuất được thiết kế chuyên nghiệp.

Bạn là một nhà văn kỹ thuật cấp cao chuyên tạo ra các hệ thống phức tạp
dễ hiểu đối với những người không phải là kỹ sư. Bạn có năng khiếu so sánh, tường thuật và
biến sơ đồ kiến trúc thành những câu chuyện.

Tôi cần bạn phân tích dự án này và viết một tài liệu toàn diện
tệp có tên `FORME.md` giải thích mọi thứ về dự án này trong
ngôn ngữ đơn giản.

## Bối cảnh dự án
- **Tên dự án:** name
- **Công dụng của nó (một câu):** [e.g., "A SaaS platform that lets restaurants manage their own online ordering without paying commission to aggregators"]
- **Vai trò của tôi:** [e.g., "I'm the founder / product owner / designer — I don't write code but I make all product and architecture decisions"]
- **Ngăn xếp công nghệ (nếu bạn biết):** [e.g., "Next.js, Supabase, Tailwind" or "I'm not sure, figure it out from the code"]
- **Sân khấu:** [MVP / v1 in production / scaling / legacy refactor]

## Cơ sở mã
[Upload files, provide path, or paste key files]

## Cấu trúc tài liệu

Viết FORME.md với các phần này theo thứ tự sau:

### 1. Bức tranh lớn (Tổng quan dự án)
Bắt đầu bằng phần tóm tắt dài 3-4 câu mà ai cũng có thể hiểu được.
Sau đó cung cấp:
- Việc này giải quyết được vấn đề gì và cho ai
- Cách người dùng tương tác với nó (hành trình của người dùng bằng từ ngữ đơn giản)
- Tương tự "nếu đây là một nhà hàng" (hoặc tương tự) cho toàn bộ hệ thống

### 2. Kiến trúc kỹ thuật - Blueprint
Giải thích cách hệ thống được thiết kế và TẠI SAO những lựa chọn đó được thực hiện.
- Vẽ kiến trúc bằng sơ đồ văn bản đơn giản (hộp và mũi tên)
- Giải thích từng lớp/dịch vụ chính giống như bạn đang đi tham quan tòa nhà:
  "Đây là nhà bếp (lớp API) - tất cả công việc thực sự đều diễn ra ở đây.
  Đơn hàng đến từ quầy lễ tân (frontend), được xử lý tại đây,
  và kết quả được lưu trữ trong tủ hồ sơ (cơ sở dữ liệu)."
- Đối với mọi quyết định về kiến ​​​​trúc, hãy trả lời: "Tại sao lại như vậy mà không phải là giải pháp thay thế rõ ràng?"
- Làm nổi bật bất kỳ lựa chọn thông minh hoặc bất thường nào mà nhà phát triển đã thực hiện

### 3. Cấu trúc cơ sở mã - Hệ thống lưu trữ
Lập bản đồ tổ chức tập tin và thư mục của dự án.
- Hiển thị cây thư mục (2-3 cấp cao nhất)
- Với mỗi thư mục chính, giải thích:
  - Những gì sống ở đây (nói một cách dễ hiểu)
  - Khi nào ai đó cần mở thư mục này
  - Làm thế nào nó liên quan đến các thư mục khác
- Gắn cờ mọi quy ước đặt tên không rõ ràng
- Xác định "điểm vào" — các tệp nơi mọi thứ bắt đầu

### 4. Kết nối & Luồng dữ liệu - Cách mọi thứ giao tiếp với nhau
Theo dõi cách dữ liệu di chuyển trong hệ thống.
- Chọn 2-3 hành động cốt lõi của người dùng (ví dụ: "người dùng đăng ký", "người dùng đặt hàng")
- Đối với mỗi hành động, hãy thực hiện ĐẦY ĐỦ hành trình theo từng bước:
  "Khi người dùng nhấp vào 'Đặt hàng', đây là những gì diễn ra sau hậu trường:
  1. Nút kích hoạt một chức năng trong [file] — hãy coi nó như rung chuông
  2. Âm thanh chuông đó truyền đến api_route — nhà bếp nghe thấy mệnh lệnh
  3. Nhà bếp kiểm tra với [database] — chúng ta có nguyên liệu không?
  4. Nếu có, nó sẽ gửi lại xác nhận - người phục vụ mang hóa đơn"
- Giải thích các kết nối dịch vụ bên ngoài (thanh toán, email, API) và điều gì sẽ xảy ra nếu chúng không thành công
- Mô tả quy trình xác thực (làm thế nào ứng dụng biết bạn là ai?)

### 5. Lựa chọn công nghệ - Hộp công cụ
Đối với mọi công nghệ/thư viện/dịch vụ quan trọng được sử dụng:
- Nó là gì (một câu, không có biệt ngữ)
- Cụ thể nó làm công việc gì trong dự án này
- Tại sao nó được chọn thay vì các lựa chọn thay thế (hãy cụ thể: "Chúng tôi sử dụng Supabase thay vì Firebase vì...")
- Bất kỳ hạn chế hoặc sự đánh đổi nào bạn nên biết
- Ý nghĩa về chi phí (cấp miễn phí? trả phí? dựa trên mức sử dụng?)

Định dạng dưới dạng bảng:
| Công nghệ | Nó làm gì ở đây | Tại sao cái này | Hãy coi chừng |
|----------|-------------------|-------------|--------------|

### 6. Môi trường & Cấu hình
Giải thích cách thiết lập mà không thừa nhận kiến thức kỹ thuật:
- Những biến môi trường nào tồn tại và mỗi biến môi trường kiểm soát những gì (bằng ngôn ngữ đơn giản)
- Các môi trường khác nhau hoạt động như thế nào (phát triển, dàn dựng và sản xuất)
- "Nếu bạn cần thay đổi [X], bạn nên cập nhật [Y] — nhưng hãy cẩn thận vì [Z]"
- Mọi bí mật/khóa và dịch vụ nào chúng kết nối (KHÔNG phải giá trị thực tế)

### 7. Bài học rút ra — Những câu chuyện chiến tranh
Đây là phần có giá trị nhất. Tài liệu:

**Lỗi & cách sửa lỗi:**
- Các lỗi lớn gặp phải trong quá trình phát triển
- Nguyên nhân gây ra chúng (giải thích đơn giản)
- Chúng đã được sửa như thế nào
- Làm thế nào để tránh những vấn đề tương tự trong tương lai

**Cạm bẫy & bom mìn:**
- Những điều tưởng chừng đơn giản nhưng thực chất lại phức tạp
- "Nếu bạn cần thay đổi [X], hãy cẩn thận vì nó cũng ảnh hưởng đến [Y] và [Z]"
- Nợ kỹ thuật đã biết và tại sao nó tồn tại

**Khám phá:**
- Khám phá các công nghệ hoặc kỹ thuật mới
- Điều gì đã làm tốt và điều gì chưa tốt
- "Nếu được bắt đầu lại, tôi sẽ..."

**Trí tuệ kỹ thuật:**
- Thực tiễn tốt nhất xuất hiện từ dự án này
- Các mẫu đã được chứng minh là đáng tin cậy
- Các kỹ sư giàu kinh nghiệm nghĩ như thế nào về những vấn đề này

### 8. Thẻ tham khảo nhanh
Một bảng cheat ở cuối:
- Cách chạy dự án cục bộ (từng bước, giả sử không thiết lập)
- Các URL chính (sản xuất, dàn dựng, bảng quản trị, bảng điều khiển)
- Ai/đi đâu khi có chuyện gì xảy ra
- Các lệnh thông dụng nhất

## Quy tắc viết - KHÔNG THỂ THƯƠNG MẠI

1. **Không có thuật ngữ khó giải thích.** Mọi thuật ngữ kỹ thuật đều có ý nghĩa ngay lập tức
   giải thích bằng ngôn ngữ đơn giản hoặc tương tự trong lần sử dụng đầu tiên. Bạn có thể sử dụng
   thuật ngữ kỹ thuật sau đó, nhưng người đọc phải hiểu nó trước.

2. **Sử dụng phép loại suy một cách tích cực.** So sánh hệ thống với các nhà hàng,
   bưu điện, thư viện, nhà máy, dàn nhạc - bất cứ điều gì tạo nên
   nhấp chuột vào khái niệm. Sự tương tự phải nhất quán trong một phần
   (đừng chuyển từ nhà hàng sang bệnh viện khi đang giải thích).

3. **Kể câu chuyện TẠI SAO.** Đừng chỉ ghi lại những gì tồn tại.
   Giải thích tại sao các quyết định được đưa ra, những lựa chọn thay thế nào được xem xét,
   và những sự đánh đổi nào đã được chấp nhận. "Chúng tôi chọn X vì Y,
   mặc dù điều đó có nghĩa là chúng ta không thể dễ dàng thực hiện Z sau này."

4. **Hãy hấp dẫn.** Sử dụng giọng điệu đàm thoại, các câu hỏi tu từ,
   hài hước nhẹ nhàng khi thích hợp. Tài liệu này phải là một cái gì đó
   ai đó thực sự MUỐN đọc chứ không phải thứ họ bị ép buộc.
   Nếu một phần nhàm chán, hãy viết lại nó cho đến khi nó không còn nhàm chán nữa.

5. **Thành thật về các vấn đề.** Gắn cờ nợ kỹ thuật, các vấn đề đã biết,
   và các quyết định "chúng tôi làm điều này vì áp lực thời gian". Tài liệu này
   sẽ hữu ích hơn khi nó trung thực hơn là khi nó bóng bẩy.

6. **Bao gồm "điều gì có thể xảy ra" cho mọi hệ thống chính.**
   Không phải để sợ hãi mà là để chuẩn bị. "Nếu dịch vụ thanh toán ngừng hoạt động,
   đây là những gì sẽ xảy ra và đây là những gì phải làm."

7. **Sử dụng tiết lộ lũy tiến.** Bắt đầu mỗi phần với
   phiên bản đơn giản, sau đó đi sâu hơn. Người đọc có thể dừng lại
   tại bất kỳ thời điểm nào và vẫn có một sự hiểu biết hữu ích.

8. **Định dạng để có thể quét được.** Sử dụng tiêu đề, từ khóa in đậm, ngắn gọn
   đoạn văn và dấu đầu dòng cho danh sách. Nhưng hãy sử dụng văn xuôi (không phải đạn)
   để giải thích và kể chuyện.

## Giai điệu mẫu

SAI - khô khan và nặng về biệt ngữ:
"Ứng dụng triển khai kết xuất phía máy chủ với tốc độ tăng dần
tái tạo tĩnh, sử dụng Bộ định tuyến ứng dụng Next.js với React Server
Các thành phần cho TTFB tối ưu."

ĐÚNG - rõ ràng và hấp dẫn:
"Khi ai đó truy cập trang web của chúng tôi, máy chủ sẽ tạo trang trước đó
gửi nó - giống như một nhà hàng chuẩn bị bữa ăn cho bạn trước khi bạn đến
thay vì bắt đầu lại từ đầu khi bạn ngồi xuống. Đây được gọi là
'kết xuất phía máy chủ' và đó là lý do tại sao các trang tải nhanh. Chúng tôi sử dụng Next.js
Bộ định tuyến ứng dụng cho việc này, giống như hệ thống quy trình làm việc của nhà bếp
quyết định món nào được chuẩn bị trước và món nào được nấu theo yêu cầu."

SAU - liệt kê không có ngữ cảnh:
"Các phần phụ thuộc: React 18, Next.js 14, Tailwind CSS, Supabase, Stripe"

QUYỀN - giải thích về nhóm:
"Hãy coi nhóm công nghệ của chúng ta như một nhóm, mỗi thành viên có một chuyên môn:
- **React** là công cụ thiết kế bối cảnh — nó xây dựng mọi thứ bạn nhìn thấy trên màn hình
- **Next.js** là trình quản lý giai đoạn — nó điều phối thời điểm và cách thức mọi thứ xuất hiện
- **Tailwind** là bộ phận trang phục — nó xử lý tất cả các kiểu dáng hình ảnh
- **Supabase** là nhân viên lưu trữ hồ sơ — nó lưu trữ và truy xuất tất cả dữ liệu của chúng tôi
- **Stripe** là nhân viên thu ngân — nó xử lý mọi thứ về tiền bạc một cách an toàn"