Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

ss-component — Bộ sinh component UI cho StyleSeed

Sinh component UI React/Tailwind v4 tuân thủ chặt chẽ quy ước thiết kế StyleSeed.

Thiết kế · UINâng cao★ 968⑂ 89Điểm AI 7/10Cập nhật lần cuối: 29 thg 9, 2026

Làm được gì

  • Kiểm tra registry StyleSeed (.styleseed/project.json, artifacts/index.json), chạy script ss-resolve để xác thực/biên dịch context của artifact trước khi viết code.
  • Đọc file token thật, component primitive có sẵn (ví dụ button) và đường dẫn tiện ích cn() để giữ API nhất quán.
  • Bắt buộc các quy ước: khai báo function, thuộc tính data-slot, kiểu React.ComponentProps<>, hỗ trợ className, dùng CVA khi có variant, chỉ dùng token màu semantic (không hard-code hex).
  • Quy định typography (leading/tracking theo cấp cỡ chữ), thuộc tính logic ms-*/me-*, viết tắt size-*, biến motion.
  • Kèm yêu cầu accessibility: vùng chạm tối thiểu 44x44, focus-visible:ring-2, truyền aria-*, tôn trọng prefers-reduced-motion.

Phù hợp với ai

  • Lập trình viên frontend trong dự án React + Tailwind v4 đã cài StyleSeed.
  • Người quản trị design system muốn giữ token và API đồng nhất khi nhiều người thêm component.
  • Nhóm muốn tự động hóa việc tuân thủ chuẩn a11y và typography.

Ví dụ sử dụng

  • /ss-component badge "nhãn nhỏ hiển thị trạng thái" → sinh Badge dùng token và variant CVA sẵn có.
  • Thêm component dùng chung ảnh hưởng nhiều artifact: skill resolve và check từng artifact riêng biệt.
  • Dự án legacy chỉ có STYLESEED.md: dùng nhánh --from-lock để nạp quy tắc rồi mới viết component.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/bitjaru/styleseed/HEAD/engine/.claude/skills/ss-component/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục engine/.claude/skills/ss-component từ repo GitHub bitjaru/styleseed vào ~/.claude/skills/ss-component/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/bitjaru/styleseed.git && mkdir -p ~/.claude/skills && cp -r styleseed/engine/.claude/skills/* ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và vào thư mục làm việc.
  2. Clone repo: git clone https://github.com/bitjaru/styleseed.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ skill: cp -r styleseed/engine/.claude/skills/* ~/.claude/skills/ (cần cả ss-resolve và ss-update vì skill này phụ thuộc vào chúng).
  5. Đảm bảo dự án đích đã cấu hình StyleSeed (có .styleseed/project.json hoặc STYLESEED.md).
  6. Khởi động lại Claude Code, tại thư mục gốc dự án chạy /ss-component <tên> "<mô tả>".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT