VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:react-best-practices

Mẫu hiệu năng React/Next

Áp dụng các mẫu tối ưu hiệu năng React và Next.js của Vercel Engineering cho component, render, phân tích bundle và data fetching.

01

Xác định bề mặt React

02

Ưu tiên theo nhóm rule

03

Loại bỏ waterfall

04

Giảm việc phía client

Nguyên tắc 01

Theo tám nhóm ưu tiên từ waterfall đến các mẫu nâng cao

Nguyên tắc 02

Xem kích thước bundle, ranh giới server và serialize dữ liệu là một phần của hiệu năng React

Nguyên tắc 03

Tối ưu rerender bằng hình dạng subscription và độ khẩn cấp của update trước khi thêm memoization

Nguyên tắc 04

Neo đề xuất vào ví dụ sai và đúng trong từng rule file

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.

01

Khởi động

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

  1. 1 Xác định bề mặt React Bắt đầu từ component, page, mẫu data fetching, vấn đề bundle hoặc mục tiêu refactor mà người dùng nêu.
  2. 2 Ưu tiên theo nhóm rule Áp dụng thứ tự ưu tiên trong SKILL.md: waterfall và bundle trước, rồi hiệu năng server, fetch phía client, rerender, rendering, JavaScript và mẫu nâng cao.
02

Xử lý

Agent / skill thực thi

  1. 3 Loại bỏ waterfall Đưa await vào nhánh cần dùng, khởi động promise độc lập sớm, dùng Promise.all, xử lý phụ thuộc một phần và stream bằng Suspense boundary.
  2. 4 Giảm việc phía client Tránh barrel import, tải động component nặng, hoãn mã bên thứ ba, tải feature có điều kiện và preload khi hover hoặc focus nếu cải thiện cảm nhận tốc độ.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Siết luồng dữ liệu Dùng React.cache hoặc LRU cache cho việc server, song song hóa fetch server, truyền ít dữ liệu hơn vào client component và khử lặp request hoặc listener toàn cục phía client.
  2. 6 Giảm chi phí render Định hình subscription, memo hóa cây con tốn kém, ổn định callback, khởi tạo state lười, chuyển update không khẩn cấp và áp dụng rule rendering như content-visibility hoặc hoist JSX tĩnh.
04

Đóng

Báo cáo, bàn giao, artifact

  1. 7 Dùng rule file làm ví dụ Lấy mẫu code sai và đúng cụ thể từ từng rule file hoặc guide đã biên dịch đầy đủ trước khi đề xuất refactor.

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:react-best-practices [component or pattern]

Đối số

[component or pattern] Bắt buộc

Bề mặt React hoặc rule cần tập trung

Component, route, server function, vấn đề bundle, đường data fetching, triệu chứng render hoặc pattern tối ưu cần audit hay cải thiện. Nêu bằng chứng baseline, ràng buộc tương thích, ranh giới được sửa và ngưỡng measurement hoặc test định nghĩa thành công.

/ak:react-best-practices "Audit route sản phẩm Next.js hiện có về server waterfalls và chi phí bundle client; đề xuất các thay đổi xếp hạng trước và chỉ triển khai các file đã được duyệt."

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ế.

Rà soát component mặc định Khuyến nghị 
/ak:react-best-practices ProductGrid
Dùng khi:
Dùng khi viết, rà soát hoặc refactor một component React vì hiệu năng.
Kết quả:
Skill kiểm tra component đã nêu theo các nhóm rule Vercel được ưu tiên và trả về hướng refactor cụ thể dựa trên ví dụ trong rule.
Data fetching trong Next.js 
/ak:react-best-practices dashboard page data fetching
Dùng khi:
Dùng cho async waterfall, fetch phía server, khử lặp request phía client hoặc page Next.js tải chậm.
Kết quả:
Skill ưu tiên loại bỏ waterfall, song song hóa fetch server, chọn cache, giới hạn serialize dữ liệu và khử lặp SWR hoặc listener phía client.
Phân tích bundle 
/ak:react-best-practices checkout bundle size
Dùng khi:
Dùng khi route React hoặc Next.js gửi quá nhiều JavaScript hoặc tải feature nặng quá sớm.
Kết quả:
Skill áp dụng rule bundle cho import trực tiếp, dynamic import, hoãn script bên thứ ba, tải có điều kiện và preload để tăng tốc độ cảm nhận.
Đường nóng render 
/ak:react-best-practices activity feed rendering performance
Dùng khi:
Dùng khi rerender, hành vi hydration, danh sách dài, xử lý SVG hoặc vòng lặp JavaScript làm tương tác chậm.
Kết quả:
Skill kết hợp rule rerender, rendering, JavaScript và nâng cao để đề xuất chỉnh subscription, state lười, transition, content-visibility, hoist và sửa vòng lặp.

Phạm vi xử lý

  • Tối ưu component React
  • Page và data fetching trong Next.js
  • Loại bỏ async waterfall
  • Phân tích kích thước bundle
  • Khử lặp dữ liệu phía server và client
  • Hiệu năng rendering và đường nóng JavaScript

Tiếp theo