ckm:ui-styling

Tổng quan

ckm:ui-styling là gì?

ckm:ui-styling là một kỹ năng thiết kế UI và styling frontend tập trung vào việc xây dựng các giao diện đẹp, dễ tiếp cận trong stack React và Next.js hiện đại. Nó làm việc với các component shadcn/ui (xây trên Radix UI + Tailwind CSS) và đi kèm asset font cho canvas, giúp bạn chuyển mượt từ layout giao diện sang visual thương hiệu và poster.

Kỹ năng này được tối ưu cho cách làm utility-first với Tailwind CSS và cho các team muốn có hướng dẫn có định hướng về typography, theming và các pattern UI tái sử dụng, thay vì phải bắt đầu từ một file CSS trống.

Khả năng chính

Với ckm:ui-styling, một agent có thể:

• Style các UI dựa trên React (Next.js, Vite, Remix, Astro) theo pattern của shadcn/ui
• Áp dụng các class utility của Tailwind CSS cho layout, spacing và các state
• Đề xuất cấu trúc component dễ tiếp cận dựa trên convention của Radix UI
• Hỗ trợ định nghĩa các primitive trong design system như màu, bo góc, thang typography
• Hỗ trợ dark mode và tùy biến theme ở cả cấp token và component
• Gợi ý chiến lược layout responsive (mobile-first, lưới adaptive, flexbox)
• Tận dụng thư mục canvas-fonts/ được tuyển chọn để lựa chọn typography cho UI và poster
• Hỗ trợ tạo asset visual như poster đơn giản hoặc visual thương hiệu ăn khớp với style giao diện của bạn

Dành cho ai?

ckm:ui-styling phù hợp nếu bạn là:

• Nhà thiết kế UI/UX làm việc trong môi trường React hoặc Next.js
• Kỹ sư frontend chịu trách nhiệm implement hoặc mở rộng một design system
• Team sản phẩm đang xây dashboard mới, trang marketing, hoặc shell ứng dụng
• Lập trình viên muốn có UI dễ tiếp cận, nhất quán mà không phải tự học một ngôn ngữ thiết kế custom phức tạp từ đầu

Ít phù hợp hơn nếu bạn đang xây:

• Giao diện không phải web (mobile native, desktop app) không có lớp HTML/CSS
• Dự án tránh dùng Tailwind hoặc hoàn toàn không dùng shadcn/ui và phụ thuộc vào framework thiết kế khác
• Dịch vụ chỉ có backend hoặc API-first không có yêu cầu UI

Phù hợp với tech stack nào

ckm:ui-styling được tối ưu cho:

• Thiết kế UI – layout, phân cấp, typography, màu sắc và các state component
• Phát triển frontend – React, Next.js, CSS utility-first và kiến trúc component
• Design system – token, component nhất quán và pattern có thể lặp lại

Nếu stack của bạn đang dùng shadcn/ui, Radix UI, Tailwind CSS hoặc có kế hoạch dùng, kỹ năng này sẽ bám rất sát vào quy trình làm việc đó.

Cách sử dụng

1. Cài đặt kỹ năng ui-styling

Để thêm ui-styling vào môi trường agent của bạn, hãy cài đặt từ upstream repository:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Lệnh này sẽ kéo cấu hình ckm:ui-styling và các asset hỗ trợ về thư mục .claude/skills/ui-styling trong source repository của bạn.

2. Cấu trúc và file quan trọng

Sau khi cài đặt, hãy xem qua các file và thư mục chính sau:

• SKILL.md – tài liệu tham chiếu chính cho UI Styling Skill, gồm mô tả, metadata và link tới tài liệu shadcn/ui và Tailwind
• LICENSE.txt – license MIT cho chính kỹ năng này
• canvas-fonts/ – các font theo Open Font License (OFL) dùng cho visual trên canvas và thử nghiệm typography
• references/ – tài liệu tham khảo thêm về thiết kế hoặc triển khai (nếu có trong checkout của bạn)
• scripts/ – các script hỗ trợ liên quan đến workflow của skill (nếu có trong checkout của bạn)

