diff --git a/skills/html-diagram/SKILL.md b/skills/html-diagram/SKILL.md
index e21ecc2..019cec3 100644
--- a/skills/html-diagram/SKILL.md
+++ b/skills/html-diagram/SKILL.md
@@ -21,3 +21,7 @@ If it makes sense, make the diagram interactive and able to visualize and animat
Also review `references/architecture-example.html` — a finished example of this skill done well (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths).
Always include dark mode: hand-rolled CSS variables on `:root` / `html.dark`, a small theme toggle button, `localStorage` persistence, and an apply-before-paint script in `` (default to `prefers-color-scheme`). Style the SVG through CSS classes using those variables — never hard-coded hex inside the SVG — so the diagram follows the theme.
+
+Always make floating overlays dismissible. Any card or panel that overlays the SVG stage (e.g., a detail panel, a legend, a side card) MUST have a visible close button, and MUST re-open when the user clicks a relevant node or filter. This prevents floating panels from permanently blocking content on the full-screen stage.
+
+Architecture diagrams almost always exceed the screen. Support pan (drag) and zoom (mouse wheel). Wrap all SVG contents in `` and drive its `transform` attribute. Pan in SVG-space 1:1 (do NOT divide mouse delta by scale — dividing makes dragging feel sluggish when zoomed in). Zoom at the cursor position by translating so the SVG point under the cursor stays fixed. Suppress node `click` events after a drag (track a 5px movement threshold + a capture-phase one-shot `stopPropagation`). Provide visual feedback: `grab` / `grabbing` cursors, a zoom-level indicator, and a reset-to-100% button.