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

moi Workspace (trình tạo widget & view)

Skill hướng dẫn agent xây dựng applet (widget, view), tùy biến theme/cấu hình và kiểm thử ngay trong web workspace moi.

Lập trìnhNâng cao★ 183⑂ 13Điểm AI 8/10Cập nhật lần cuối: 9 thg 10, 2026

Làm được gì

moi là một web workspace nơi cuộc chat dần tiến hóa thành một ứng dụng cá nhân. Skill này là cẩm nang vận hành giúp Claude tự tay mở rộng workspace đó.

  • Quy tắc viết applet React + Tailwind trong .moi/widgets/ và .moi/views/ (colSpan/rowSpan, title/icon, file dùng chung có tiền tố _)
  • Cách viết server function .server.ts, giới hạn dùng process.env, và nguyên tắc không bao giờ hardcode secret
  • Vòng kiểm thử moi check → moi bundle → thử trên trình duyệt → moi debug logs, kết thúc bằng moi navigate
  • Mẫu sử dụng CLI: moi theme, moi config, moi env exec, moi ui-components, moi views create
  • Ranh giới rõ ràng: không đọc/sửa file nội bộ như .workspace.json, .scratchpad.json

Dành cho ai

  • Người đã cài CLI moi và đang dùng moi workspace
  • Người muốn agent tự dựng widget dashboard hoặc trang làm việc chuyên dụng
  • Dev quen stack Bun + React + Tailwind, muốn agent tự build và tự verify UI

Ví dụ sử dụng

  1. "Thêm widget biểu đồ doanh thu tuần vào trang Overview" → tạo .moi/widgets/revenue.tsx, đặt colSpan, chạy moi bundle --only widgets/revenue, rồi moi navigate 'moi:/overview'
  2. "Tạo view lọc danh sách khách hàng" → moi views create --requirements ..., lưu trạng thái lọc trong query param, trả link moi:/views/<id>
  3. "Kết nối API thời tiết" → chạy moi env kiểm tra key; nếu thiếu thì chỉ tên key cần thêm, khai báo trong config.requiredEnv và gọi an toàn trong forecast.server.ts

· · · 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/molefrog/moi/HEAD/workspace/.claude/skills/moi-workspace/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 workspace/.claude/skills/moi-workspace từ repo GitHub molefrog/moi vào ~/.claude/skills/moi-workspace/ 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/molefrog/moi.git /tmp/moi && mkdir -p ~/.claude/skills && cp -r /tmp/moi/workspace/.claude/skills/moi-workspace ~/.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. Cần có Bun và CLI moi trước. Thông thường skill này được cài kèm khi bạn cài moi (qua CLI hoặc UI).
  2. Nếu muốn cài tay, clone repo: git clone https://github.com/molefrog/moi.git /tmp/moi
  3. Copy thư mục skill: mkdir -p ~/.claude/skills && cp -r /tmp/moi/workspace/.claude/skills/moi-workspace ~/.claude/skills/
  4. Kiểm tra các tài liệu trong references/ (DESIGN.md, INTENTS.md, UI-COMPONENTS.md, SCRATCHPAD.md) đã được copy đầy đủ.
  5. Mở Claude Code tại thư mục gốc project (thư mục chứa .moi/) và chạy moi --help để chắc CLI hoạt động.
  6. Thử yêu cầu "tạo cho tôi một widget trên Overview" để xem skill có kích hoạt. Sau đó dùng moi skill update để giữ skill đồng bộ với CLI.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION