moi Workspace (widget & view builder)

Teaches the agent how to build, verify, and theme applets (widgets and views) inside the moi web workspace.

Dev & CodingAdvanced★ 183⑂ 13AI score 8/10Last updated: Oct 9, 2026

What it does

moi is a web workspace where a plain chat evolves into a personal app. This skill is the operating manual that lets Claude extend that UI itself.

Conventions for writing React + Tailwind applets in .moi/widgets/ and .moi/views/ (grid colSpan/rowSpan, view title/icon, _-prefixed shared modules)
How to write .server.ts server functions, where process.env is readable, and strict no-hardcoded-secret rules
A tight verification loop: moi check → moi bundle → exercise in the browser → moi debug logs, then hand off with moi navigate
CLI patterns for moi theme, moi config, moi env exec, moi ui-components, moi views create
Hard boundaries: never touch internal files like .workspace.json or .scratchpad.json, never manage the web server

Who it's for

Anyone already running a moi workspace with the moi CLI installed
People who want the agent to build dashboard widgets or dedicated task screens for them
Developers comfortable with Bun + React + Tailwind who want the agent to build and self-verify UI

Example uses

"Put a weekly revenue chart on the Overview" → creates .moi/widgets/revenue.tsx, sets colSpan, runs moi bundle --only widgets/revenue, then moi navigate 'moi:/overview'
"Make a filterable customer list view" → moi views create --requirements ..., keeps filter state in query params, finishes with a moi:/views/<id> link
"Wire up a weather API" → runs moi env to check for the key, tells you the exact key name if missing, declares it in config.requiredEnv, and calls it safely from forecast.server.ts

· · · 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)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
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 && mkdir -p ~/.claude/skills && cp -r /tmp/moi/workspace/.claude/skills/moi-workspace ~/.claude/skills/

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

Make sure Bun and the moi CLI are installed first. Normally this skill ships with moi and is installed by the CLI or UI.
To install manually, clone the repo: git clone https://github.com/molefrog/moi.git /tmp/moi
Copy the skill folder: mkdir -p ~/.claude/skills && cp -r /tmp/moi/workspace/.claude/skills/moi-workspace ~/.claude/skills/
Confirm the references/ docs (DESIGN.md, INTENTS.md, UI-COMPONENTS.md, SCRATCHPAD.md) came along with it.
Start Claude Code from your project root — the folder that contains .moi/ — and run moi --help to confirm the CLI resolves.
Try a prompt like "add a widget to the Overview" to confirm the skill triggers, then run moi skill update occasionally to keep it in sync with the CLI.

View source on GitHub ↗License: NOASSERTION