Ctrl K

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:frontend-development

Frontend React và TypeScript

Triển khai frontend React và TypeScript hiện đại với Suspense, lazy loading, TanStack Query/Router, MUI v7, hiệu năng và pattern tổ chức file.

Phân loại việc

Nạp guide đúng chủ đề

Lập cấu trúc

Xây component

Nguyên tắc 01

Data fetching dựa trên Suspense là pattern chính.

Nguyên tắc 02

Code theo domain nằm trong features; components chỉ dành cho phần thật sự tái sử dụng.

Nguyên tắc 03

MUI v7 dùng Grid size, sx và style có type theo theme.

Nguyên tắc 04

TypeScript strict, type import và boundary rõ giúp tránh trôi contract.

Nguyên tắc 05

Hook tối ưu hiệu năng phải phục vụ nhu cầu data-flow thật, không làm theo nghi thức.

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

Khởi động

Đầu vào, phạm vi, route

1 Phân loại việc Xác định yêu cầu là component, page, feature, data fetching, route, styling, tối ưu hiệu năng hay dọn TypeScript.
2 Nạp guide đúng chủ đề Đọc resource liên quan: component patterns, data fetching, tổ chức file, styling, routing, loading/error states, performance, TypeScript, common patterns hoặc ví dụ.
3 Lập cấu trúc Với feature, tạo features/name gồm api, components, hooks, helpers, types, route, component lazy, Suspense boundary và index export công khai.

Xử lý

Agent / skill thực thi

4 Xây component Dùng React.FC<Props>, props có type, named const kèm default export, alias import và lazy loading cho component nặng.
5 Fetch bằng Suspense Dùng useSuspenseQuery, chiến lược cache-first, file API service theo feature và route path không thêm tiền tố /api dư thừa.
6 Style bằng MUI v7 Dùng sx với SxProps<Theme>, style inline dưới 100 dòng, tách .styles.ts trên 100 dòng và cú pháp Grid size của MUI v7.

Kiểm chứng

Gate, review, xác thực

7 Xử lý trạng thái Bọc nội dung bằng SuspenseLoader, dùng useMuiSnackbar cho phản hồi và tránh nhánh loading làm lệch layout.
8 Tối ưu có chọn lọc Áp dụng useMemo, useCallback, React.memo, debounce search và cleanup effect chỉ khi data flow hoặc prop truyền xuống thật sự cần.
9 Xác minh contract Xác nhận route, render, hành vi loading/error, type, import, tổ chức file và tương tác user quan sát được.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:frontend-development [component or feature]

Đối số

[component or feature] Bắt buộc

Component hoặc feature

Yêu cầu triển khai React/TypeScript bằng ngôn ngữ tự nhiên. Nêu outcome người dùng thấy được, contract component hoặc dữ liệu hiện có, state bắt buộc, ranh giới responsive và accessibility, tệp hoặc dependency được phép và mục tiêu xác minh tập trung; Skill không định nghĩa stack mặc định, flag hay mode có tên.

/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."

Mode / route nên dùng

component

Component

Nghiên cứu:: component-patterns.md
Review:: Props/lazy/export checks
Xác thực:: Rendered state

feature

Feature

Nghiên cứu:: file-organization.md
Review:: Domain boundaries
Xác thực:: Route + public API

data fetching

Dữ liệu

Nghiên cứu:: data-fetching.md
Review:: Suspense/cache/API service
Xác thực:: useSuspenseQuery behavior

styling

Style MUI

Nghiên cứu:: styling-guide.md
Review:: sx/Grid/style threshold
Xác thực:: Visual state

performance

Hiệu năng

Nghiên cứu:: performance.md
Review:: Memoization justified
Xác thực:: Observable improvement

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Lát cắt feature mới Khuyến nghị

/ak:frontend-development "Xây dựng tính năng account-settings với route, typed API service, feature components, hooks, helpers, types, lazy loading và Suspense boundaries."

Dùng khi:: Dùng khi tạo feature React/TypeScript cần folder domain, nối route và API công khai của feature.
Kết quả:: Thiết lập cấu trúc features/{name} theo checklist của Skill, thêm route, lazy-load UI nặng, bọc loading bằng SuspenseLoader và export boundary của feature.

Component dữ liệu Suspense

/ak:frontend-development "Tạo bảng orders fetch bằng TanStack Query, sử dụng lớp service apiClient hiện có, và xử lý loading cùng errors mà không early return spinner."

Dùng khi:: Dùng khi component fetch dữ liệu server và phải thay nhánh isLoading bằng hành vi dựa trên Suspense.
Kết quả:: Triển khai useSuspenseQuery với query key có type và API service theo feature, giữ layout ổn định bằng SuspenseLoader và đưa phản hồi user qua useMuiSnackbar.

Route TanStack

/ak:frontend-development "Thêm route /reports lazy-load trang Reports, sử dụng createFileRoute, và trả về dữ liệu breadcrumb từ loader."

Dùng khi:: Dùng khi thiết lập page TanStack Router theo folder trong app React hiện có.
Kết quả:: Tạo file route theo pattern routes/{name}/index.tsx của Skill, lazy-load page của feature và giữ metadata loader như breadcrumb rõ ràng.

Lượt style MUI

/ak:frontend-development "Refactor các thẻ dashboard sang style sx MUI v7, SxProps<Theme> có kiểu, và cú pháp Grid size mà không thay đổi hành vi sản phẩm."

Dùng khi:: Dùng khi công việc là triển khai trong stack MUI v7, không phải chọn concept thị giác.
Kết quả:: Dùng styling guide của Skill: sx là phương thức chính, SxProps<Theme> để truy cập theme có type, chỉ tách .styles.ts khi vượt ngưỡng và dùng prop Grid size.

Phạm vi xử lý

Component React.FC, lazy loading, SuspenseLoader và pattern export component
TanStack Query useSuspenseQuery và tầng API service
Route theo folder bằng TanStack Router và loader
Style MUI v7 bằng sx, cú pháp Grid, type theme và ngưỡng tách file style
TypeScript strict, form với Zod, DataGrid wrapper, dialog, auth, mutation và invalidation cache