Skill
Xây dựng giao diện React với ak:frontend-development
Triển khai component hoặc feature React và TypeScript đúng scope trong khi giữ nguyên routing, data, styling cùng loading convention thực tế của project.
Dùng ak:frontend-development để xây dựng hoặc tinh chỉnh component, route hay
feature React và TypeScript với data contract, loading behavior, error handling,
ranh giới tệp cùng bằng chứng verification rõ ràng. Pattern đi kèm tập trung
vào Suspense, TanStack Query và Router, MUI v7, tổ chức feature, TypeScript
strict cùng tối ưu performance có đo lường.
Chọn ak:frontend-development cho implementation React
Dùng ak:frontend-development khi
- Outcome chính là React component, page, route, form, data flow hoặc sửa hiệu năng frontend.
- Project đã dùng hoặc chủ động chọn các pattern React, TypeScript, MUI hay TanStack được tham chiếu.
- Bạn cần implementation thay vì chỉ định hướng hình ảnh.
Chọn workflow khác khi
- Bạn cần visual concept, định hướng layout hoặc quyết định design system trước
implementation. Dùng
ak:frontend-design. - Bạn cần chọn framework hoặc workflow không dùng React. Dùng
ak:web-frameworks. - Task là implementation đã duyệt trải rộng frontend và backend. Dùng
ak:cookvà nêu specialist guidance liên quan. - Bạn chỉ cần review độc lập hoặc chẩn đoán lỗi. Dùng
ak:code-reviewhoặcak:fix.
Chạy workflow delivery UI
Tách riêng các stage design, implementation, browser verification và review để visual intent không âm thầm thay thế product behavior hoặc accessibility.
| Stage | Skill | Review contract |
|---|---|---|
| Xác định experience | ak:frontend-design | Duyệt visual direction, information hierarchy, interaction state, responsive behavior, design token hiện có và accessibility constraint. |
| Implement | ak:frontend-development | Tái sử dụng stack và component system hiện tại. Giữ loading, empty, error, disabled, focus và permission state trong scope. |
| Verify bằng browser | ak:web-testing | Kiểm tra viewport desktop/mobile đã duyệt, keyboard path, accessible name, contrast, reduced motion, console/network error và user journey đã chọn. |
| Review diff | ak:code-review | Review behavior, state management, security boundary, performance, bằng chứng test và visual hoặc architectural drift ngoài ý muốn. |
Trước implementation, chuyển giao:
User outcome và primary journey:
Reference hoặc design decision đã duyệt:
State và breakpoint bắt buộc:
Yêu cầu accessibility và reduced motion:
Component và token hiện có cần tái sử dụng:
Data/API contract:
Acceptance screenshot hoặc observable check:
Non-goal rõ ràng:Quay lại design khi reference thiếu một state quan trọng. Quay lại implementation khi bằng chứng browser fail. Không vá symptom chỉ xuất hiện trên screenshot khi nguyên nhân nằm ở layout, data, hydration, focus hoặc ownership của state. Deployment và publication vẫn là workflow riêng sau review.
Chuẩn bị project và stack
Trước khi bắt đầu:
- Hoàn thành Làm quen và xác nhận Engineer Kit đã được cài cho runtime cùng scope hiện tại.
- Mở project và xác định version React, TypeScript, MUI, TanStack Query, router, form, testing cùng package manager từ source.
- Đọc quy tắc component, styling, accessibility, API và test của repository.
- Cung cấp outcome cho người dùng, các state, API contract, responsive boundary, browser support, acceptance criteria cùng non-goal.
- Nêu rõ có cho phép cài dependency, truy cập API, browser automation, tạo tệp, screenshot hay publication không.
Reference đi kèm chứa ví dụ riêng cho một application như SuspenseLoader,
useMuiSnackbar, apiClient, import alias và route format. Chỉ dùng chúng như
pattern khi project hiện tại thực sự có cùng contract.
| Runtime | Cách gọi | Ranh giới khả dụng |
|---|---|---|
| Claude Code | /ak:frontend-development ... | Có thể áp dụng guidance bằng project và browser tool khả dụng; Engineer hỗ trợ phân phối native cùng plugin rõ ràng. |
| Cursor | /ak:frontend-development ... | Dùng slash syntax đã được người dùng xác minh; parity về browser, Agent và Hook chưa được thiết lập. |
| Codex | $ak:frontend-development ... | Dùng native Skill discovery; browser và Hook được chuyển đổi tùy session. |
Xem Runtime adapter để hiểu khác biệt theo từng component.
Chạy Skill
Argument shape được khai báo là [component or feature]. Skill không định nghĩa
flag, mode có tên hay project stack mặc định.
/ak:frontend-development "Add an order-status filter to the existing React page. Reuse its query keys, router, design tokens, and loading boundary; cover empty, error, keyboard, and mobile states; do not install packages or publish."/ak:frontend-development "Add an order-status filter to the existing React page. Reuse its query keys, router, design tokens, and loading boundary; cover empty, error, keyboard, and mobile states; do not install packages or publish."$ak:frontend-development "Add an order-status filter to the existing React page. Reuse its query keys, router, design tokens, and loading boundary; cover empty, error, keyboard, and mobile states; do not install packages or publish."| Input | Cần gồm |
|---|---|
| Outcome người dùng | Điều người dùng thấy hoặc làm được, gồm empty, loading, error và success state |
| Contract hiện có | Component API, route, query key, backend schema, auth, design token và shared primitive |
| Ranh giới tương tác | Keyboard, pointer, responsive, validation, optimistic update cùng recovery behavior |
| Mục tiêu chất lượng | Bằng chứng typecheck, unit, component, integration, E2E, bundle hoặc profiling cần có |
| Quyền hạn | Tệp, dependency, network call, local process, screenshot, commit và publication được phép |
Quan sát implementation dựa trên bằng chứng
Source là thư viện pattern dạng module thay vì workflow cố định. Hãy giữ lần chạy implementation có thể kiểm tra:
- Lần chạy xác minh local stack. Skill đọc component, route definition, data hook, styling primitive, alias cùng quy tắc repository hiện có.
- Lần chạy chỉ chọn pattern tương thích. Suspense, TanStack Query, TanStack Router, MUI v7, React Hook Form hoặc Zustand chỉ được dùng khi project hỗ trợ hoặc việc áp dụng đã được duyệt.
- Lần chạy xác định state và boundary. Props, data, error, loading, mutation rollback, responsive behavior và file ownership luôn rõ ràng.
- Lần chạy triển khai feature slice nhỏ nhất. Skill dùng lại shared component cùng public feature API thay vì sao chép mù quáng ví dụ riêng của application khác.
- Lần chạy xác minh behavior. Skill báo cáo typecheck, test, build hoặc browser evidence tập trung của project cùng mọi state chưa kiểm tra.
- Lần chạy báo cáo side effect. Tệp đổi, dependency, API call, artifact tạo ra, rủi ro còn lại và bước publication luôn hiển thị.
Giữ side effect và publication rõ ràng
Implementation frontend có thể gọi service thật
Component, loader, mutation và browser test có thể gửi request hoặc thay đổi dữ liệu từ xa khi trỏ tới môi trường thật. Hãy xác nhận endpoint, account, fixture và quyền mutation trước khi chạy.
- Skill có thể triển khai khi runtime có tool ghi tệp và chạy process. Source không cấp quyền cài package, điều khiển browser, truy cập provider, commit, publication hay deployment.
- Cài package và chạy dev tool có thể dùng network, thực thi lifecycle script, cập nhật lockfile, tạo cache và dùng disk.
- Dev server, typechecker, bundler, component tool cùng browser test tạo process và có thể dùng port, CPU, memory cùng storage.
- API call, error tracking, analytics, map, media, font hoặc hosting provider có thể gửi dữ liệu project hay người dùng và phát sinh phí. Bản thân Skill không yêu cầu paid provider.
- Optimistic mutation cần đường rollback khi lỗi và cache reconciliation.
Xác minh kết quả
Kết quả implementation hoàn tất nên cung cấp:
- User-visible behavior cùng state matrix đã triển khai.
- Chính xác tệp đổi và mọi ảnh hưởng dependency hoặc generated file.
- Lệnh typecheck cùng test tập trung và kết quả.
- Bằng chứng browser, responsive, accessibility hoặc performance khi được yêu cầu hay project bắt buộc, cùng gap rõ ràng khi không thể chạy check.
- Behavior API, cache, error cùng rollback cho interaction thay đổi dữ liệu.
- Xác nhận không commit, publication hay deployment trừ khi được cấp quyền riêng.
Xử lý sự cố hoặc tiếp tục
| Triệu chứng | Bước tiếp theo an toàn |
|---|---|
| Alias hoặc helper được tham chiếu không tồn tại | Theo import và shared primitive thật của project; đừng tạo compatibility shim chỉ để khớp ví dụ đi kèm. |
| Project không dùng MUI hoặc TanStack | Giữ framework cùng library đã cài, hoặc xin duyệt một migration rõ ràng. |
| Suspense làm loading behavior đổi ngoài ý muốn | Lập bản đồ boundary gần nhất, error path, cache behavior và phần layout dành sẵn trước khi refactor. |
| Browser test chạm dữ liệu thật | Dừng, chuyển sang môi trường cô lập hoặc fixture và xác nhận quyền mutation. |
| Runtime không nhận diện Skill | Xác nhận target cùng scope, mở session mới, rồi làm theo Runtime không tìm thấy Skill hoặc Agent. |
Tiếp tục với ak:frontend-design cho visual direction chưa rõ hoặc
Tổng quan Engineer Kit cho implementation được điều phối.
Biết các giới hạn hiện tại
- Reference mã hóa style của một React application cụ thể. Chúng không chứng minh alias, component, route hay library đó tồn tại trong project của bạn.
- Source không định nghĩa workflow accessibility, visual regression, security hay cross-browser đầy đủ; hãy thêm rõ check project yêu cầu.
- Source không định nghĩa runtime estimate tất định hay test suite tự động riêng cho Skill. Thời lượng phụ thuộc quy mô feature, feedback loop của project cùng quyền truy cập browser hoặc service.
- Stable và beta chứa nội dung Skill cùng resource giống nhau trong cặp release này.
Thiết kế và triển khai giao diện khác biệt với ak:frontend-design
Chuyển brief, screenshot hoặc video thành giao diện hoàn thiện qua quyết định thẩm mỹ rõ ràng, triển khai, xác minh trực quan và cổng accessibility.
Xây dựng hệ thống backend với ak:backend-development
Chọn stack backend, thiết kế API và data access, rồi triển khai thay đổi service có bằng chứng mà không âm thầm deploy hay migrate dữ liệu production.