How do I handle a preview that isn't running?

The skill includes operations to check preview status, install missing dependencies, and start the development server automatically before attempting to highlight.

Can I highlight elements without using complex CSS selectors?

Absolutely. The skill supports advanced matchers such as 'text:', 'aria:', 'role:', and 'data-testid:' to find elements more intuitively.

What is the HookCode Preview Highlight skill used for?

It is used to programmatically control HookCode previews, allowing you to highlight specific elements, navigate URLs, and manage preview server states directly through Claude.

Can I add notes to the highlighted elements?

Yes, you can send 'bubble' payloads that display customizable tooltips next to the highlighted element, including specific text, placement, and themes.

Does it support elements inside cross-origin iframes?

Yes, by using the HookCode preview-bridge, this skill can securely communicate and send highlight commands to iframes across different origins.

HookCode Preview Highlighter

Name: HookCode Preview Highlighter
Author: hookvibe

byhookvibe

•

Browser Automation

Automates DOM element highlighting and navigation within HookCode previews for enhanced visual debugging and code reviews.

The HookCode Preview Highlight skill provides a comprehensive suite of tools for interacting with HookCode preview environments, enabling developers to programmatically highlight UI components using CSS selectors or advanced attribute matchers. It streamlines the debugging process by managing preview lifecycles, handling cross-origin iframe communication via a secure bridge, and supporting automated navigation to specific routes. With integrated support for customizable bubble tooltips and real-time status monitoring, it ensures that visual changes and UI bugs are easily identified and communicated during the development and review workflow.

Key Features

01Automated preview lifecycle management including start, stop, and dependency installation

02Customizable bubble tooltips for contextual feedback and UI annotations

03Smart auto-navigation with route pattern matching and navigation locking

04Advanced DOM highlighting using CSS, text, ARIA roles, and data attributes

053 GitHub stars

06Cross-origin iframe bridge integration for secure communication with preview instances

Use Cases

01Scripting complex preview interactions for end-to-end visual validation and walkthroughs

02Visualizing UI changes by highlighting specific components during automated code reviews

03Debugging cross-origin iframe integration and communication issues in web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hookvibe/hookcode hookcode-preview-highlight

For use in Claude.ai and ChatGPT

Download Skill