What problem does it solve? When developing the Hermes desktop app, inferring UI behavior from .tsx source files often leads to wrong conclusions about which CSS rule won, whether an element rendered, or what a computed value actually is. This Skill lets you read the live rendered DOM of the running app over the Chrome DevTools Protocol, answering factual questions about styles, geometry, selectors, and console output without disturbing the user's session. ## Core Features & Use Cases - Live DOM and computed style reading: Connect to the CDP port on 127.0.0.1:9222 and evaluate expressions against the real renderer to get computed styles, geometry, and element presence. - Winning-rule diagnosis: Determine which CSS rule actually applied to a node, including inherited values and plugin stylesheet overrides, before editing any call sites. - Isolated probe instances: Launch a separate Electron instance with its own HERMES_HOME, user-data-dir, and CDP port so you never kill or relaunch the user's running app. - Use Case: A style change "isn't applying" to assistant message links. Instead of editing every call site, you evaluate the real node, discover the font-weight is inherited from a @tailwindcss/typography rule, and override it on the shared class once. ## Quick Start Ask the agent to check the computed style of a specific element in the running Hermes desktop app, for example: "Check whether the composer element rendered and what the computed value of --radius-scalar is in the running desktop app."
