React

repo-scan là một skill kiểm tra source đa nền tảng, có khả năng phân loại file, phát hiện thư viện bên thứ ba được nhúng, và giúp bạn đánh giá phần nào là lõi, phần nào bị lặp, hoặc chỉ là gánh nặng dư thừa. Skill này hữu ích cho repo-scan trong Code Review, di chuyển hệ thống legacy, và lập kế hoạch refactor. Xem hướng dẫn cài đặt repo-scan và cách dùng repo-scan ngay trong skill.

remotion-video-creation là một skill tập trung vào Remotion cho công việc video với React. Nó giúp giảm lỗi khi render nhờ 29 quy tắc bao phủ animation, assets, audio, captions, charts, compositions và transitions. Hãy dùng cho quy trình Video Editing, video giải thích theo mẫu, clip mạng xã hội và motion graphics dựa trên dữ liệu.

frontend-patterns là một skill thực dụng dành cho phát triển frontend với React và Next.js, giúp bạn chọn các pattern dễ bảo trì cho component, state, form, routing, accessibility và hiệu năng. Hãy dùng hướng dẫn frontend-patterns khi bạn cần chỉ dẫn triển khai rõ ràng và cách chọn pattern, chứ không chỉ những best practice chung chung.

Skill click-path-audit giúp lần theo các UI handler qua từng lần thay đổi trạng thái để phát hiện lỗi trình tự, xung đột trạng thái dùng chung và sai lệch trạng thái cuối sau khi refactor hoặc trong quá trình review code.

Dùng skill shadcn để kiểm tra ngữ cảnh dự án, chạy đúng lệnh CLI, cài component và ghép UI theo các mẫu đã được tài liệu hóa cho base vs radix, forms, theming và registries.

frontend-design giúp biến ý tưởng UI mơ hồ thành giao diện khác biệt, sẵn sàng production, với frontend code thực tế, định hướng thẩm mỹ rõ ràng và ít kiểu AI chung chung.

fullstack-developer là một gói prompt tái sử dụng cho công việc web app JavaScript và TypeScript hiện đại, bao quát React, Next.js, Node.js, API, cơ sở dữ liệu, auth và triển khai. Skill này phù hợp nhất cho việc lập kế hoạch và triển khai nhiều lớp, với một file `SKILL.md` duy nhất dùng để xác định phạm vi và quy trình làm việc thay vì cung cấp script hay template.

prototype skill giúp bạn xây dựng mã dùng tạm để trả lời một câu hỏi cụ thể trước khi đầu tư vào một triển khai thật. Hãy dùng nó để kiểm tra logic, chuyển trạng thái, cấu trúc dữ liệu hoặc hướng UI bằng một prototype có thể chạy và bám theo quy ước của repo chủ. Đây là lựa chọn lý tưởng khi bạn cần một hướng dẫn prototype nhanh, không phải một tính năng hoàn chỉnh.

ui-ux-pro-max là kỹ năng toàn diện hỗ trợ AI cho thiết kế UI/UX. Cung cấp hướng dẫn cấu trúc về bố cục, phong cách, hệ màu, kiểu chữ và quy tắc UX cho dự án web và di động. Phù hợp cho lập trình viên và nhóm cần quyết định thiết kế thực tế trên React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter và HTML/CSS. Dùng để lên kế hoạch, đánh giá và cải thiện UI với trí tuệ thiết kế chọn lọc.

ckm:ui-styling giúp bạn tạo giao diện người dùng chuẩn truy cập, sẵn sàng sản xuất với shadcn/ui, Tailwind CSS và thiết kế trực quan trên canvas. Phù hợp cho dự án React cần layout linh hoạt, component truy cập tốt, dark mode và hệ thống thiết kế nhất quán. Sử dụng ckm:ui-styling để thiết kế UI, tạo theme và prototype nhanh với hướng dẫn thực tế theo từng stack.

design-system-patterns giúp các nhóm xây dựng nền tảng UI có khả năng mở rộng với cấu trúc token, kiến trúc theming và các mẫu API component tái sử dụng cho design system và thư viện component.

