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

ss-component (Trình tạo component StyleSeed)

Skill tạo component UI React mới tuân thủ đầy đủ quy ước thiết kế của StyleSeed.

Thiết kế · UITrung cấp★ 926⑂ 85Điểm AI 7/10Cập nhật lần cuối: 26 thg 8, 2026

Giúp được gì

  • Đọc registry .styleseed (project.json, artifacts/index.json, bundle & manifest) để nắm phương pháp thiết kế đã biên dịch của dự án.
  • Tham chiếu design token trong css/theme.css, css/recipes.css và mẫu components/ui/button.tsx trước khi sinh code.
  • Áp đặt quy ước code: khai báo function, thuộc tính data-slot, gộp class bằng cn(), kiểu prop React.ComponentProps<>, dùng CVA khi có variant, chỉ dùng token màu semantic (không hardcode hex).
  • Áp dụng thang typography (leading/tracking cho display, heading, body, caption), thuộc tính logic ms-*/me-*, viết tắt size-*.
  • Kiểm tra accessibility: vùng chạm tối thiểu 44x44, truyền aria-*, focus-visible:ring-2, tôn trọng prefers-reduced-motion.
  • Đặt file đúng chỗ: primitive vào src/components/ui/, pattern tổ hợp vào src/components/patterns/.

Phù hợp với ai

  • Dev frontend làm việc trên codebase StyleSeed hoặc Tailwind v4 kiểu shadcn/ui.
  • Người phụ trách design system muốn loại bỏ sai lệch style/accessibility khi nhiều người thêm component.
  • Nhóm muốn ép quy tắc token ngay lúc sinh code thay vì lúc review.

Ví dụ sử dụng

  1. /ss-component alert-banner "banner thông báo inline có nút đóng" → tạo src/components/ui/alert-banner.tsx với token màu, focus ring, vùng chạm 44px.
  2. /ss-component stat-card "card hiển thị số liệu và % thay đổi" → component dùng ss-pattern-surface và thang typography.
  3. Yêu cầu badge nhiều biến thể → sinh cấu trúc variant bằng CVA và vẫn hỗ trợ override className.

Lưu ý: skill ghi rõ không dùng cho dự án thiếu components/ui/ hoặc không có Tailwind v4, không dùng để sửa component sẵn có hay scaffold cả trang.

· · · 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/ss-component ~/.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.
  2. Clone repo: git clone https://github.com/bitjaru/styleseed.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r styleseed/engine/.claude/skills/ss-component ~/.claude/skills/
  5. Chạy Claude Code trong thư mục dự án StyleSeed (cần có .styleseed/ và cấu hình Tailwind v4).
  6. Gọi /ss-component ten-component "mô tả" để sinh file component.
  7. Muốn dùng cho cả team thì copy vào .claude/skills/ của dự án và commit thay vì thư mục home.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT