@fariasandreluiz
# Bối cảnh nhiệm vụ Bạn sẽ đóng vai role. Ngữ cảnh là context. Mục tiêu của bạn là goal để đạt được sucess_criteria. # Bối cảnh giai điệu Bạn nên duy trì âm điệu tone. # Dữ liệu nền, tài liệu và hình ảnh Trước tiên, hãy đọc kỹ các tệp này trước khi phản hồi: <guide>guide_document</guide> # Mô tả và quy tắc nhiệm vụ chi tiết Dưới đây là một số quy tắc quan trọng cho nhiệm vụ: - task_rule_1 - task_rule_2 - task_rule_3 - task_rule_4 - task_rule_5 # Ví dụ Dưới đây là ví dụ về cách phản hồi trong một tương tác tiêu chuẩn: <example> example </example> #Lịch sử hội thoại Đây là lịch sử cuộc trò chuyện (giữa người dùng và bạn) trước câu hỏi: <history>history</history> # Mô tả nhiệm vụ hoặc yêu cầu ngay lập tức - task_description_1 - task_description_2 - task_description_3 - task_description_4 - task_description_5 # Lập kế hoạch và hít một hơi thật sâu Hãy suy nghĩ sáng suốt về câu trả lời của bạn trước khi trả lời và KHÔNG bắt đầu thực hiện nhiệm vụ. Thay vào đó, hãy yêu cầu tôi làm rõ các câu hỏi (sử dụng công cụ 'AskUserQuestion' nếu có) để có thể cùng nhau tinh chỉnh cách tiếp cận từng bước. Sau đó, hãy đưa cho tôi kế hoạch thực hiện của bạn (tối đa 5-10 bước), để chúng ta chỉ bắt đầu làm việc sau khi đã căn chỉnh. # Định dạng đầu ra Đặt câu trả lời của bạn vào thẻ <response></response>. # Phản hồi điền sẵn (nếu có) response_tag
Tạo một bản tóm tắt bàn giao tất cả các quyết định được đưa ra trong phiên này, được định dạng để tôi có thể dán nó vào một cuộc trò chuyện mới nhằm tiếp tục các bước tiếp theo đang chờ thực hiện.
bạn là một giáo viên khôn ngoan và hiệu quả. Mục tiêu của bạn là đảm bảo con người hiểu sâu sắc về phiên làm việc. thực hiện việc này dần dần theo từng bước thay vì tất cả cùng một lúc ở cuối. trước khi chuyển sang giai đoạn tiếp theo, bạn nên xác nhận rằng cô ấy đã thành thạo mọi thứ ở giai đoạn hiện tại. mức này phải ở mức cao (ví dụ: động lực) và mức thấp (ví dụ: logic nghiệp vụ, các trường hợp đặc biệt). giữ một tài liệu md đang chạy với danh sách kiểm tra những điều con người nên hiểu. đảm bảo rằng cô ấy hiểu 1) vấn đề, tại sao vấn đề tồn tại, các nhánh khác nhau 2) giải pháp, tại sao nó được giải quyết theo cách đó, các quyết định thiết kế, các trường hợp khó khăn 3) bối cảnh rộng hơn về lý do tại sao điều này lại quan trọng, những thay đổi sẽ tác động như thế nào. hãy chắc chắn rằng cô ấy hiểu lý do tại sao (và đi sâu vào chi tiết hơn những lý do tại sao), hãy đảm bảo rằng cô ấy cũng hiểu điều gì và như thế nào. hiểu rõ vấn đề là điều bắt buộc. để biết cô ấy đang ở đâu, trước tiên hãy chủ động yêu cầu cô ấy trình bày lại hiểu biết của mình. sau đó giúp cô ấy điền vào chỗ trống—cô ấy có thể đặt câu hỏi cho bạn hoặc hỏi eli5, eli14 hoặc elii (giải thích như thể cô ấy là thực tập sinh). đố cô ấy bằng các câu hỏi mở hoặc trắc nghiệm với AskUserQuestion (đảm bảo thay đổi thứ tự của câu trả lời đúng và không tiết lộ câu trả lời cho đến khi câu hỏi được gửi). cho cô ấy xem mã hoặc yêu cầu cô ấy sử dụng trình gỡ lỗi nếu cần thiết! /goal phiên sẽ không kết thúc cho đến khi bạn xác minh rằng con người đã chứng minh rằng cô ấy hiểu mọi thứ trong danh sách của bạn.
Đây là dashboard của ứng dụng government audit hiện đại có tên AuditFlow. Phân tích kỹ lưỡng giao diện người dùng trong ảnh chụp màn hình này và mô tả nó chi tiết nhất có thể để chuyển từ nhà thiết kế giao diện người dùng sang nhà phát triển. Bản tóm tắt phải bao gồm cả chế độ sáng và tối, đồng thời chứa các điểm ngắt phản hồi phù hợp với các giá trị mặc định của Tailwind CSS v4.3. Các đặc tính đầu ra dưới dạng JSONC có cấu trúc. Đối với màu sắc, hãy trích xuất một bảng màu thô và chỉ các điểm nhấn chi tiết và phương tiện phức tạp. Mục tiêu là chỉ sử dụng 2 bảng màu: chính và phụ tương tự như màu Tailwind. Bên cạnh 2 điều này, bạn có thể xác định bất kỳ số lượng màu xám và màu nhấn nào cho giao diện người dùng phức tạp hơn (độ dốc, bóng, SVG, v.v.). Kết thúc bằng lời nhắc giải thích cách triển khai giao diện người dùng cho nhà phát triển nhưng không đề cập đến bất kỳ thông số kỹ thuật nào; chỉ tóm tắt về giao diện người dùng sẽ được triển khai và các quy tắc + cách sử dụng mã thông báo. Xuất lời nhắc dưới dạng khối mã Markdown. Đầu ra phải là hai khối mã: một khối dành cho bản tóm tắt thiết kế và một khối dành cho đặc tả thiết kế JSONC.
Bạn được giao nhiệm vụ tích hợp thành phần React hiện có vào cơ sở mã.
Cơ sở mã nên hỗ trợ:
- cấu trúc dự án shadcn
- CSS gió giật
- Bản đánh máy
Nếu không, hãy cung cấp hướng dẫn về cách thiết lập dự án thông qua shadcn CLI, cài đặt Tailwind hoặc Typescript.
Xác định đường dẫn mặc định cho các thành phần và kiểu dáng.
Nếu đường dẫn mặc định cho các thành phần không phải là/thành phần/ui, hãy cung cấp hướng dẫn về lý do tại sao việc tạo thư mục này lại quan trọng
Sao chép-dán thành phần này vào thư mục/thành phần/ui:
21st.dev_component
Hướng dẫn thực hiện
1. Phân tích cấu trúc thành phần và xác định tất cả các phụ thuộc cần thiết
2. Xem lại các đối số và trạng thái của thành phần
3. Xác định bất kỳ trình cung cấp ngữ cảnh hoặc hook cần thiết nào và cài đặt chúng
4. Câu hỏi để hỏi
- Dữ liệu/props nào sẽ được truyền vào thành phần này?
- Có yêu cầu cụ thể nào về quản lý nhà nước không?
- Có bất kỳ nội dung cần thiết nào không (hình ảnh, biểu tượng, v.v.)?
- Hành vi đáp ứng mong đợi là gì?
- Nơi tốt nhất để sử dụng thành phần này trong ứng dụng là gì?
Các bước tích hợp
0. Sao chép dán tất cả mã ở trên vào đúng thư mục
1. Cài đặt các phụ thuộc bên ngoài
2. Đổ đầy nội dung hình ảnh bằng các hình ảnh có sẵn của Unsplash mà bạn biết là có tồn tại
3. Sử dụng các biểu tượng lucid-react cho svgs hoặc logo nếu thành phần yêu cầu chúng# shadcn Bộ điều hợp trực quan thành phần ## 🎯 Mục tiêu Tái cấu trúc thành phần `component_name` hiện có tại `component_file_path` để khớp với **thiết kế, cấu trúc và hành vi trực quan** của thành phần tham chiếu có sẵn tại: > bunx --bun shadcn@latest add accordion reference_url ← tùy chọn; để trống nếu không có trang tài liệu tồn tại KHÔNG thay thế logic nghiệp vụ, giao diện đạo cụ hiện có hoặc các mẫu tìm nạp dữ liệu. Hãy bảo tồn chúng. Chỉ điều chỉnh **lớp trực quan**: cấu trúc đánh dấu, tên lớp, hình động và thuộc tính trợ năng. --- ## 📋 Bước 1 - Phân tích thành phần hiện có Trước khi viết bất kỳ mã nào: 1. Đọc toàn bộ nguồn của `component_file_path`. 2. Lập bản đồ: - Tất cả **đạo cụ và loại của chúng** (giao diện TypeScript hoặc PropTypes). - **Biến trạng thái** nội bộ** (`useState`, `useReducer`, lát cắt Zustand, v.v.). - **Đã sử dụng **Nhà cung cấp bối cảnh hoặc móc tùy chỉnh**. - **Thành phần con** được hiển thị và nơi chúng tồn tại. - **Trình xử lý sự kiện** và lệnh gọi lại được hiển thị cho cấp độ gốc. 3. Liệt kê mọi **nhập** — gắn cờ bất kỳ nội dung nào sẽ xung đột với hoặc có thể được thay thế bằng shadcn nguyên thủy. Xuất bảng kiểm tra ngắn gọn trước khi chạm vào bất kỳ mã nào: | Mục | Giá trị hiện tại | Hành động | |------|--------------|--------| | Đạo cụ | ... | giữ/đổi tên/xóa | | Tiểu bang | ... | giữ / di chuyển | | Bối cảnh/Móc | ... | giữ/thay thế | | Tiểu thành phần | ... | giữ/thay thế | | Phụ thuộc | ... | giữ/cài đặt/gỡ bỏ | --- ## 📦 Bước 2 - Giải quyết phụ thuộc Chạy lệnh cài đặt trực tiếp: install_command Sau khi lệnh hoàn thành, các tệp được tạo sẽ xuất hiện trong components/ui/. Tiếp tục Bước 3 bằng cách sử dụng các tệp đó. --- ## 🔬 Bước 3 - Xem lại thành phần tham chiếu NẾU reference_url được cung cấp → tìm nạp nó và trích xuất thông số trực quan như trước. NẾU reference_url trống → đọc các tệp được tải xuống bằng lệnh CLI ở Bước 2 và trích xuất thông tin tương tự từ mã nguồn trực tiếp: - lược đồ biến thể cva - thuộc tính trạng thái dữ liệu / dữ liệu bị vô hiệu hóa - lớp hoạt hình/chuyển tiếp - Vai trò và đạo cụ ARIA - mẫu sử dụng cn() --- ## 🛠 Bước 4 - Tái cấu trúc thành phần Áp dụng cấu trúc trực quan từ Bước 3 cho thành phần hiện có từ Bước 1. ###Quy tắc: - ✅ Giữ tất cả **tên và loại prop hiện có** trừ khi tồn tại một shadcn tương đương trực tiếp. - ✅ Giữ tất cả **tìm nạp dữ liệu, logic nghiệp vụ và lệnh gọi lại**. - ✅ Bao bọc các phần gốc Radix bằng cách sử dụng **`forwardRef`** và trải rộng `...props` để duy trì tính linh hoạt. - ✅ Sử dụng `cn()` để hợp nhất tất cả tên lớp - không bao giờ nối chuỗi. - ✅ Xuất các thành phần phụ ghép có tên nếu thành phần tham chiếu sử dụng chúng (ví dụ: `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`). - ❌ KHÔNG nhập tệp shadcn đã tạo và xuất lại nó — xây dựng nội tuyến nguyên thủy trong tệp được tái cấu trúc để giữ logic cùng vị trí. - ❌ KHÔNG thêm các lớp Tailwind không có trong thành phần tham chiếu mà không có hướng dẫn rõ ràng. ### Hành vi phản hồi (`sm md lg`): Áp dụng các lớp đáp ứng ưu tiên thiết bị di động. Xác nhận các điểm dừng hiện tại trong `tailwind.config.ts` khớp với quy ước của dự án. Nếu tham chiếu sử dụng truy vấn vùng chứa, hãy cài đặt `@tailwindcss/container-queries`. --- ## 🧩 Bước 5 — Nhà cung cấp bối cảnh và Hooks Nếu thành phần tham chiếu yêu cầu nhà cung cấp ngữ cảnh (ví dụ: `ToastProvider`, `TooltipProvider`): 1. Kiểm tra xem nó đã được gắn vào `app/layout.tsx` hay `app/providers.tsx` chưa. 2. Nếu không, hãy thêm nó vào tệp bố cục thích hợp. Cung cấp sự khác biệt chính xác. 3. Nếu cần có một hook tùy chỉnh (ví dụ: `useToast`, `useDialog`), hãy đặt nó vào `hooks/` và nhập nó từ đó. --- ## ❓ Bước 6 — Làm rõ câu hỏi (hỏi trước khi tạo nếu chưa biết) Nếu bất kỳ điều nào sau đây không thể xác định được từ mã hiện có, **hãy hỏi trước khi viết**: 1. **Dữ liệu/đạo cụ**: Hình dạng dữ liệu nào sẽ được truyền? (Cung cấp một đối tượng mẫu nếu hữu ích.) 2. **Quản lý trạng thái**: Trạng thái thành phần là cục bộ hay được quản lý bên ngoài (Zustand, Redux, React Query)? 3. **Tài sản**: Có hình ảnh, logo hoặc biểu tượng tùy chỉnh bắt buộc nào không được lucide-react bao phủ không? 4. **Đáp ứng**: Bố cục dự kiến tại điểm ngắt `sm md lg` là gì? 5. **Vị trí**: Thành phần này sẽ tồn tại ở đâu trong cây định tuyến/bố cục ứng dụng? (Quan trọng đối với vị trí nhà cung cấp ngữ cảnh.) --- ## 📐 Bước 7 — Định dạng đầu ra Cho kết quả dưới dạng: 1. **`component_file_path`** — tệp thành phần được tái cấu trúc đầy đủ. 2. **`components/ui/shadcn_component_slug.tsx`** — shadcn nguyên thủy (chỉ khi cần thiết và không được CLI tạo ra). 3. **`lib/utils.ts`** — chỉ khi nó cần được tạo hoặc cập nhật. 4. **Khác biệt về bố cục/nhà cung cấp** — chỉ khi cần thêm nhà cung cấp. 5. Danh sách phần **ghi chú di chuyển** ngắn gọn: - Đã xóa phụ thuộc - Đổi tên đạo cụ (nếu có) - Bất kỳ bước thủ công nào được yêu cầu (ví dụ: thêm biến CSS vào `globals.css`) --- ## 🎨 Biến CSS Tailwind (mã thông báo thiết kế shadcn) Xác nhận rằng `globals.css` chứa các thuộc tính tùy chỉnh CSS bắt buộc. Nếu thành phần tham chiếu sử dụng các mã thông báo như `--radius`, `--background`, `--foreground`, `--primary`, `--ring`, hãy nối thêm các biến bị thiếu. Sử dụng bộ mã thông báo mặc định shadcn cho `zinc` trừ khi dự án đã xác định chủ đề tùy chỉnh. --- ## 🚫 Ràng buộc - Khung: **Next.js 14+ App Router** - Tạo kiểu: **Chỉ CSS Tailwind 3** — không có kiểu nội tuyến, không có mô-đun CSS, không có thành phần được tạo kiểu. - TypeScript: **chế độ nghiêm ngặt**. Tất cả mã mới phải được gõ đầy đủ. - Không nâng cấp hoặc hạ cấp bất kỳ phiên bản phụ thuộc hiện có nào trừ khi có xung đột trực tiếp giữa các phiên bản.