Skill interaction-design giúp các nhóm thiết kế và triển khai chuyển động UI có chủ đích, microinteraction, transition, trạng thái tải và mẫu phản hồi, kèm tài liệu tham khảo thực tế theo định hướng React và hướng dẫn áp dụng.

Kỹ năng web-component-design giúp các nhóm thiết kế UI component có thể tái sử dụng cho React, Vue và Svelte, với các mẫu API chắc chắn, hướng dẫn về khả năng truy cập và tài liệu tham khảo về các đánh đổi khi styling trong design system.

react-state-management là kỹ năng thực tiễn giúp chọn và sử dụng các công cụ quản lý state trong React như Redux Toolkit, Zustand, Jotai, React Query, SWR và RTK Query dựa trên loại state, quy mô ứng dụng và nhu cầu chuyển đổi.

nextjs-app-router-patterns giúp nhà phát triển lên kế hoạch kiến trúc Next.js 14+ App Router, bao gồm Server Components, streaming, caching, route handlers và Server Actions cho phát triển full-stack cũng như di chuyển từ Pages Router.

react-native-architecture hỗ trợ lên kiến trúc cho ứng dụng React Native và Expo ở môi trường production, bao gồm routing, ranh giới state, native modules, luồng offline-first và các đánh đổi giữa Expo với bare.

react-modernization là một skill tập trung vào nâng cấp, giúp đưa ứng dụng React 16/17 lên 18+, chuyển class component sang hooks, cập nhật root API và lập kế hoạch refactor theo từng giai đoạn với hướng dẫn có tính đến codemod.

vercel-react-native-skills là skill cho React Native và Expo dành cho phát triển frontend chú trọng hiệu năng. Hãy dùng nó để cải thiện việc render danh sách, animation, điều hướng, các mẫu UI, quản lý state và thiết lập native module. Skill này cung cấp các quy tắc thực tiễn, hướng dẫn cài đặt và các mẫu sử dụng để xử lý các điểm nghẽn của ứng dụng mobile với ít phải đoán mò hơn.

vercel-composition-patterns là một skill React composition dành cho Frontend Development, giúp thay thế tình trạng prop boolean tràn lan bằng compound components, variants rõ ràng, lifted state và các API an toàn với React 19. Hãy dùng nó để rà soát kiến trúc component, cải thiện API UI có thể tái sử dụng và chọn đúng pattern composition cho code frontend có thể mở rộng.

vercel-react-best-practices là skill từ Vercel Engineering giúp AI tối ưu hiệu năng React và Next.js với bộ quy tắc ưu tiên cho waterfalls, bundle size và rendering.

overdrive là một GitHub skill dành cho công việc thiết kế UI tham vọng, nhấn mạnh ngữ cảnh, lập kế hoạch trước bằng đề xuất, và chất lượng tương tác vượt trội. Hãy dùng nó để cài đặt và áp dụng overdrive cho các chuyển động điện ảnh, giao diện phản hồi tốt, và trải nghiệm sản phẩm tác động mạnh.

Skill optimize giúp chẩn đoán và khắc phục các vấn đề hiệu năng UI ở nhiều khía cạnh như tốc độ tải, render, animation, hình ảnh và kích thước bundle. Hãy dùng khi bạn cần một hướng dẫn optimize có cấu trúc để tối ưu hiệu năng, ưu tiên đo lường trước khi xử lý các trải nghiệm web chậm, giật hoặc thiếu mượt mà.

Skill source-driven-development đặt việc viết code theo framework trên nền tài liệu chính thức, giúp bạn kiểm tra pattern trước khi triển khai. Đây là lựa chọn phù hợp cho cách dùng source-driven-development trong React, Vue, Next.js, Svelte, Angular và các stack tương tự khi tính đúng, nguồn gốc và quyết định phụ thuộc phiên bản là yếu tố quan trọng.

Skill performance-optimization giúp bạn đo lường trước, tìm đúng nút thắt cổ chai, khắc phục và xác minh kết quả. Hãy dùng khi có yêu cầu về hiệu năng, khi bạn nghi ngờ có regression, hoặc khi cần cải thiện Core Web Vitals, thời gian tải hay độ trễ tương tác.