Grok Bot Gets a Menu-Bar Skin Tool: CDP CSS Injection Keeps the Official .app Intact

macOS Grok Bot users can now reskin the client without breaking code-signing checks, and the new sidebar usage meter pulls subscription data out of a hidden submenu so runaway tasks don't burn through a quota unnoticed.

Grok Bot's default black-and-white window is monotonous, and its subscription usage sits behind a secondary menu, which once let a runaway loop burn through the author's quota. The response is Grok Bot Skin, an open-source companion that runs entirely on the user's Mac. It launches Grok Bot with `--remote-debugging-port=19222`, finds the window via CDP, and injects a single `<style>` with compiled CSS that re-themes the window wallpaper and colors. Nothing in `/Applications/Grok Bot.app` is modified, so the app's code signature and `ElectronAsarIntegrity` checks stay intact and official updates won't wipe the skin.

Skins are folders with a `skin.json` and wallpaper; colors are tokens compiled into override CSS, and the wallpaper sits on the window's opaque `.sand-shell` layer while the chat area stays transparent. A menu bar extra, written in Swift as an `LSUIElement`, handles skin switching and the local Node CLI does the work. The sidebar reads existing internal interfaces like `getCursorUsageSummary` to show used-versus-remaining quota for the current period, all rendered locally.

Setup requires macOS 13+, Node 22+, Xcode Command Line Tools, and Grok Bot in `/Applications`. One curl command installs it. The tool binds its debug port and skin studio only to `127.0.0.1`, never reads the official data directory, and doesn't upload conversations, credentials, or usage data. It also supports exporting and importing skins as `.grokskin.zip` files.