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

Phát triển applet cho moi Workspace

Skill hướng dẫn Claude tự xây dựng và chỉnh sửa widget, view, theme trong moi workspace.

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

Làm được gì

  • Giải thích cho agent toàn bộ cấu trúc moi workspace — giao diện web mà người dùng đang chat trong đó.
  • Quy định cách viết applet (widget/view) bằng React + Tailwind trong .moi/widgets/, .moi/views/ và build bằng moi bundle.
  • Hướng dẫn các API riêng của moi: hàm server .server.ts, fileUrl() để stream media, focusTab(), sendChatMessage().
  • Bao gồm quy tắc xử lý biến môi trường/secret (không bao giờ in giá trị, kiểm tra bằng moi env), đổi theme/config, và debug (moi debug logs, moi call-server-fn).

Phù hợp với ai

  • Người dùng moi (molefrog/moi) muốn Claude Code mở rộng dashboard cá nhân của mình.
  • Lập trình viên quen Bun + React + Tailwind, thích mô hình "chat + UI" cùng một agent.
  • Nếu bạn không dùng moi thì skill này gần như không có giá trị.

Ví dụ sử dụng

  1. "Tạo widget theo dõi CPU server" → viết .moi/widgets/server-metrics.tsx kèm .server.ts, chạy moi bundle, kết thúc bằng moi tab focus widgets.
  2. "Tôi cần trang quản lý đơn hàng" → claim id/tiêu đề/icon bằng moi builder set, viết .moi/views/orders.tsx, mở chi tiết qua params.order.
  3. "Đổi màu và font cho workspace" → moi theme --color=... --font=... rồi moi bundle --force.

· · · 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 && 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. Chuẩn bị: cài Bun và kiểm tra moi CLI đã có bằng lệnh moi help.
  2. Cách khuyến nghị: trong workspace moi, chạy moi skill update — skill sẽ được cài/cập nhật tự động.
  3. Nếu muốn cài tay, clone repo: git clone https://github.com/molefrog/moi.git /tmp/moi
  4. Copy thư mục skill: cp -r /tmp/moi/workspace/.claude/skills/moi-workspace ~/.claude/skills/
  5. Kiểm tra thư mục references/ (DESIGN.md, UI-COMPONENTS.md, SCRATCHPAD.md) đã được copy kèm.
  6. Mở Claude Code tại thư mục gốc project (nơi chứa .moi/) và thử yêu cầu "tạo cho tôi một widget".
  7. Mỗi khi nâng cấp moi CLI, chạy lại moi skill update để tránh lệch phiên bản.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION