skills.rest
icyzh
icyzhCOMMUNITY
Explore all skills by this author →
Website𝕏@icyzhbeGitHub

inspecting-hermes-desktop-dom

Inspect live DOM nodes and computed styles via Chrome DevTools Protocol.

1|Updated Jul 31, 2026
Search Tags:#debugging#electron#cdp#dom#ui-verification#hermes
One-click install
npx skills add https://github.com/icyzh/hermes-web --skill inspecting-hermes-desktop-dom-icyzh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inspecting-hermes-desktop-dom
Source: https://github.com/icyzh/hermes-web/tree/main/skills/software-development/inspecting-hermes-desktop-dom
Command: npx skills add https://github.com/icyzh/hermes-web --skill inspecting-hermes-desktop-dom-icyzh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill resolves UI debugging ambiguity by allowing you to inspect the live rendered DOM, computed styles, and geometry of the Hermes desktop application, preventing guesswork during development.

Core Features & Use Cases

  • Live DOM Inspection: Query the actual rendered state of the application to verify CSS rules, element visibility, and computed styles.
  • Stable Selector Verification: Identify and validate data-slot hooks to ensure UI components are correctly targeted.
  • Use Case: When a CSS style is not applying as expected, use this skill to determine which specific rule is winning and whether the property is being inherited from an ancestor.

Quick Start

Use the inspecting-hermes-desktop-dom skill to evaluate the computed font weight of the assistant message root element.

Frequently Asked Questions about inspecting-hermes-desktop-dom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect the live DOM of an Electron application using CDP?▼

To inspect the live DOM of an Electron application using CDP, you need a running development instance with an active CDP port, allowing programmatic access to query rendered nodes and computed styles in real-time.

What is the best way to debug why a CSS style is not applying in a Hermes desktop UI?▼

Debugging CSS style application in a Hermes desktop UI involves querying the live rendered DOM via CDP to determine which specific rule is winning and whether the property is being inherited from an ancestor.

Can I verify element visibility and computed styles in real-time during UI debugging?▼

Yes, you can verify element visibility and computed styles in real-time by using CDP to programmatically access the Hermes desktop renderer and query the actual rendered state of the application.

Do I need a running Hermes desktop development instance to use CDP for UI verification?▼

Yes, you need a running Hermes desktop development instance with an active CDP port to facilitate UI verification and debug live DOM nodes and computed styles programmatically.

How do I validate stable selectors for UI components during Hermes development?▼

To validate stable selectors for UI components during Hermes development, use CDP to identify and validate data-slot hooks, ensuring that UI components are correctly targeted for inspection.

Related Skills

Explore More Software Engineering Skills→
cxnaivecxnaive

inspecting-hermes-desktop-dom

Inspect the live Chromium DOM and computed styles of the Hermes desktop application via CDP.

Community
Advanced
AradotsoAradotso
3

web-to-figma-chrome-extension

Convert webpage DOM layouts, computed styles, and assets into Figma-compatible JSON.

Official
Intermediate
AskTinNguyenAskTinNguyen

electron-cdp-testing

Connect to a live Electron renderer via CDP to verify preload bridge and capture UI evidence.

Community
Advanced
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced