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

Lắp ghép Component (Assembling Components)

Skill "chốt hạ" giúp kiểm tra và nối các component do các skill design tạo ra thành một project React/Next.js, Python hoặc Rust chạy được.

Thiết kế · UITrung cấp★ 522⑂ 73Điểm AI 9/10Cập nhật lần cuối: 11 thg 12, 2025

Làm được gì

  • Gom kết quả của các skill trước (theming, layouts, dashboards, data-viz, feedback) thành một ứng dụng hoàn chỉnh.
  • Dùng validate_tokens.py để phát hiện màu, khoảng cách, font-size bị hard-code trong CSS và gợi ý thay bằng design token như var(--color-primary).
  • Đưa ra tiêu chí chọn framework (Vite+React, Next.js 14/15, FastAPI, Flask, Axum/Actix) và sinh boilerplate: main.tsx, index.html, vite.config.ts, tsconfig.json.
  • Nối dây phần provider (ThemeProvider, ToastProvider), thứ tự import token (tokens.css → globals.css → component) và tạo barrel export index.ts.
  • Cung cấp checklist 9 điểm trước khi giao hàng: theme toggle chạy, TypeScript pass, import resolve, build sạch...

Phù hợp với ai

  • Người đang dùng chuỗi skill AI Design Components và cần biến output thành app chạy thật.
  • Frontend dev muốn áp đặt quy ước design token cho cả team.
  • Ai cần scaffolding nhanh một dashboard React/Next.js kèm backend Python hoặc Rust.

Ví dụ sử dụng

  1. "Kiểm tra CSS còn giá trị hard-code không" → chạy python scripts/validate_tokens.py src --strict --fix-suggestions và nhận gợi ý sửa.
  2. "Ghép dashboard, DonutChart và Toast vào project Vite+React" → sinh entry point, provider, barrel export và cấu hình build.
  3. "Theme dark/light không đổi" → kiểm tra thứ tự import, thuộc tính data-theme và vị trí ThemeProvider để tìm nguyên nhân.

· · · 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/ancoleman/ai-design-components/HEAD/skills/assembling-components/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 skills/assembling-components từ repo GitHub ancoleman/ai-design-components vào ~/.claude/skills/assembling-components/ 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/ancoleman/ai-design-components.git && mkdir -p ~/.claude/skills && cp -r ai-design-components/skills/assembling-components ~/.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à clone repo: git clone https://github.com/ancoleman/ai-design-components.git
  2. Tạo thư mục skill: mkdir -p ~/.claude/skills
  3. Copy skill này: cp -r ai-design-components/skills/assembling-components ~/.claude/skills/
  4. Nếu muốn dùng cả chuỗi, copy thêm các thư mục khác trong skills/ (theming, layouts, dashboards...).
  5. Cần Python 3 để chạy script — kiểm tra bằng python3 --version.
  6. Khởi động lại Claude Code rồi yêu cầu ví dụ: "lắp các component đã tạo thành project Vite + React".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT