HTML Mark — click-to-annotate overlay

Demo

Activate — a dark glass pill in the top-right corner. Click it or press M, then click anywhere on the page to start dropping pins.

!Empty state — toggle ON, annotation panel ready

Annotate — every click drops a coral-gradient pin and opens an inline note popup. Press Enter to save, and the pin gains a small coral dot indicating "has note." Notes accumulate in the side panel; "Copy all" exports them as Markdown / Plain / JSON.

!Pinning in action — two pins with notes, popup open for #2

The copied output (Markdown) you'd paste into Notion / Linear / Lark:

**1.** change the color to red
   <sub>#header_logo · `#header_logo`</sub>

**2.** add more picture
   <sub>[data-mm-label] · `[data-mm-label]`</sub>

When to invoke

Trigger this skill when:

The user wants to add review-style annotation capability to an HTML prototype (design mockup, Figma export, static page).
The user is preparing to do design review: click → write feedback → copy → paste to PM / designer / engineer.
The user wants a bookmarklet they can run on any web page to pin-annotate it.

Trigger keywords (both English and 中文 should fire):

English: "add html-mark", "add mark mode", "add annotation pins", "click annotate", "let me mark up this HTML for review", "generate a mark-mode bookmarklet"
中文: "加 html-mark"、"加 mark mode"、"评审打点"、"标注模式"、"打点功能"、"给这个 HTML 加上标注"

What this skill provides

A single-file self-contained runtime (html-mark.js). After injection it gives the page:

A dark glass toggle pill in the top-right (● Mark / ● Marking). OFF = gray dot; ON = glowing coral-gradient dot + honey text.
When ON, the cursor becomes a crosshair. Clicking any element drops a 22px coral-gradient orb (#ff8d6b → #ffaf7a → #ffc890) with a scale-bounce entry animation.
An inline glass note popup pops open next to the pin — type "what should change here," press Enter to save, Esc / click outside to cancel-or-autosave. This is the core review connection point.
A glass Annotations panel floats bottom-right — draggable, collapsible to a single-row badge. Lists every pin's note + element label.
Hover a panel item → corresponding pin scales up, target element gets a coral outline (visual cross-reference).
Clicking a panel item or the pin itself re-opens the note popup for editing.
"Copy all" supports three formats — note is the body, element description goes to a sub-line of meta:

```markdown

1. This copy needs to be shorter — 8 chars max

_{Button · "Get Started Free" · button.btn-primary}

```

Keyboard: M toggle, Esc exit / close popup, Backspace delete last pin, Enter save note, Shift+Enter newline.
A pin with a saved note wears a coral light-dot on its top-right corner.
Panel: − collapses, Clear empties all, × (on hover) removes one item.
Panel list items with notes have a vertical coral gradient bar on the left as a visual anchor.

Visual style: dark glass toggle + translucent white glass panels + coral → peach → honey warm gradient accent. Glassmorphism aesthetic — prominent without competing with the target page (especially well-suited to brand sites, premium designs, light / warm-tone palettes).

Usage scenarios

Scenario A — single HTML prototype file (most common)

Default action: inline the runtime as a and insert before . Do not trim anything — the script is fully self-contained (CSS is inlined, DOM is self-injected, all class names use the .mm-* prefix for isolation).

Scenario B — multi-page project with a JS asset pipeline

Copy html-mark.js to project root or assets folder, then in each HTML:

<script src="./html-mark.js"></script>

It auto-initializes on load.

Scenario C — any URL, no source access (bookmarklet)

If the user says "I want to mark up a live web page / a competitor site," generate a base64 self-contained bookmarklet:

echo "javascript:$(python3 -c "
import urllib.parse
js = open('$HOME/.claude/skills/html-mark/html-mark.js').read()
print(urllib.parse.quote(js, safe=''))
")"

Alternatively, host on GitHub Pages / gist / Vercel and use the short-reference variant:

javascript:(function(){if(window.__markModeLoaded)return;var s=document.createElement('script');s.src='https://YOUR_HOST/html-mark.js';document.head.appendChild(s);})();

Optional: custom pin labels

If the target HTML has semantically opaque elements (a

representing a card without an id or meaningful class), add data-mm-label="My Section" and the pin will use that verbatim. The runtime already supports this — no need to change the script.
What NOT to do
❌ Don't rewrite the script — it's been tuned in html-mark.js, use as-is.
❌ Don't split the CSS out — the script injects its own

HTML Mark

概述