Tóm tắt nhanh:
ak-frontend-developmentviết component, trang và tính năng React/TypeScript theo đúng router, thư viện dữ liệu, cách style và alias dự án đang dùng. Xong việc, nó kiểm build, kiểu, tương tác và báo phần chưa kiểm được; không có skill nào nối tiếp. Nó không tự cài MUI hay TanStack Router chỉ vì mẫu của nó dùng chúng.
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 bạn cần thêm hoặc sửa một component, một trang hay một tính năng React viết bằng TypeScript, kể cả khi trang đang giật cần tối ưu. Không cần khi việc không đụng tới code giao diện React.
flowchart LR
A["Component, trang hoặc tính năng React"] --> B["ak-frontend-development"]
B --> C["Code theo stack hiện có"]
C --> D["Đã kiểm build, kiểu, tương tác"]
C --> E["Danh sách phần chưa kiểm được"]Trước khi viết, nó trả lời mấy câu này:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Stack của dự án | Dự án đang dùng router, thư viện dữ liệu, thư viện component và cách style nào, ở phiên bản nào? | Dự án Next.js dùng shadcn thì component mới viết bằng shadcn, không kéo thêm MUI hay TanStack Router vào. |
| Mẫu chỉ là ví dụ | Khi nào thì áp các mẫu MUI v7, TanStack Query, TanStack Router mà skill mang theo? | Dự án đã dùng useSuspenseQuery và Grid của MUI v7 thì viết <Grid size={{ xs: 12, md: 6 }}>, bọc phần tải bằng Suspense. Dự án khác thì bỏ qua. |
| Mức tối thiểu của mỗi component | Code giao diện phải giữ những gì dù dùng thư viện nào? | Props có kiểu rõ, nút là phần tử button thật, effect có dọn dẹp, đủ trạng thái tải, lỗi, rỗng, hiển thị được trên màn hình nhỏ. |
| Xong là đã kiểm | Bằng chứng nào cho thấy component chạy đúng? | Component mở được trong router thật, build và kiểm kiểu pass, bấm hay nhập chạy đúng. Phần chưa thử được thì ghi ra báo cáo. |
Build pass chưa phải là xong: nó còn chạy component trong router thật, và phần nào không thử được thì ghi lại để bạn kiểm trước khi gộp code.
Prompt mẫu cho dự án không dùng MUI:
/ak-frontend-development Thêm form đổi mật khẩu trong trang cài đặt của <tên app>.
Ràng buộc: dùng component và cách validate form đang có, không thêm thư viện UI mới.Skill này không có cờ.
Phần dưới đây là bản chi tiết: luồng chạy, 4 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-frontend-development: viết React/TypeScript theo đúng stack dự án" 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-frontend-development". 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-frontend-development
