Bạn là một chuyên gia sẵn sàng ra mắt. Tạo ra một cách toàn diện
danh sách kiểm tra trước khi ra mắt được điều chỉnh cho phù hợp với dự án cụ thể này.
## Bối cảnh dự án
- **Dự án:** [name, type, description]
- **Ngăn xếp công nghệ:** [framework, hosting, services]
- **Tính năng:**
- **Loại khởi chạy:** [soft launch / public launch / client handoff]
- **Miền:** [is DNS already configured?]
## Tạo danh sách kiểm tra Bao gồm:
### Chức năng
- Tất cả các luồng người dùng quan trọng đều hoạt động từ đầu đến cuối
- Tất cả các biểu mẫu gửi chính xác và hiển thị phản hồi phù hợp
- Luồng thanh toán hoạt động (nếu có) - thử nghiệm với hộp cát thực
- Xác thực hoạt động (đăng nhập, đăng xuất, đặt lại mật khẩu, hết hạn phiên)
- Thông báo email gửi chính xác (kiểm tra thư mục thư rác)
- Tích hợp của bên thứ ba phản hồi chính xác
- Xử lý lỗi có hiệu quả (điều gì xảy ra khi mọi thứ bị hỏng?)
### Nội dung & Sao chép
- Không còn lorem ipsum
- Tất cả các liên kết đều hoạt động (không có 404)
- Trang pháp lý tồn tại (chính sách bảo mật, điều khoản, sự đồng ý cookie)
- Thông tin liên hệ là chính xác
- Năm bản quyền hiện tại
- Liên kết truyền thông xã hội trỏ đến hồ sơ chính xác
- Tất cả hình ảnh đều có văn bản thay thế
- Favicon được đặt (tất cả các kích cỡ)
### Quét phần giữ chỗ trực quan 🔴
Quét toàn bộ cơ sở mã và trang web được triển khai để tìm nội dung trực quan giữ chỗ
cái đó phải được thay thế trước khi ra mắt. Đây là một danh mục TIÊU CHUẨN - một
hình ảnh giữ chỗ trên một trang web trực tiếp còn nguy hiểm hơn lỗi đánh máy.
**Quét cơ sở mã — tìm kiếm các mẫu sau:**
- URL chứa: `placeholder`, `via.placeholder.com`, `placehold.co`,
`picsum.photos`, `unsplash.it/random`, `dummyimage.com`, `placekitten`,
`placebear`, `fakeimg`
- Tên file chứa: `placeholder`, `dummy`, `sample`, `example`,
`temp`, `test-image`, `default-`, `no-image`
- Giá trị mặc định của Next.js/Vercel: `public/next.svg`, `public/vercel.svg`,
`public/thirteen.svg`, `app/favicon.ico` (nếu vẫn là mặc định của Next.js)
- Hình ảnh bản mẫu khung vẫn còn trong thư mục `public/`
- Kích thước được mã hóa cứng không có hình ảnh thực: `width={400} height={300}`
được ghép nối với div màu xám hoặc thiếu src
- Mẫu giữ chỗ SVG: SVG nội tuyến được sử dụng làm hình ảnh tạm thời
(thường là hình chữ nhật màu xám có biểu tượng ở giữa)
**Kiểm tra cấp độ thành phần:**
- Các thành phần hình đại diện quay trở lại biểu tượng người dùng chung — là dự phòng
được thiết kế hay nó là mặc định của thư viện?
- Các thành phần thẻ có `image?: string` prop — nội dung hiển thị khi không
hình ảnh được thông qua? Đó là trạng thái trống được thiết kế hay bố cục bị hỏng?
- Phần anh hùng/biểu ngữ - hình nền cuối cùng hay mẫu nhà phát triển?
- Lưới sản phẩm/danh mục đầu tư — là tất cả các mục sử dụng hình ảnh thực hoặc một số
vẫn sử dụng cùng một hình ảnh thử nghiệm lặp đi lặp lại?
- Thành phần logo — đây là tệp logo cuối cùng hay phần giữ chỗ văn bản?
- Hình ảnh OG (thẻ meta `og:image`) — đây là nội dung được thiết kế hay
mặc định khung/lưu trữ?
**Kiểm tra của bên thứ ba và CDN:**
- Hình ảnh được tải từ CDN chỉ dành cho phát triển (ví dụ: `picsum.photos`)
- Hình mờ trên ảnh stock vẫn hiển thị (tìm kiếm hình ảnh >500kb
có thể là cổ phiếu chưa được mua)
- Hình ảnh có `lorem` hoặc `test` trong văn bản thay thế
**Định dạng đầu ra:**
Tạo một bảng chứa mọi phần giữ chỗ được tìm thấy:
| # | Đường dẫn tệp | Dòng | Loại | Giá trị hiện tại | Mức độ nghiêm trọng | Cần hành động |
|---|----------|------|------|--------------|----------|---------------|
| 1 | `src/app/page.tsx` | 42 | URL hình ảnh | `via.placeholder.com/800x400` | 🔴 Quan trọng | Thay thế bằng hình ảnh anh hùng |
| 2 | `public/favicon.ico` | — | Khung mặc định | Favicon mặc định của Next.js | 🔴 Quan trọng | Thay thế bằng favicon thương hiệu |
| 3 | `src/components/Card.tsx` | 18 | Thiếu dự phòng | Không có hình ảnh = bố cục bị hỏng | 🟡 Cao | Thiết kế trạng thái trống |
Mức độ nghiêm trọng:
- 🔴 Quan trọng: Hiển thị với người dùng trên các trang chính (anh hùng, trong màn hình đầu tiên, hình ảnh OG)
- 🟡 Cao: Hiển thị với người dùng trong cách sử dụng thông thường (thẻ, hình đại diện, hình ảnh nội dung)
- 🟠 Trung bình: Hiển thị trong các trường hợp khó khăn (trạng thái trống, trang lỗi, dự phòng)
- ⚪ Thấp: Chỉ trong mã, không hướng tới người dùng (đồ đạc thử nghiệm, tuyến đường chỉ dành cho nhà phát triển)
###SEO & Siêu dữ liệu
- Tiêu đề trang mang tính duy nhất và mang tính mô tả
- Mô tả meta được viết cho mỗi trang
- Mở thẻ Đồ thị để chia sẻ trên mạng xã hội (thử nghiệm với trình gỡ lỗi chia sẻ)
- Robots.txt được cấu hình đúng
- Sitemap.xml tồn tại và được gửi
- URL Canonical được thiết lập
- Đánh dấu dữ liệu / lược đồ có cấu trúc (nếu có)
### Hiệu suất
- Điểm Lighthouse đạt chỉ tiêu
- Hình ảnh được tối ưu hóa và đáp ứng
- Phông chữ được tải hiệu quả
- Không có lỗi giao diện điều khiển trong quá trình xây dựng sản xuất
- Analytics được cài đặt và theo dõi
### Bảo mật
- HTTPS được thực thi (không có nội dung hỗn hợp)
- Các biến môi trường được thiết lập trong sản xuất
- Không có khóa API nào được hiển thị trong mã giao diện người dùng
- Giới hạn tỷ lệ trên các hình thức (ngăn chặn thư rác)
- CORS được cấu hình đúng
- Tiêu đề CSP (nếu có)
### Đa nền tảng
- Đã thử nghiệm trên: Chrome, Safari, Firefox (mới nhất)
- Đã thử nghiệm trên: iOS Safari, Android Chrome
- Đã thử nghiệm tại các điểm dừng quan trọng
- In biểu định kiểu (nếu người dùng có thể in)
### Cơ sở hạ tầng
- Tên miền đã được kết nối và SSL đang hoạt động
- Chuyển hướng từ www/không phải www được định cấu hình
- Trang 404 được thiết kế (không mặc định)
- Trang lỗi được thiết kế (500, bảo trì)
- Sao lưu được cấu hình (cơ sở dữ liệu, nếu có)
- Thiết lập giám sát/kiểm tra thời gian hoạt động
### Handoff (nếu là dự án của khách hàng)
- Khách hàng có quyền truy cập vào tất cả các tài khoản (lưu trữ, tên miền, phân tích)
- Tài liệu đầy đủ (FORGOKBEY.md hoặc tương đương)
- Đào tạo được lên kế hoạch hoặc ghi lại
- Thỏa thuận hỗ trợ/bảo trì rõ ràng
## Định dạng đầu ra
Danh sách kiểm tra đánh dấu với:
- [ ] Mỗi mục là một hộp có thể đánh dấu
- Được nhóm theo danh mục
- Cờ ưu tiên cho các mục quan trọng (🔴 phải sửa trước khi ra mắt)
- Mỗi mục bao gồm một dòng ghi chú "cách xác minh"