Pixel Office Skill

Launch and manage the Pixel Office web UI where agents appear as animated pixel-art characters that walk, sit, and interact with furniture in real time.

Activation

Activate when user says:

• - "打开像素办公室"
• "open pixel office"
• "像素办公室"
• "pixel office"

What This Skill Does

1. 1. Detects the operating system (macOS/Windows)
2. Checks if git is installed
3. Downloads/clones the OpenClaw Dashboard project if not already present
4. Installs dependencies (npm install)
5. Starts the development server in background
6. Returns the access URL to the user

Installation Directory

• - macOS/Linux: INLINECODE0
• Windows: INLINECODE1

Prerequisites

• - Node.js 18+ must be installed
• OpenClaw config at ~/.openclaw/openclaw.json (or %USERPROFILE%\.openclaw\openclaw.json on Windows)

Workflow

Step 1: Check if already running and stop it

CODEBLOCK0

If already running:

• - Stop the service first (ensure clean restart)

macOS/Linux:
CODEBLOCK1

Windows (PowerShell):
CODEBLOCK2

Windows (cmd):
CODEBLOCK3

Then proceed to Step 1.5.

Step 1.5: Check for updates (if project exists)

If project exists, check if there's a newer version:

If git is available:

CODEBLOCK4

If update available:

• - Inform user: "检测到新版本，正在更新..."
• Pull latest code: INLINECODE4
• Reinstall dependencies: INLINECODE5
• Continue to Step 5 (start service)

If up to date:

• - Continue to Step 5 (start service)

If git is NOT available:

• - Inform user: "检测到项目无 git 管理，正在重新下载最新版本..."
• Remove old project directory:

  # macOS/Linux
  rm -rf ~/projects/OpenClaw-bot-review
  
  # Windows (PowerShell)
  Remove-Item -Recurse -Force "$env:USERPROFILE\projects\OpenClaw-bot-review"
  

• - Go to Step 3 (download project via ZIP)

Step 2: Check if project exists

CODEBLOCK6

If exists, skip to Step 4.

Step 3: Download project

Option A: With git (preferred)

CODEBLOCK7

Option B: Without git (fallback)

macOS/Linux:
CODEBLOCK8

Windows (PowerShell):
CODEBLOCK9

Windows (cmd with curl - Windows 10+):
CODEBLOCK10

Step 4: Install dependencies (if needed)

Check if node_modules exists. If not:

CODEBLOCK11

Step 5: Start the server

macOS/Linux:
CODEBLOCK12

Windows (PowerShell):
CODEBLOCK13

Windows (cmd):
CODEBLOCK14

Step 6: Wait for server to be ready

Poll http://localhost:3000 until it responds (max 30 seconds).

CODEBLOCK15

Step 7: Return access URLs (required)

You MUST return both:

• - Local URL
• LAN URL

First, actually detect the machine's LAN IPv4 address. Do not guess it.

macOS/Linux:
CODEBLOCK16

Windows (PowerShell):
CODEBLOCK17

Rules:

• - You MUST execute an IP detection command before composing the final reply.
• Do NOT guess or fabricate the LAN IP.
• Do NOT omit the LAN URL just because localhost works.
• You MUST include both the local URL and the LAN URL in the final reply.
• If LAN IP detection fails, you MUST still include the local URL and explicitly say:

• - Do NOT end with only a localhost URL.

Return message format:
CODEBLOCK18

If LAN IP detection fails, use:
CODEBLOCK19

Stopping the Server

When user asks to stop:

macOS/Linux:
CODEBLOCK20

Windows (PowerShell):
CODEBLOCK21

Windows (cmd):
CODEBLOCK22

Error Handling

• - Node.js not found: Tell user to install Node.js 18+ from https://nodejs.org/
• Port 3000 already in use: Check if it's the dashboard (return URL) or another service (suggest using a different port with PORT=3001 npm run dev)
• OpenClaw config not found: Warn that dashboard may not work properly without INLINECODE9
• Download failed: Suggest checking internet connection or manually downloading from GitHub
• npm install failed: Suggest running npm cache clean --force and retrying

Notes

• - The server runs in background and persists until stopped or system reboot
• Dashboard reads config directly from ~/.openclaw/openclaw.json - no database needed
• Supports auto-refresh, dark/light theme, i18n (Chinese/English)
• Includes pixel-art office animation for fun visualization

Platform Detection

CODEBLOCK23

Git Detection

CODEBLOCK24

Detection logic:

1. 1. Run git --version at the beginning
2. Store result (available/not available)
3. Use this result throughout the workflow

If git not available:

• - Always use ZIP download method
• Always force re-download when project exists (to get latest version)
• Clean up old directory before downloading

Implementation Tips

1. 1. Always stop old service first - ensures clean restart with latest code
2. Check git availability at the start - determines update strategy
3. With git: Check for updates and pull if needed
4. Without git: Force re-download ZIP to ensure latest version
5. No user confirmation needed - auto-update and restart for best UX
6. Use background process management to avoid blocking
7. Provide clear feedback at each step ("已停止旧服务", "检测到新版本，正在更新...", "正在重新下载最新版本...")
8. Handle both PowerShell and cmd on Windows
9. Clean up temporary files (zip archives)
10. Log errors for debugging but keep user messages simple
11. Always ensure latest code - either via git pull or re-download