Tóm tắt nhanh:
ak-ui-stylingxem project đang có gì (package,components.json, cấu hình Tailwind, token), rồi chỉ đổi đúng phần bạn yêu cầu: component, theme, accessibility hay layout. Nó còn làm poster và tài liệu thương hiệu theo lối thiết kế canvas. Nó không khởi tạo lại app đã có setup, và không chuyển việc cho skill nào khác.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi app React của bạn dùng shadcn/ui và Tailwind, và bạn cần thêm một component, đổi màu thương hiệu, bật dark mode, sửa form khó dùng bằng bàn phím, hay sửa trang vỡ trên điện thoại. Cũng dùng khi cần một poster hay tài liệu thương hiệu. Không cần khi yêu cầu còn chung chung kiểu "làm đẹp giao diện": skill chỉ đổi đúng phần được nêu, nên bạn ghi rõ màn hình, component và loại thay đổi trước.
flowchart LR
A["Việc giao diện: component, theme, a11y, layout"] --> B["ak-ui-styling"]
P["Poster, tài liệu thương hiệu"] --> B
B --> C["Đổi đúng phần được yêu cầu trong code"]
B --> D["File triết lý thiết kế + PDF hoặc PNG"]
C --> E["Dừng, không chuyển skill nào"]
D --> EBốn khái niệm cần nắm:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Đọc setup đang có | Project đang dùng bản nào, cấu hình ra sao? | Có components.json, Tailwind đã cấu hình, màu thương hiệu nằm trong biến CSS: skill dùng lại những thứ đó, không cài lại từ đầu |
| Loại thay đổi | Lần này là thêm component, đổi theme, sửa accessibility, hay chuyển đổi một phần? | "Thêm hộp thoại xác nhận xoá" chỉ thêm đúng hộp thoại đó, không đụng theme hay các trang khác |
| Thứ không được phá | Quyết định thiết kế và hành vi bàn phím nào phải giữ? | Viền focus khi bấm Tab, thứ tự Tab trong form, màu và bo góc đã chọn |
| Giao diện app hay ấn phẩm | Bạn cần màn hình chạy được, hay một tác phẩm hình ảnh? | Poster ra mắt: một file Markdown nêu triết lý thiết kế và một file PDF hoặc PNG, gần như toàn hình, rất ít chữ |
Prompt mẫu khi thêm một component vào app đã có shadcn/ui:
/ak-ui-styling Thêm hộp thoại xác nhận trước khi xoá dự án ở trang <tên trang>.
Kết quả: bấm "Xoá" thì hiện hộp thoại, chỉ xoá khi bấm "Xác nhận".
Ràng buộc: giữ theme và kiểu nút hiện có, dùng được bằng bàn phím.
Xong khi: Esc đóng hộp thoại và focus quay lại nút "Xoá".Skill này không có cờ.
Phần dưới đây là bản chi tiết: luồng chạy, 6 tình huống kèm prompt, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-ui-styling: chỉnh giao diện shadcn/ui và Tailwind, giữ thiết kế cũ" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-ui-styling". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-ui-styling
