highlight

Highlight matching DOM elements with a CSS outline and clear them.

7|2|Updated Feb 21, 2026
One-click install
npx skills add https://github.com/ivalsaraj/browserforce --skill highlight-ivalsaraj
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: highlight
Source: https://github.com/ivalsaraj/browserforce/tree/main/plugins/official/highlight
Command: npx skills add https://github.com/ivalsaraj/browserforce --skill highlight-ivalsaraj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visually identify which DOM elements match a given selector before interacting with them, reducing accidental clicks and selector mistakes during automation or debugging.

Core Features & Use Cases

  • Visual Outlining: Apply a colored CSS outline to all elements that match a selector to immediately see targets.
  • Safe Cleanup: Remove all outlines added during inspection to restore the page state.
  • Use Cases: Validate complex selectors during test automation, inspect interactive regions for accessibility checks, and debug UI scraping or form-filling flows.

Quick Start

Highlight all button.submit elements in blue, then clear the highlights when finished.

Frequently Asked Questions about highlight

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

FAQPage Schema
How do I highlight DOM elements matching a CSS selector for debugging?

To highlight DOM elements for debugging, you apply a colored CSS outline to all matching elements on a webpage. This visually marks targets to inspect selectors and reduce accidental clicks during automation.

Can I visually verify Playwright selectors before automating browser interactions?

Yes, you can visually verify Playwright selectors by applying colored outlines to matching page elements. This manual verification ensures your selectors target the correct interactive regions before executing automated scripts.

What is the best way to inspect page elements for accessibility checks?

Inspecting page elements for accessibility checks involves applying visual outlines to matching DOM nodes. This allows you to manually verify interactive regions and validate that your selectors map to the correct UI components.

How do I remove visual debugging outlines after inspecting webpage selectors?

To remove visual debugging outlines after inspecting webpage selectors, you use a complementary clear function. This safe cleanup action removes all applied outlines and restores the original page state.

Does this element highlighting tool work within a standard browser page context?

Yes, this element highlighting tool operates within a standard browser page context with DOM access. It accepts a selector string and optional CSS color to apply visual outlines directly on the active webpage.

Why should I visually highlight elements before interacting with them during web scraping?

Visually highlighting elements before interacting with them during web scraping reduces accidental clicks and selector mistakes. It provides immediate visual confirmation that your target selectors match the intended data fields.