What problem does it solve? When developing the Hermes desktop app, inferring rendered UI behavior from .tsx source files leads to wrong guesses about which CSS rule won, whether an element rendered, or what a computed value actually is. This Skill reads the live rendered DOM of the running Electron window over CDP so you answer factual UI questions directly instead of editing call sites blindly. ## Core Features & Use Cases - Live DOM and computed style reading: Connect to the dev server's CDP port on 127.0.0.1:9222 and evaluate expressions against the real renderer to get computed styles, geometry, and class inheritance. - Winning-rule diagnosis: Determine which CSS rule actually applied to a node, including inherited values and plugin stylesheet overrides, before changing any code. - Stable selector hooks: Use the shared SELECTORS data-slot map in scripts/perf/lib/cdp.mjs instead of inventing fragile querySelector strings. - 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 style change is not applying to assistant message links. Evaluate the real node, discover the font-weight is inherited from a typography plugin rule, and override the shared class instead of sweeping every call site. ## Quick Start Ask the agent to check the computed style of an element in the running Hermes desktop app, for example: read the computed padding of the composer input in the live desktop window over CDP.
