Tailwind CSS

Dùng design-system skill để tạo hoặc rà soát một UI system, trích xuất token từ code hiện có và kiểm tra tính nhất quán của styling trong các repo thực tế.

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.

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.

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.

Dùng skill tailwind-design-system để xây dựng design system với Tailwind CSS v4, bao gồm tokens, theming, variants, accessibility và hướng dẫn chuyển từ v3 sang v4.

Dùng figma để lấy ngữ cảnh thiết kế, ảnh chụp màn hình, biến và tài nguyên từ Figma MCP server, rồi chuyển các node Figma thành quyết định UI sẵn sàng cho triển khai. Kỹ năng figma này rất phù hợp khi bạn có Figma URL hoặc node ID và cần cách dùng figma chính xác cho công việc thiết kế sang code, thiết lập hoặc khắc phục sự cố.

frontend-dev là một skill frontend-dev để xây dựng các trang web chỉn chu, sẵn sàng cho production, với UI cao cấp, chuyển động điện ảnh, media do AI tạo ra, nội dung thuyết phục và nghệ thuật tạo sinh. Hãy dùng nó cho landing page, website marketing, trang sản phẩm, dashboard và các công việc frontend khác khi thiết kế, nội dung và chi tiết triển khai cần luôn đồng bộ.

frontend-ui-dark-ts giúp bạn xây dựng UI React giao diện tối với TypeScript, Tailwind CSS, Framer Motion và các design token có thể tái sử dụng. Skill này phù hợp cho dashboard, admin panel, chế độ xem phân tích và các giao diện nhiều dữ liệu cần một phong cách tối chỉn chu cùng các mẫu component nhất quán.

expo-tailwind-setup là hướng dẫn thực tế để cài đặt và cấu hình Tailwind CSS v4 trong Expo bằng react-native-css và NativeWind v5 cho iOS, Android và web.

ui-web giúp bạn thiết kế và tạo kiểu cho các thành phần UI web với các kiểm tra WCAG 2.1 AA, độ tương phản mạnh, điều khiển hiển thị rõ ràng và các mẫu Tailwind thân thiện với dark mode. Hãy dùng skill ui-web này cho giao diện front-end kiểu React khi bạn cần hướng dẫn thực tế về UI Design để cải thiện khả năng tiếp cận và giảm việc phải đoán mò.

Skill redesign-existing-projects nâng cấp các website và ứng dụng hiện có lên chất lượng cao cấp. Skill này kiểm tra thiết kế hiện tại, phát hiện các mẫu AI chung chung, và áp dụng triển khai thiết kế cao cấp mà không làm hỏng chức năng. Hoạt động với mọi CSS framework hoặc vanilla CSS.

baseline-ui giúp xem xét hoặc tạo UI dựa trên Tailwind theo một chuẩn nền có quan điểm rõ ràng về spacing, typography, accessibility và motion. Hãy dùng kỹ năng baseline-ui khi bạn cần đầu ra component an toàn hơn, quyết định UI Design rõ ràng hơn, và ít lệch khỏi các primitive sẵn có. Kỹ năng này phù hợp nhất với workflow React/Tailwind và các bước kiểm tra baseline-ui thực tế.

Skill shadcn-ui giúp bạn lập kế hoạch, cài đặt và điều chỉnh các component shadcn/ui trong một ứng dụng thực tế. Hãy dùng hướng dẫn shadcn-ui này cho Design Implementation, khám phá component, tùy biến, và cách sử dụng shadcn-ui trong các luồng form, bảng, xác thực và bố cục.

web-artifacts-builder giúp khởi tạo dự án React, Tailwind CSS và shadcn/ui, phát triển như bình thường rồi đóng gói thành một `bundle.html` duy nhất. Phù hợp nhất cho web artifact frontend phức tạp có state, routing hoặc UI phong phú; không dành cho demo một file đơn giản.