What problem does it solve? When developing the Hermes desktop app, inferring UI behavior from .tsx source files often leads to wrong conclusions about what actually rendered. This Skill lets you read the live DOM of the running Electron window — computed styles, geometry, winning CSS rules, and console output — so you verify facts instead of guessing. ## Core Features & Use Cases - Live DOM inspection via CDP: Connect to the dev server's Chrome DevTools Protocol port on 127.0.0.1:9222 and evaluate JavaScript against the real rendered page. - Winning-rule diagnosis: Determine which CSS rule actually applied to an element, including inherited values and plugin stylesheet overrides, before editing call sites. - Isolated probe instances: Launch a separate Electron instance with its own HERMES_HOME, user-data-dir, and CDP port so the user's running app is never disturbed. - Use Case: A style change "isn't applying" to assistant message links. Use the shared CDP client to read the node's computed font-weight and ancestor classes, discover that @tailwindcss/typography's prose rule beats the utility class, and override the shared class instead of sweeping every usage. ## Quick Start Ask the agent to check the CDP port and evaluate a small JSON projection against the running Hermes desktop window, such as reading a design token's computed value on a real node.
