Skills
.Work. You
Rest

hookcode-preview-highlight

Official

Orchestrate HookCode previews with live highlights.

Software Engineering#preview#gemini#tooltips#DOM#highlight#hookcode#css-selectors
Authorhookvibe
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill enables Gemini to control the HookCode preview system by checking status, starting and stopping previews, and sending highlight commands with bubble tooltips via authenticated APIs.

Core Features & Use Cases

  • Status checks to determine if a preview is running.
  • Start/stop preview instances and manage lifecycle.
  • Highlight elements using CSS selectors or text/attribute matchers.
  • Bubble tooltips to explain highlights near target elements.
  • Auto-navigation to a specified target URL during a preview session.

Quick Start

Check status with the status script:

  • node .gemini/skills/hookcode-preview-highlight/scripts/preview_status.mjs --task-group <id>

Start a preview:

  • node .gemini/skills/hookcode-preview-highlight/scripts/preview_start.mjs --task-group <id>

Highlight and show a tooltip:

  • node .gemini/skills/hookcode-preview-highlight/scripts/preview_highlight.mjs --task-group <id> --instance app --selector ".btn-primary" --bubble-text "This button triggers the submission"

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: hookcode-preview-highlight
Download link: https://github.com/hookvibe/hookcode/archive/main.zip#hookcode-preview-highlight

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.