Frontend

ui-demo giúp bạn quay video demo ứng dụng web chỉn chu bằng Playwright, với chuyển động con trỏ hiển thị rõ và nhịp thao tác tự nhiên. Hãy dùng ui-demo cho các video hướng dẫn, clip onboarding, tour tính năng và bản ghi kiểu tutorial. Làm theo quy trình khám phá, luyện tập rồi ghi hình để có kết quả ổn định, đặc biệt khi làm việc với prototype và giao diện thay đổi nhanh.

nuxt4-patterns là một skill cho Nuxt 4 về an toàn hydration, route rules, lazy loading và truy vấn dữ liệu an toàn với SSR. Dùng skill nuxt4-patterns để đưa ra quyết định tốt hơn trong Frontend Development, giảm lỗi lệch render và áp dụng đúng pattern cho từng trang hoặc component.

Kỹ năng nextjs-turbopack giúp bạn dùng Turbopack trong Next.js 16+ để phát triển cục bộ nhanh hơn, HMR mượt hơn và đưa ra quyết định đúng về bundler. Hãy xem đây như một hướng dẫn thực hành về nextjs-turbopack cho việc cài đặt, sử dụng, và khi nào nên chuyển lại sang webpack trong quy trình Frontend Development.

healthcare-emr-patterns là một skill thực tiễn cho thiết kế EMR/EHR trong lĩnh vực y tế. Skill này bao gồm quy trình làm việc khi tiếp nhận bệnh nhân, ghi chú lâm sàng, kiểm tra thuốc, làm nổi bật kết quả xét nghiệm, nhật ký kiểm toán, tích hợp CDSS và nhập liệu y tế ưu tiên khả năng truy cập, nhằm hỗ trợ quy trình làm việc của bác sĩ an toàn hơn.

gan-style-harness là một skill Generator-Evaluator cho Agent Orchestration, giúp xây dựng ứng dụng hoàn chỉnh với mức phản biện chặt hơn, vòng lặp cải tiến tốt hơn và ít điểm yếu hơn. Hãy dùng nó khi bạn cần skill gan-style-harness cho các tác vụ nặng về frontend, full-stack hoặc hướng production, nơi chất lượng review quan trọng hơn tốc độ.

frontend-slides giúp bạn tạo HTML presentation giàu hiệu ứng chuyển động từ đầu hoặc bằng cách chuyển đổi file PowerPoint. Hãy dùng frontend-slides cho các buổi talk, pitch deck, workshop, demo nội bộ và frontend-slides cho UI Design khi bạn cần khám phá trực quan, đầu ra chạy trên trình duyệt không phụ thuộc thư viện, và bộ slide vừa khít một khung nhìn.

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.

Dùng frontend-design để xây dựng các giao diện frontend khác biệt, sẵn sàng cho sản xuất, với định hướng thị giác rõ ràng. Skill frontend-design này phù hợp cho landing page, dashboard, app shell và các component mà thứ bậc nội dung, kiểu chữ, chuyển động và độ chỉn chu quan trọng không kém phần triển khai. Nó cũng bao gồm hướng dẫn cài đặt và sử dụng cho công việc UI theo hướng thiết kế trước.

dart-flutter-patterns là một kỹ năng thực tiễn về Dart và Flutter dành cho phát triển frontend, bao quát null safety, immutable state, async composition, cấu trúc widget, state management, điều hướng GoRouter, networking với Dio, testing và clean architecture. Hãy dùng hướng dẫn dart-flutter-patterns để chọn các pattern sẵn sàng cho production khi làm tính năng mới và refactor.

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.

Skill bun-runtime giúp bạn chọn Bun cho các dự án JavaScript hoặc TypeScript mới, chuyển từ Node, viết script, chạy test và thiết lập với Vercel. Nội dung bao gồm cách dùng bun-runtime, hướng dẫn cài đặt, so sánh Bun với Node và các quy trình làm việc thực tế cho phát triển frontend lẫn full-stack.

browser-qa là skill QA cho trình duyệt, dùng cho kiểm thử giao diện sau khi triển khai, kiểm tra tương tác, chụp ảnh responsive và rà soát khả năng truy cập bằng tự động hóa trình duyệt. Skill này giúp lập trình viên frontend và đội ngũ QA xác minh trang staging hoặc preview theo quy trình browser-qa nhất quán, thay vì dùng prompt chung chung.

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.

webapp-testing là skill giúp kiểm thử web app cục bộ bằng Python Playwright. Skill này hỗ trợ khởi động server với `scripts/with_server.py`, kiểm tra UI đã render, tìm selector, chụp ảnh màn hình, ghi log console và xác minh hành vi frontend theo quy trình thăm dò trước.

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.

Skill benchmark giúp phát hiện các hồi quy hiệu năng trong luồng web và ứng dụng. Hãy dùng nó để thiết lập đường cơ sở, so sánh trước và sau thay đổi, và theo dõi liệu một PR có làm trang chậm hơn, nặng hơn hay kém ổn định hơn không. Đây là hướng dẫn benchmark thực tế cho tối ưu hiệu năng, Core Web Vitals, kiểm tra Lighthouse, dung lượng bundle và xu hướng thời gian tải.

migrate-to-shoehorn giúp bạn thay các ép kiểu `as` trong test TypeScript bằng @total-typescript/shoehorn để tạo fixture một phần an toàn hơn. Hãy dùng skill migrate-to-shoehorn này khi bạn cần dọn dẹp dữ liệu test dùng ép kiểu quá nhiều, làm theo hướng dẫn migrate-to-shoehorn, hoặc chuẩn hóa migrate-to-shoehorn cho Test Automation.

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.

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.

Dùng ckm:slides để biến ý tưởng thô thành bộ slide HTML mang tính chiến lược, với chiến lược slide, công thức copywriting, mẫu bố cục và template sẵn sàng cho Chart.js.

ckm:design-system giúp bạn xây dựng token ba lớp, spec component, CSS variables, mapping Tailwind và slide thương hiệu nhất quán dựa trên token architecture rõ ràng.

Skill accessibility-compliance giúp các nhóm rà soát và cải thiện UI web hoặc mobile theo WCAG 2.2 với hướng dẫn thực tiễn về ARIA, truy cập bằng bàn phím, screen reader và khả năng truy cập trên thiết bị di động. Phù hợp nhất cho audit UX, sửa lỗi component và các khuyến nghị sẵn sàng để triển khai.

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.