Openclaw Skills for WorkBuddy Dream Skin turns prompts or reference images into custom WorkBuddy themes, previews them, and safely patches the Electron app for a real interface transformation.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install workbuddy-new
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install workbuddy-new using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is WorkBuddy Dream Skin?
Openclaw Skills for WorkBuddy Dream Skin is a deep theming workflow for WorkBuddy, a VS Code-based Electron app, that generates visual skins from a prompt or reference image and applies them through the app’s real semantic classes instead of brittle generic variables.
Because runtime injection is blocked, this skill uses the only reliable path available: it patches the installed app.asar with the smallest possible CSS change, automatically creates app.asar.bak, and keeps a clean restore path. It supports character, scene, mood, art style, reference-image, and light/dark styling so you can move from idea to applied skin with minimal manual effort.
WorkBuddy Dream Skin Use Cases
- When a user asks to change the appearance, theme, skin, or overall vibe of WorkBuddy.
- When a prompt includes a character, movie scene, game scene, or a named visual reference that should drive the UI look.
- When a user provides a reference image and wants the palette, mood, or background translated into a WorkBuddy skin.
- When you need a preview-first workflow before applying a patch to the installed app.
- When you want reusable theme packs such as
theme.json+workbuddy.css+ assets for future applications. - When a user wants custom overlays like a skin signature, label, or watermark text.
- When you need a local-only theming flow with backup and one-step rollback.
How WorkBuddy Dream Skin Works
- First, parse the request into intent dimensions: character, scene, mood, art style, reference image, and light/dark preference.
- Generate a skin candidate with
generate-skin.js, or select an existing theme pack underskins/<id>/if the request maps to a known package. - If a reference image exists, extract palette cues and use that image as the hero/background source; if not, synthesize colors from the prompt and optional accent/mode settings.
- Convert the theme pack into self-contained static CSS with
gen-static-css.js, including inlined hero assets when needed. - Render a preview with
make-preview.jsso the user can inspect the result in an isolated HTML file before any real app modification. - Apply the skin by patching the installed
app.asarwithasar-patch.jsorapply.js; the workflow backs upapp.asarautomatically, injects only the CSS block, and restarts WorkBuddy so the new skin becomes visible. - If the result is not desired, restore the original app instantly by copying
app.asar.bakback into place.
WorkBuddy Dream Skin Setup
- Place the skill directory in the WorkBuddy skills location, for example
~/.workbuddy/skills/workbuddy-dream-skin/. - Make sure Node 22.x is available to the skill scripts.
- Keep reference images local and prefer PNG input when you want the reference image to drive the skin result.
- Run generation, preview, and apply from the skill directory.
export SKILL=$HOME/.workbuddy/skills/workbuddy-dream-skin
node $SKILL/scripts/generate-skin.js --desc 'create a moody purple city skin' --name my-skin
node $SKILL/scripts/make-preview.js --skin $SKILL/skins/my-skin/workbuddy.css --hero $SKILL/assets/my-skin_scene.png --name 'My Skin' --out $SKILL/preview-my-skin.html
node $SKILL/scripts/apply.js
- For reference-image-driven skins, pass
--reftogenerate-skin.jsand preview the generated CSS before applying.
node $SKILL/scripts/generate-skin.js --desc 'use this image as the style reference' --name ref-skin --ref $SKILL/assets/ref.png
node $SKILL/scripts/gen-static-css.js --theme-dir $SKILL/skins/ref-skin --out $TMPDIR/workbuddy.static.css
node $SKILL/scripts/asar-patch.js --theme-dir $SKILL/skins/ref-skin --marker ref-skin
- To restore the original app, copy
app.asar.bakback overapp.asarand restart WorkBuddy.
cp $WORKBUDDY/resources/app.asar.bak $WORKBUDDY/resources/app.asar
- On Windows, keep the same structure and replace
$HOMEwith%USERPROFILE%in your local setup notes.
WorkBuddy Dream Skin Data Schema & Taxonomy
Theme pack layout
| Artifact | Location | Purpose |
|---|---|---|
theme.json |
skins/<id>/theme.json |
Metadata for the theme pack, including id, display name, target app mapping, image references, and verification contexts. |
workbuddy.css |
skins/<id>/workbuddy.css |
The actual skin stylesheet that targets semantic WorkBuddy classes such as .wb-home-header, .chat-container, and .conversation-sidebar. |
assets/ |
skins/<id>/assets/ |
Local-only PNG assets for heroes, scenes, or reference-derived imagery. |
preview-*.html |
Skill output root or temp path | Self-contained HTML preview for review before application. |
workbuddy.static.css |
Temp output | Self-contained CSS generated for patching into app.asar. |
_patched.asar |
Temp output | Modified archive produced by the minimal patch workflow. |
app.asar.bak |
WorkBuddy resources directory | Automatic backup used for rollback and recovery. |
applied-asar-log.txt |
Skill directory | Application log for patch status and restart coordination. |
Metadata taxonomy
- Request intent: character, scene, mood, art style, reference, light/dark.
- Output mode: generated skin, selected theme pack, preview-only, applied patch, restore.
- Visual controls:
--accent,--mode,--text,--text-pos,--text-color,--text-size. - Verification mapping:
targets.workbuddy.verification.contextsdefines the UI landmark nodes that should be checked after application. - Asset policy: local filesystem assets only, with PNG preferred for reference-driven extraction and JPG gracefully downgraded to background-only styling.
File organization rules
- Theme packs follow the CodeDrobe-style bundle shape:
theme.json+workbuddy.css+assets/. generate-skin.jsproduces the theme CSS;make-preview.jsproduces isolated previews;gen-static-css.jsmakes the patchable CSS payload.asar-patch.jstargets the largestrenderer/assets/index-*.cssfile and injects only the skin block so native and unpacked files remain untouched.
WorkBuddy Dream Skin Advanced Features
- Semantic-class theming that overrides the real WorkBuddy UI structure instead of generic
--vscode-*variables. - Reference-image-driven skin generation with automatic palette extraction and hero background reuse.
- Self-contained HTML previews that embed assets as base64 for safe review before application.
- Minimal-byte
app.asarpatching that keeps the rest of the archive and unpacked files unchanged. - Automatic
app.asar.bakcreation plus one-step restore for fast rollback. - Support for custom signature text, watermark text, position, color, and size.
- Existing theme packs such as
theme-starterandkungfu-soccerfor reuse and rapid iteration. - Local-only processing with no CDP, no V8 inspector dependency, and no external image hosting.
- Automatic restart coordination when the skill is invoked from a WorkBuddy subprocess.
- Openclaw Skills-friendly workflow design for deterministic, preview-first UI customization.
SKILL.md
Loading
Related Openclaw Skills
FN2 Market Research & Agents
An AI research integration that performs grounded market analysis and runs automated, scheduled research agents.
Markdown Lint Fixer
An Openclaw Skills tool that diagnoses Markdown lint problems and returns a ready-to-run fix command plus cleaner docs.
Customs — AD/CVD & Tariff Exposure Cascade
An Openclaw Skills decision cascade that screens customs entries for AD/CVD, Section 301, and transshipment exposure before costly tariff surprises hit.
Customs — Duty Optimization (Opportunity Cost)
Flags recurring customs duty spend and quantifies the savings you may be leaving on the table through drawback, FTZ, first-sale, bonded warehouse, and FTA programs.
Huawei Cloud KooCLI Guidance
A terminal-first Huawei Cloud KooCLI skill that helps you install, authenticate, query help, build commands, and troubleshoot cloud operations safely.
Gaosi Guide Summer Review Planner
Openclaw Skills turns Gaosi Guide summer review into a structured, printable, knowledge-tree-based 8-week plan with daily check-ins and PDF export.
Featured*
