What problem does it solve? When developing the Hermes desktop app, guessing why a style did not apply or whether a UI change actually rendered leads to wasted edits. This Skill reads the live rendered DOM of the running Electron window — computed styles, winning CSS rules, geometry, and console output — so you answer factual UI questions with real data instead of inference. ## Core Features & Use Cases - Live DOM inspection via CDP: Connect to the dev server's Chrome DevTools Protocol port (127.0.0.1:9222) and evaluate expressions against the real renderer using apps/desktop/scripts/eval.mjs or the shared CDP client. - Winning-rule diagnosis: Determine which CSS rule actually won on a node, including inherited values and plugin stylesheet overrides (e.g. @tailwindcss/typography), before editing any call sites. - Stable selector hooks: Use the maintained SELECTORS map of data-slot attributes instead of inventing fragile query selectors. - Isolated probe instances: Launch a separate Electron instance with its own HERMES_HOME, --user-data-dir, and CDP port so you never disturb the user's running session. - Use Case: A user reports a link inside an assistant message has the wrong font weight. Connect over CDP, read the node's computed style and ancestor classes, discover the value is inherited from a prose a rule, and fix the shared class instead of sweeping every call site. ## Quick Start Ask the agent to check whether the Hermes desktop dev server exposes its CDP port and then read the computed style of a specific element in the running app.