Thư mục canvas-fonts/ chứa nhiều họ font (ví dụ: ArsenalSC, Big Shoulders, Boldonse, Bricolage Grotesque, Crimson Pro, DM Mono, Erica One, Geist Mono, IBM Plex, Instrument Sans) với cả file .ttf và file license tương ứng -OFL.txt. Chúng hữu ích khi bạn tạo poster, hero image hoặc tài liệu thương hiệu khác trong môi trường canvas mà vẫn tuân thủ license.

3. Quy trình điển hình trong dự án React / Next.js

Bước 1: Làm rõ component hoặc layout mục tiêu

argument-hint của skill là:

[component or layout]

Bắt đầu bằng cách nêu rõ bạn đang muốn style phần nào, ví dụ:

• "Dashboard sidebar navigation"
• "Marketing homepage hero section"
• "Data table with pagination and filters"
• "Multi-step form with validation states"

Mô tả cụ thể component hoặc layout sẽ giúp agent áp dụng đúng tổ hợp primitive của shadcn/ui, các utility Tailwind và typography từ bộ font sẵn có.

Bước 2: Dùng shadcn/ui làm lớp component

Theo SKILL.md, ckm:ui-styling được thiết kế xoay quanh hệ sinh thái shadcn/ui và Radix UI primitives. Trong thực tế, điều này nghĩa là:

• Ưu tiên component của shadcn/ui (button, dialog, dropdown, form, table, navigation) khi đề xuất cấu trúc UI
• Đảm bảo các pattern về accessibility được tuân thủ (thứ tự focus, ARIA attribute, điều hướng bằng keyboard) theo chuẩn Radix UI
• Sinh ra code tương thích với cách sử dụng copy-paste các component shadcn/ui

Hãy dùng skill này khi bạn muốn agent suy nghĩ theo mô hình component của shadcn/ui thay vì chỉ đưa ra snippet HTML thuần.

Bước 3: Áp dụng Tailwind CSS theo kiểu utility-first

Skill giả định bạn đã thiết lập Tailwind CSS. Hãy hướng dẫn agent:

• Gợi ý tổ hợp class Tailwind cho spacing, typography, border, shadow và các state
• Implement behavior responsive với sm:, md:, lg:, v.v.
• Giữ cách đặt và nhóm class nhất quán để JSX dễ đọc

Vì stack cốt lõi bao gồm Tailwind, đây là cách tốt nhất để nhận được gợi ý layout và styling sẵn sàng cho production, thay vì CSS rời rạc.

Bước 4: Định nghĩa theme, token và dark mode

ckm:ui-styling đặc biệt hữu ích khi bạn cần:

• Bảng màu ánh xạ tốt sang các semantic token (ví dụ: primary, secondary, accent, muted)
• Gợi ý về spacing, bo góc và thang typography có thể trở thành token trong design system
• Hướng dẫn triển khai dark mode bằng Tailwind và convention theming của framework bạn đang dùng

Hãy yêu cầu agent đề xuất token và minh họa cách ánh xạ chúng vào Tailwind config và prop của component để tạo một design system liền mạch.

Bước 5: Dùng canvas fonts cho visual và poster

Thư mục canvas-fonts/ hỗ trợ các tác vụ thiết kế dựa trên canvas như:

• Tạo hero image hoặc social share graphic có visual khớp với UI của bạn
• Tạo poster hoặc tài liệu thương hiệu đơn giản trong giai đoạn khám phá thiết kế ban đầu

Skill không cung cấp script thực thi để vẽ trên canvas, nhưng đảm bảo bạn có sẵn một bộ font đã được kiểm duyệt và có tài liệu license rõ ràng để dùng trong workflow canvas hoặc công cụ thiết kế của riêng bạn.

4. Khi nào nên dùng kỹ năng này

Ưu tiên dùng ckm:ui-styling thay vì một kỹ năng code chung chung khi:

• Bạn cần cả hướng dẫn về visual lẫn cách triển khai (không chỉ JSX thuần)
• Các chi tiết về accessibility và UX (focus state, ARIA, điều hướng bằng keyboard) quan trọng với bạn
• Stack của bạn đang dùng, hoặc sẽ dùng, shadcn/ui và Tailwind
• Bạn đang định nghĩa hoặc mở rộng một design system chứ không chỉ làm một trang tĩnh đơn lẻ

Skill này có thể hơi “dư thừa” nếu bạn chỉ cần một block HTML tĩnh, hoặc team của bạn đã có design system khóa chặt, không muốn thay đổi.

