Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

moi Workspace Applet Development

Teaches Claude how to build and maintain widgets, views, themes and config inside a moi workspace.

Dev & CodingAdvanced★ 135⑂ 8AI score 8/10Last updated: Sep 1, 2026

What it does

  • Gives the agent a full map of the moi workspace — the web UI the user chats from — and how to extend it with code.
  • Defines how to author applets (widgets and views) as React + Tailwind components under .moi/widgets/ and .moi/views/, then compile them with moi bundle.
  • Documents moi-specific APIs: .server.ts server functions, fileUrl() media streaming, focusTab() navigation, sendChatMessage() callbacks, and the params contract for views.
  • Covers env/secret hygiene (moi env, requiredEnv, never print values), theming (moi theme), UI components (moi ui-components), and debugging (moi debug logs, moi call-server-fn).

Who it's for

  • moi (molefrog/moi) users who want Claude Code to grow their personal dashboard.
  • Developers comfortable with Bun, React and Tailwind who like agent-authored UI.
  • Not useful at all if you don't run a moi workspace.

Examples

  1. "Add a CPU usage widget" → writes .moi/widgets/server-metrics.tsx + .server.ts, runs moi bundle, ends with moi tab focus widgets.
  2. "I need an orders screen" → claims id/title/icon via moi builder set, writes .moi/views/orders.tsx, opens detail via params.order.
  3. "Make the workspace look softer" → applies moi theme --color=... --radius=... and rebuilds with moi bundle --force.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/molefrog/moi/HEAD/workspace/.claude/skills/moi-workspace/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the workspace/.claude/skills/moi-workspace folder from the GitHub repo molefrog/moi into my ~/.claude/skills/moi-workspace/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/molefrog/moi.git /tmp/moi && cp -r /tmp/moi/workspace/.claude/skills/moi-workspace ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Prerequisites: install Bun and confirm the moi CLI is available with moi help.
  2. Recommended path: from your moi workspace run moi skill update — it installs/refreshes this skill for you.
  3. For a manual install, clone the repo: git clone https://github.com/molefrog/moi.git /tmp/moi
  4. Copy the skill folder: cp -r /tmp/moi/workspace/.claude/skills/moi-workspace ~/.claude/skills/
  5. Verify the references/ folder (DESIGN.md, UI-COMPONENTS.md, SCRATCHPAD.md) came along.
  6. Start Claude Code from the project root (the folder containing .moi/) and try "build me a widget".
  7. Whenever you upgrade the moi CLI, re-run moi skill update so the skill doesn't drift.
View source on GitHub ↗License: NOASSERTION