CodeDrobe Skills
A skill that re-themes desktop AI apps such as Codex and WorkBuddy from a reference image and can restore the original look
- 251 ★ on the repository
- Last commit
- Apache-2.0
Broad access
Why this level
- Applying a theme may require launching the app with a CDP debugging port and injects CSS into the app window
- Restarting a running app is possible, and the skill must ask permission first
- Publishing a theme sends files outside after signing in to an account
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/codedrobe-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewBroad accessThe tool can change data, run commands or handle secrets.
- Applying a theme may require launching the app with a CDP debugging port and injects CSS into the app window
- Restarting a running app is possible, and the skill must ask permission first
- Publishing a theme sends files outside after signing in to an account
This is third-party code. Review the repository files before installing.
What it does
The repository holds two skills, and users need codedrobe-theme. It takes a reference image and turns it into a reversible theme for Codex, WorkBuddy, QoderWork or TRAE SOLO. The skill does not paste a screenshot over the window: it captures a snapshot of the live app DOM through a debugging port and writes CSS for the real interface nodes. The work is done by the @codedrobe/core command-line tool, and the skill walks the agent through the steps: inspect the theme package, probe compatibility, apply, take a screenshot and compare the home screen with an ordinary conversation. When an app update breaks a theme, the skill repairs it from a fresh DOM snapshot. The codedrobe restore command brings back the original look. Themes live in .codedrobe-theme files and can be searched and installed from the store at codedrobe.app. Publishing to the store requires sign-in and a separate confirmation. The second skill, codedrobe-adapter-dev, is for people adding support for a new app to Core.
Who it is for. For Codex and WorkBuddy users who want their own color scheme and background, and for theme authors who need a verifiable path from reference to publication.
Good fit when
- You have an image with the style you like and want a Codex skin that keeps the native controls
- One theme has to be built for Codex and WorkBuddy at once, with shared images and separate CSS per app
- A theme broke after an app update and the selectors need redrawing from a new DOM snapshot
- A ready .codedrobe-theme file has to be inspected, probed and applied without recreating the theme
- A store theme has to be found by name and installed: search, integrity-checked download, then apply
Not a fit when
- The app is not Codex, WorkBuddy, QoderWork or TRAE SOLO: support for new apps comes through adapters in Core
- You need a theme for an ordinary website or code editor: the skill targets Chromium and Electron apps with a debugging port
- You cannot launch the app with CDP enabled or restart it: applying a theme may need either
- You want to change the app's own files: the skill forbids patching app.asar and application bundles
Example request
Take this image, build a Codex theme from it that keeps the native interface and check both the home screen and a conversationLimitations
- The work goes through the @codedrobe/core utility, which you install separately with npm install --global @codedrobe/core. The skill contains instructions only.
- Applying a theme may require launching the app with CDP enabled. The skill restarts an already running app only with your explicit permission.
- CSS templates are not a permanent contract: after an app update the selectors have to be captured again.
- Publishing to the store requires signing in with codedrobe auth login.
- The project is independent and not endorsed by OpenAI or Tencent.
How to disable. Restore the original look with codedrobe restore --app codex, substituting the app you themed, then check that no trace of the theme is left. The skill itself is removed from your agent's skills folder, and npm uninstall --global @codedrobe/core removes the utility.
FAQ
How do I install the skill for Codex themes?
Run npx skills add CodeDrobe/skills --skill codedrobe-theme --global --agent codex --yes. The --agent flag selects the agent that receives the skill, and the app to theme is named later with --app codex or --app workbuddy. npx skills add CodeDrobe/skills --list shows all available skills.
Which apps can be themed?
The skill description names OpenAI Codex, Tencent WorkBuddy, QoderWork in its Chinese and global builds and TRAE SOLO in the same two builds. codedrobe apps lists what your installation supports.
Does the skill paste a screenshot over the window?
No. It captures the DOM of the live window through CDP, picks nodes from that snapshot and writes CSS for the real interface. The reference image is only an art direction guide.
How do I remove a theme and go back to the original look?
Run codedrobe restore --app with the app name. For Codex the skill also confirms that the base-theme backup was restored, when one existed.
Do I need an account for the theme store?
Searching and installing a theme by name mentions no account. Publishing needs sign-in with codedrobe auth login and a confirmation, and the --submit flag is added only after separate consent.
Discussion
No questions or reviews yet.
Related
SkillsA skill that makes Codex reskin itself: from one image it generates a theme and applies it to the Codex app on Windows and macOS.
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A prompt-as-code design system for Codex, Cursor and Claude Code: style catalogs, layouts, blocks and personal UI rules.
A skill and CLI that turn a screenshot or a written idea into an editable interface, with code and separate image assets.
README in short
The README explains that the repository holds two skills while the behavior lives in @codedrobe/core. It then gives the install command, example requests to an agent, the utility install and a list of authoring resources: a theme starter and finished examples. The page closes with links to related repositories and a trademark notice.
README badge
Original SKILL.md
--- name: codedrobe-theme description: Create, inspect, convert, apply, replace, verify, troubleshoot, update, publish, or restore reversible CodeDrobe themes for supported Chromium/Electron AI desktop apps, including OpenAI Codex, Tencent WorkBuddy, QoderWork (CN/global), and TRAE SOLO (global/CN). Use when a user asks to turn an attached or local reference image into a Codex, WorkBuddy, QoderWork, or TRAE SOLO skin, reproduce a visual style with native UI, build a multi-app theme, work with .codedrobe-theme packages or theme images, analyze a live CDP DOM snapshot, repair DOM compatibility failures, use a custom port or installation path, capture verification screenshots, search the CodeDrobe store or install a store theme by name, publish or submit a theme to the CodeDrobe store, or migrate a legacy .codex-theme file. --- # CodeDrobe Theme Use the published `@codedrobe/core` CLI as the only runtime. Keep this Skill instruction-only: do not recreate injectors, launch scripts, package parsers, or application patchers inside the Skill. ## Route the request 1. Identify the target app explicitly. Run `codedrobe apps --json` when support or defaults are uncertain. 2. Read [references/cli.md](references/cli.md) before choosing an installed, npm, or Bun command runner. 3. Read only the target-specific reference: - Codex: [references/codex.md](references/codex.md) - WorkBuddy: [references/workbuddy.md](references/workbuddy.md) - QoderWork: [references/qoderwork.md](references/qoderwork.md) - TRAE SOLO: [references/traework.md](references/traework.md) 4. For theme creation, images, CSS, packaging, or legacy conversion, read [references/theme-authoring.md](references/theme-authoring.md). 5. When the request includes an attached or local visual reference, read [references/reference-image.md](references/reference-image.md). 6. For new or repaired CSS, read [references/dom-snapshot.md](references/dom-snapshot.md) and [references/css-templates.md](references/css-templates.md). 7. For the complete Miku Future Beats / 初音未来 example, read [references/miku-future-beats-example.md](references/miku-future-beats-example.md). 8. For probe, verification, screenshots, missing nodes, CDP failures, or app updates, read [references/verification.md](references/verification.md). 9. To publish or submit a theme to the CodeDrobe store, read [references/publish.md](references/publish.md). ## Interpret common requests - “参考这张图片,帮我生成一个 Codex 皮肤”:inspect the supplied image, create a Codex target from a live Codex DOM snapshot, package it, and verify the native UI in Codex. - “把这个视觉风格同时做成 Codex 和 WorkBuddy 皮肤”:create one theme package with separate target CSS and shared named image assets. - “用玩偶姐姐示例改成蓝色版本”:copy the bundled example to a writable project, change its tokens/assets, refresh live selectors, and verify both requested contexts. - “这个主题更新应用后错位了”:capture fresh snapshots, repair theme CSS and theme-specific verification nodes, then repack and compare screenshots. - “帮我安装这个 `.codedrobe-theme`”:inspect, probe, apply, and verify the supplied package; do not recreate it unless validation fails and the user asks for repair. - “从商店装一个复古主题到 Codex”:`codedrobe theme search` to resolve the slug (confirm the pick when several match), `codedrobe theme download` (integrity-verified, lands in `~/.codedrobe/themes`), then the normal inspect → probe → apply → verify flow. - “把这个主题发布到 CodeDrobe 商店”:complete the `theme.catalog` listing metadata, pack, confirm with the user, then `codedrobe theme publish` (and `--submit` only with separate confirmation). Treat the named target app as explicit. If no target is named and it cannot be inferred from the supplied package or current task, ask one concise question before launching or applying anything. ## Apply an existing theme 1. Inspect the package before applying it. 2. Detect the application and resolve any user-provided installation path or CDP port. 3. Probe the live renderer with the selected theme. Compatibility is judged per window: a window missing required adapter or theme nodes is skipped, and the apply fails only when no window qualifies. A probe run while the app is still on its loading screen reports every landmark missing — wait for the root landmark before treating that as incompatibility. 4. Apply the theme. Never add `--restart-existing` unless the user authorized closing and restarting the running application. 5. Verify the installed theme and capture an absolute-path screenshot when visual confirmation matters. 6. Inspect both the home screen and a normal conversation when the theme styles both contexts. Use these command shapes after selecting the runner described in `references/cli.md`: ```bash codedrobe theme inspect /absolute/theme.codedrobe-theme