5. Tùy biến cho repository của riêng bạn

Workflow upstream chỉ mang tính ví dụ; bạn nên:

• Đọc SKILL.md để hiểu rõ các giả định về shadcn/ui, Tailwind và các framework React
• Ánh xạ các cấu trúc được gợi ý vào thư viện component và Tailwind config của riêng bạn
• Chỉ tái sử dụng những pattern phù hợp với thương hiệu, tiêu chuẩn accessibility và ngôn ngữ thiết kế của bạn

Câu hỏi thường gặp (FAQ)

ckm:ui-styling có bị ràng buộc với một frontend framework cụ thể không?

Kỹ năng này được thiết kế cho các framework dựa trên React và trong SKILL.md upstream có nêu rõ việc dùng với Next.js, Vite, Remix và Astro. Nó giả định bạn đã quen với JSX và cách phát triển UI theo hướng component.

Tôi có bắt buộc phải dùng shadcn/ui thì mới tận dụng được skill này không?

Bạn sẽ khai thác được nhiều giá trị nhất từ ckm:ui-styling khi dùng shadcn/ui, vì phần lớn pattern và tài liệu tham chiếu của skill bám sát hệ sinh thái này và Radix UI primitives. Bạn vẫn có thể chuyển hóa các ý tưởng sang thư viện component khác, nhưng gợi ý của agent sẽ rõ ràng nhất khi shadcn/ui là một phần trong stack của bạn.

Còn Tailwind CSS thì sao — tôi có thể dùng cách viết CSS khác không?

Skill giả định bạn dùng Tailwind CSS với cách styling utility-first. Bạn có thể chuyển các utility class sang hệ thống khác, nhưng điều đó sẽ thêm công việc. Để có output có thể copy-paste trực tiếp, hãy kết hợp ckm:ui-styling với một dự án đã bật Tailwind.

Tính dễ tiếp cận (accessibility) được xử lý như thế nào trong ui-styling?

Stack cốt lõi của skill bao gồm shadcn/ui và Radix UI, vốn ưu tiên các pattern dễ tiếp cận. Hãy dùng ckm:ui-styling khi bạn cần các dialog, form, table, navigation và component tương tác dễ tiếp cận, và muốn được hỗ trợ duy trì quản lý focus, ARIA attribute và tương tác bằng keyboard.

Các canvas font dùng để làm gì, và tôi có thể dùng chúng trong môi trường production không?

Thư mục canvas-fonts/ chứa các file font và tài liệu license -OFL.txt tương ứng theo SIL Open Font License (OFL). Chúng được dùng cho thiết kế visual trên canvas, poster và tài liệu thương hiệu. Hãy đọc file OFL của từng font để xác nhận điều kiện sử dụng cho dự án của bạn, nhưng về tổng thể, font theo OFL thường có thể được sử dụng, chỉnh sửa và phân phối lại như một phần của phần mềm hoặc tài liệu, tuân thủ các điều kiện ghi trong file license.

ckm:ui-styling có thay thế hoàn toàn một design system không?

Không. ckm:ui-styling giúp bạn định nghĩa và triển khai các pattern giống design system — token, component và theme — trên nền shadcn/ui và Tailwind CSS. Nó nên được dùng như một công cụ đồng hành cho công việc xây dựng design system, chứ không phải thay thế hoàn toàn tài liệu thiết kế và thư viện Figma.

Khi nào ckm:ui-styling không phù hợp?

Bạn có thể không cần skill này nếu:

• Dự án dùng một cách styling hoàn toàn khác (ví dụ: chỉ CSS-in-JS, không dùng Tailwind) và bạn không muốn utility kiểu Tailwind
• Bạn không dùng React hoặc framework tương thích
• Bạn chỉ cần wireframe độ trung/thấp hoặc chỉ làm backend, không đặt trọng tâm vào UI được trau chuốt

Tôi có thể tìm hiểu thêm về các công cụ nền tảng ở đâu?

SKILL.md upstream có liên kết tới:

• shadcn/ui: https://ui.shadcn.com/llms.txt
• Tailwind CSS: https://tailwindcss.com/docs

Hãy dùng các tài nguyên chính thức này song song với ckm:ui-styling để hiểu sâu hơn về các component và utility mà skill này xây dựng trên đó.