@su-record/vibe 2.16.2 → 2.16.3

package/hooks/scripts/__tests__/clone-behaviors.test.js

@@ -0,0 +1,56 @@
+/**
+ * clone active-interaction-sweep helpers
+ *   - diffStyles: before/after computed-style differ (clone-extract.js)
+ *   - sectionHasNode / behaviorsBlock: behavior→section attachment (clone-spec.js)
+ */
+
+import { describe, it, expect } from 'vitest';
+import { diffStyles } from '../clone-extract.js';
+import { sectionHasNode, behaviorsBlock } from '../clone-spec.js';
+
+describe('diffStyles', () => {
+  it('reports only changed props with from/to', () => {
+    const a = { 'background-color': 'rgba(0, 0, 0, 0)', height: '80px' };
+    const b = { 'background-color': 'rgb(255, 255, 255)', height: '80px' };
+    expect(diffStyles(a, b)).toEqual({
+      'background-color': { from: 'rgba(0, 0, 0, 0)', to: 'rgb(255, 255, 255)' },
+    });
+  });
+
+  it('captures props that appear or disappear', () => {
+    const d = diffStyles({}, { 'box-shadow': '0 4px 20px rgba(0,0,0,0.1)' });
+    expect(d['box-shadow']).toEqual({ from: null, to: '0 4px 20px rgba(0,0,0,0.1)' });
+  });
+
+  it('returns empty when nothing changed or a snapshot is missing', () => {
+    expect(diffStyles({ color: 'red' }, { color: 'red' })).toEqual({});
+    expect(diffStyles(null, { color: 'red' })).toEqual({});
+  });
+});
+
+describe('behavior → section attachment', () => {
+  const section = {
+    name: 'Header',
+    children: [{ tag: 'header', classes: 'site-nav top', children: [{ tag: 'button', classes: 'tab', children: [] }] }],
+  };
+
+  it('matches a node by tag and class', () => {
+    expect(sectionHasNode(section, 'header', 'site-nav')).toBe(true);
+    expect(sectionHasNode(section, 'header', 'missing')).toBe(false);
+    expect(sectionHasNode(section, 'button')).toBe(true);
+  });
+
+  it('attaches a scroll behavior to the matching section only', () => {
+    const behaviors = {
+      scroll: [{ label: 'header.site-nav', tag: 'header', cls: 'site-nav', triggerScrollY: 700, changed: { height: { from: '80px', to: '56px' } } }],
+      interactive: [{ kind: 'tab-group', count: 3, tabLabels: ['A', 'B', 'C'], contentSwapsOnClick: true }],
+    };
+    const block = behaviorsBlock(section, behaviors);
+    expect(block).toContain('Scroll-triggered');
+    expect(block).toContain('height');
+    expect(block).toContain('content SWAPS on click');
+
+    const footer = { name: 'Footer', children: [{ tag: 'p', classes: '', children: [] }] };
+    expect(behaviorsBlock(footer, behaviors)).toBeNull();
+  });
+});

package/hooks/scripts/clone-extract.js

@@ -12,6 +12,9 @@
  *   screenshot.png       — full-page screenshot
  *   stylesheets.json     — @font-face + @keyframes harvested from all sheets
  *   states.json          — non-default state rules (hover/focus/active/checked/tab/aria/data-state)
+ *   behaviors.json       — ACTIVE interaction sweep: scroll-triggered header/nav diffs +
+ *                          click-driven tab groups (content-swap detection). Captures JS-set
+ *                          state that static CSS harvesting can't see. Skip with --no-interact.
  *   asset-map.json       — remote URL → local path mapping
  *   assets/images/*, assets/fonts/*
  *
@@ -78,7 +81,7 @@ const CSS_PROPS = [
 // ─── CLI parse ──────────────────────────────────────────────────────
 function parseArgs(argv) {
   const [, , cmd, urlArg, ...rest] = argv;
-  const opts = { stealth: false, ignoreRobots: false };
+  const opts = { stealth: false, ignoreRobots: false, interact: true };
   for (const arg of rest) {
     if (arg.startsWith('--out=')) opts.out = arg.slice(6);
     else if (arg.startsWith('--viewport=')) opts.viewport = arg.slice(11);
@@ -86,6 +89,7 @@ function parseArgs(argv) {
     else if (arg.startsWith('--wait=')) opts.wait = Number(arg.slice(7));
     else if (arg === '--stealth') opts.stealth = true;
     else if (arg === '--ignore-robots') opts.ignoreRobots = true;
+    else if (arg === '--no-interact') opts.interact = false;
   }
   return { cmd, url: urlArg, opts };
 }
@@ -241,7 +245,7 @@ const PAGE_EXTRACT = `
   // Deterministic: read state-dependent declarations straight from the stylesheets
   // (no scripted clicking/hovering, so the output stays reproducible).
   const propSet = new Set(props);
-  const STATE_RE = /:hover|:focus(?:-visible|-within)?|:active|:checked|:target|\\[aria-(?:expanded|selected|current|pressed)|\\[data-(?:state|active|open|selected)|\\[open\\]|\\.is-[a-z-]+|\\.(?:active|open|selected|expanded|current|show|visible)(?![\\w-])/i;
+  const STATE_RE = /:hover|:focus(?:-visible|-within)?|:active|:checked|:target|\\[aria-(?:expanded|selected|current|pressed)|\\[data-(?:state|active|open|selected)|\\[open\\]|\\.is-[a-z-]+|\\.has-[a-z-]+|\\.(?:active|open|selected|expanded|current|show|visible|scrolled|sticky|stuck|pinned|fixed|shrink|shrunk|compact|affix|headroom|scrolling)(?![\\w-])/i;
   const harvestStateRule = (rule, media) => {
     if (rule.selectorText && STATE_RE.test(rule.selectorText)) {
       const decl = {};
@@ -556,6 +560,155 @@ async function freezeAnimations(page) {
   });
 }
 
+// ─── Active interaction sweep ───────────────────────────────────────
+// Static CSS harvesting (states.json) only sees declared :hover/:active/[data-state]
+// rules. It is blind to JS-set state: a header that gains a class on scroll, a tab
+// group that swaps content on click, Framer/GSAP inline-style animations. This sweep
+// actually drives the page and diffs computed styles before/after — the #1 accuracy fix.
+
+// Subset of props worth diffing for scroll/click state changes (kept small on purpose).
+const BEHAVIOR_PROPS = [
+  'background-color', 'background-image', 'box-shadow', 'backdrop-filter',
+  'height', 'min-height', 'padding-top', 'padding-bottom',
+  'transform', 'opacity', 'position', 'top',
+  'border-bottom-width', 'border-bottom-color', 'color',
+];
+
+// Pure style differ — exported for testing. Returns { prop: { from, to } } for changed props.
+function diffStyles(a, b) {
+  const out = {};
+  if (!a || !b) return out;
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const k of keys) {
+    const from = a[k] ?? null;
+    const to = b[k] ?? null;
+    if (from !== to && (from || to)) out[k] = { from, to };
+  }
+  return out;
+}
+
+// In-page: tag sticky/fixed/top-bar elements with a probe attr so we can re-find them.
+const TAG_SCROLL_CANDIDATES = `(function () {
+  const els = Array.from(document.querySelectorAll(
+    'header, nav, [class*="header" i], [class*="nav" i], [class*="sticky" i], [class*="fixed" i]'
+  ));
+  const out = []; let i = 0;
+  for (const el of els) {
+    if (i >= 6) break;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const sticky = cs.position === 'fixed' || cs.position === 'sticky';
+    const topBar = r.top >= 0 && r.top < 120 && r.width > window.innerWidth * 0.5;
+    if (!sticky && !topBar) continue;
+    if (el.closest('[data-clone-probe]')) continue;
+    el.setAttribute('data-clone-probe', 'sc' + i);
+    const cls = (el.getAttribute('class') || '').trim().split(/\\s+/).filter(Boolean)[0] || '';
+    out.push({ probe: 'sc' + i, tag: el.tagName.toLowerCase(), cls });
+    i++;
+  }
+  return out;
+})`;
+
+const SNAP_PROBES = `(function (props) {
+  const out = {};
+  document.querySelectorAll('[data-clone-probe]').forEach((el) => {
+    const cs = getComputedStyle(el); const o = {};
+    for (const p of props) { const v = cs.getPropertyValue(p); if (v) o[p] = v.trim(); }
+    out[el.getAttribute('data-clone-probe')] = o;
+  });
+  return out;
+})`;
+
+// In-page: tag tab-like groups (≥2 siblings) so we can click them.
+const TAG_TAB_GROUPS = `(function () {
+  const els = Array.from(document.querySelectorAll(
+    '[role="tab"], [aria-selected], button[class*="tab" i], li[class*="tab" i], [data-state="active"], [data-state="inactive"]'
+  ));
+  const groups = new Map();
+  for (const el of els) {
+    const p = el.parentElement; if (!p) continue;
+    if (!groups.has(p)) groups.set(p, []);
+    groups.get(p).push(el);
+  }
+  const out = []; let g = 0;
+  for (const [, items] of groups) {
+    if (g >= 4) break;
+    if (items.length < 2) continue;
+    items.forEach((el, idx) => el.setAttribute('data-clone-tab', g + '_' + idx));
+    out.push({ group: g, count: items.length, labels: items.map((el) => (el.textContent || '').trim().slice(0, 40)).filter(Boolean) });
+    g++;
+  }
+  return out;
+})`;
+
+// Fingerprint the visible text near a tab group, to detect content swaps on click.
+const TAB_CONTENT_FP = `(function (g) {
+  const first = document.querySelector('[data-clone-tab="' + g + '_0"]');
+  if (!first) return null;
+  const box = first.closest('section, main, div');
+  const root = box ? (box.parentElement || box) : document.body;
+  return (root.innerText || '').replace(/\\s+/g, ' ').trim().slice(0, 4000);
+})`;
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+async function runInteractionSweep(page) {
+  const behaviors = { scroll: [], interactive: [] };
+
+  // ── Scroll-triggered state (header/nav shrink, background, shadow on scroll) ──
+  const candidates = await page.evaluate(`(${TAG_SCROLL_CANDIDATES})()`);
+  if (candidates.length) {
+    const before = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
+    const innerH = await page.evaluate('window.innerHeight');
+    const triggerY = Math.min(700, Math.max(200, Math.round(innerH * 0.9)));
+    await page.evaluate(`window.scrollTo(0, ${triggerY})`);
+    await wait(500);
+    const after = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
+    await page.evaluate('window.scrollTo(0, 0)');
+    await wait(300);
+    for (const c of candidates) {
+      const changed = diffStyles(before[c.probe], after[c.probe]);
+      if (Object.keys(changed).length) {
+        behaviors.scroll.push({
+          label: c.cls ? `${c.tag}.${c.cls}` : c.tag,
+          tag: c.tag, cls: c.cls, triggerScrollY: triggerY, changed,
+        });
+      }
+    }
+  }
+
+  // ── Click-driven tab groups (content swap detection) ──
+  const groups = await page.evaluate(`(${TAG_TAB_GROUPS})()`);
+  for (const grp of groups) {
+    try {
+      const beforeFp = await page.evaluate(`(${TAB_CONTENT_FP})(${grp.group})`);
+      const clicked = await page.evaluate(
+        `(function (g) { const t = document.querySelector('[data-clone-tab="' + g + '_1"]'); if (!t) return false; t.click(); return true; })(${grp.group})`
+      );
+      if (!clicked) continue;
+      await wait(450);
+      const afterFp = await page.evaluate(`(${TAB_CONTENT_FP})(${grp.group})`);
+      // restore default state
+      await page.evaluate(
+        `(function (g) { const t = document.querySelector('[data-clone-tab="' + g + '_0"]'); if (t) t.click(); })(${grp.group})`
+      );
+      await wait(200);
+      behaviors.interactive.push({
+        kind: 'tab-group',
+        count: grp.count,
+        tabLabels: grp.labels,
+        contentSwapsOnClick: beforeFp != null && afterFp != null && beforeFp !== afterFp,
+      });
+    } catch { /* one bad group must not abort the whole sweep */ }
+  }
+
+  // Clean up probe attributes BEFORE static extraction so they don't pollute output.
+  await page.evaluate(
+    'document.querySelectorAll("[data-clone-probe],[data-clone-tab]").forEach((e) => { e.removeAttribute("data-clone-probe"); e.removeAttribute("data-clone-tab"); })'
+  );
+  return behaviors;
+}
+
 // HTML sanitization: strip scripts/analytics before saving
 function sanitizeHtml(html) {
   return html
@@ -617,6 +770,17 @@ async function capture({ url, opts }) {
     if (opts.wait) await new Promise((r) => setTimeout(r, opts.wait));
     else await new Promise((r) => setTimeout(r, 1200));
 
+    // Active interaction sweep (before freezing — it observes real transitions/JS state).
+    let behaviors = null;
+    if (opts.interact) {
+      try {
+        behaviors = await runInteractionSweep(page);
+        console.log(`[clone-extract] interaction sweep: ${behaviors.scroll.length} scroll-state, ${behaviors.interactive.length} tab-group(s)`);
+      } catch (e) {
+        console.log(`[clone-extract] interaction sweep skipped: ${e.message}`);
+      }
+    }
+
     await freezeAnimations(page);
 
     // PAGE_EXTRACT is a parenthesized function-expression string. page.evaluate treats a
@@ -731,6 +895,22 @@ async function capture({ url, opts }) {
       }, null, 2),
     );
     fs.writeFileSync(path.join(opts.out, 'asset-map.json'), JSON.stringify(assetMap, null, 2));
+    if (behaviors) {
+      // Rewrite any remote asset URLs captured in scroll-state background-image diffs.
+      for (const s of behaviors.scroll) {
+        for (const ch of Object.values(s.changed)) {
+          if (typeof ch.from === 'string') ch.from = rewriteCssValue(ch.from);
+          if (typeof ch.to === 'string') ch.to = rewriteCssValue(ch.to);
+        }
+      }
+      fs.writeFileSync(
+        path.join(opts.out, 'behaviors.json'),
+        JSON.stringify({
+          meta: { url, bp: opts.bp || null, capturedAt: new Date().toISOString() },
+          ...behaviors,
+        }, null, 2),
+      );
+    }
 
     const okCount = Object.values(assetMap).filter((a) => a.status === 'ok').length;
     console.log(`[clone-extract] done → ${opts.out}`);
@@ -742,15 +922,20 @@ async function capture({ url, opts }) {
 }
 
 // ─── Entry ──────────────────────────────────────────────────────────
-const { cmd, url, opts } = parseArgs(process.argv);
+const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-extract.js');
+if (isMain) {
+  const { cmd, url, opts } = parseArgs(process.argv);
+
+  if (cmd !== 'capture') {
+    console.error('Usage: node clone-extract.js capture <URL> --out=<dir> --viewport=WxH[@DPR] --bp=mo|pc [--stealth] [--ignore-robots] [--no-interact] [--wait=ms]');
+    process.exit(1);
+  }
 
-if (cmd !== 'capture') {
-  console.error('Usage: node clone-extract.js capture <URL> --out=<dir> --viewport=WxH[@DPR] --bp=mo|pc [--stealth] [--ignore-robots] [--wait=ms]');
-  process.exit(1);
+  capture({ url, opts }).catch((err) => {
+    console.error(`[clone-extract] FAIL: ${err.message}`);
+    if (process.env.DEBUG) console.error(err.stack);
+    process.exit(1);
+  });
 }
 
-capture({ url, opts }).catch((err) => {
-  console.error(`[clone-extract] FAIL: ${err.message}`);
-  if (process.env.DEBUG) console.error(err.stack);
-  process.exit(1);
-});
+export { diffStyles };

package/hooks/scripts/clone-spec.js

@@ -27,15 +27,12 @@ function parseArgs(argv) {
     if (a.startsWith('--out=')) opts.out = a.slice(6);
     else if (a.startsWith('--section=')) opts.section = a.slice(10);
     else if (a.startsWith('--feature=')) opts.feature = a.slice(10);
+    else if (a.startsWith('--behaviors=')) opts.behaviors = a.slice(12);
   }
   return { sectionsPath, opts };
 }
 
 const { sectionsPath, opts } = parseArgs(process.argv);
-if (!sectionsPath || !opts.out) {
-  console.error('Usage: node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name]');
-  process.exit(1);
-}
 
 // ─── Helpers ────────────────────────────────────────────────────────
 function safeName(name) {
@@ -95,6 +92,40 @@ function componentsBlock(components) {
   }).join('\n');
 }
 
+// True if any node in the section subtree matches a behavior's tag (+ optional class).
+function sectionHasNode(section, tag, cls) {
+  const hit = (n) => {
+    if (n.tag === tag && (!cls || (n.classes || '').split(/\s+/).includes(cls))) return true;
+    return (n.children || []).some(hit);
+  };
+  return (section.children || []).some(hit);
+}
+
+function behaviorsBlock(section, behaviors) {
+  if (!behaviors) return null;
+  const scroll = (behaviors.scroll || []).filter((b) => sectionHasNode(section, b.tag, b.cls));
+  // Tab groups aren't tag-keyed; attach to any section that contains a [role=tab]-ish node.
+  const tabs = (behaviors.interactive || []).filter(() =>
+    sectionHasNode(section, 'button') || sectionHasNode(section, 'li') || sectionHasNode(section, 'a'),
+  );
+  if (!scroll.length && !tabs.length) return null;
+
+  const lines = [];
+  for (const b of scroll) {
+    const diffs = Object.entries(b.changed)
+      .map(([k, v]) => `    - ${k}: \`${v.from}\` → \`${v.to}\``).join('\n');
+    lines.push(`- **Scroll-triggered** on \`${b.label}\` (past ~${b.triggerScrollY}px scroll):\n${diffs}`);
+  }
+  for (const t of tabs) {
+    const labels = (t.tabLabels || []).map((l) => `"${l}"`).join(', ') || '(unlabeled)';
+    const swap = t.contentSwapsOnClick
+      ? '**content SWAPS on click** → extract every tab\'s content/assets, build click-driven'
+      : 'no content swap detected (styling-only tabs)';
+    lines.push(`- **Tab group** ×${t.count} [${labels}]: ${swap}`);
+  }
+  return lines.join('\n');
+}
+
 function assetsBlock(images) {
   const bg = (images && images.bg) || [];
   const content = (images && images.content) || [];
@@ -105,12 +136,16 @@ function assetsBlock(images) {
 }
 
 // ─── Spec rendering ─────────────────────────────────────────────────
-function renderSpec(section, meta) {
+function renderSpec(section, meta, behaviors) {
   const box = section.box || {};
   const texts = collectText(section);
   const textBlock = texts.length
     ? texts.map((t) => `- "${t}"`).join('\n')
     : '- (no direct text — likely visual/asset-only section)';
+  const behavior = behaviorsBlock(section, behaviors);
+  const behaviorSection = behavior
+    ? `\n## Dynamic behaviors — observed by ACTIVE capture (not guesses)\n_Captured by driving the live page (scroll/click). These override the static heuristic above._\n${behavior}\n`
+    : '';
   return `# ${section.name} — Clone Spec (${meta.bp})
 
 > Auto-generated skeleton from sections.json by clone-spec.js. **This is a build contract.**
@@ -123,7 +158,7 @@ function renderSpec(section, meta) {
 
 ## Interaction model — ⚠ confirm before building
 ${interactionBlock(section.interaction)}
-
+${behaviorSection}
 ## States to reproduce
 _Harvested non-default state rules (hover/focus/active/checked/tab/aria/data-state). Implement each._
 ${statesBlock(section.states)}
@@ -162,6 +197,13 @@ function main() {
     viewport: data.meta && data.meta.viewport,
     bp: opts.section ? (data.meta && data.meta.bp) : (data.meta && data.meta.bp) || '?',
   };
+  // behaviors.json (active interaction sweep) lives next to the source computed.json.
+  const behaviorsPath = opts.behaviors || path.join(path.dirname(sectionsPath), 'behaviors.json');
+  let behaviors = null;
+  if (fs.existsSync(behaviorsPath)) {
+    try { behaviors = JSON.parse(fs.readFileSync(behaviorsPath, 'utf8')); } catch { behaviors = null; }
+  }
+
   let sections = data.sections || [];
   if (opts.section) sections = sections.filter((s) => s.name === opts.section);
   if (!sections.length) {
@@ -172,15 +214,24 @@ function main() {
   fs.mkdirSync(opts.out, { recursive: true });
   for (const section of sections) {
     const file = path.join(opts.out, `${safeName(section.name)}.spec.md`);
-    fs.writeFileSync(file, renderSpec(section, meta));
+    fs.writeFileSync(file, renderSpec(section, meta, behaviors));
     console.log(`[clone-spec] wrote ${file}`);
   }
   console.log(`[clone-spec] done → ${sections.length} spec(s) in ${opts.out}`);
 }
 
-try { main(); }
-catch (e) {
-  console.error(`[clone-spec] FAIL: ${e.message}`);
-  if (process.env.DEBUG) console.error(e.stack);
-  process.exit(1);
+const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-spec.js');
+if (isMain) {
+  if (!sectionsPath || !opts.out) {
+    console.error('Usage: node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name] [--behaviors=path]');
+    process.exit(1);
+  }
+  try { main(); }
+  catch (e) {
+    console.error(`[clone-spec] FAIL: ${e.message}`);
+    if (process.env.DEBUG) console.error(e.stack);
+    process.exit(1);
+  }
 }
+
+export { sectionHasNode, behaviorsBlock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.16.2",
+  "version": "2.16.3",
   "description": "AI Coding Framework for Claude Code — 42+ agents, 70 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/clone/SKILL.md

@@ -41,6 +41,11 @@ The rendered DOM is the source of truth for markup. Screenshots are for pixel ve
 
 6. Do NOT ship default-state-only. Implement every harvested state (hover/focus/active/open/
    tab-switch) from states.json / the section spec.
+
+7. Do NOT ignore behaviors.json. The ACTIVE interaction sweep (scroll-state diffs +
+   click-driven tab content-swap detection) catches JS-set state that static CSS harvesting
+   is blind to. When the spec's "Dynamic behaviors" block conflicts with the static
+   interaction heuristic, the active capture wins.
 ```
 
 ## Full Flow
@@ -119,6 +124,7 @@ node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
   ├── computed.json       — per-element computed CSS + bounding box
   ├── screenshot.png      — full-page screenshot
   ├── states.json         — non-default state rules (hover/focus/active/checked/tab/aria/data-state)
+  ├── behaviors.json      — ACTIVE sweep: scroll-triggered header/nav diffs + click-driven tab groups
   ├── assets/
   │   ├── images/         — all <img>, background-image, <picture> sources
   │   └── fonts/          — @font-face srcs
@@ -136,8 +142,14 @@ node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
 6. Rewrite asset URLs in rendered.html and computed.json to local paths
 7. Strip inline analytics/tracking scripts before saving rendered.html
 8. Harvest non-default state rules from all stylesheets → states.json
-   (deterministic: read :hover/:focus/:active/:checked/[aria-*]/[data-state]/.is-*/.active
-    declarations straight from CSS — NO scripted clicking, so output stays reproducible)
+   (deterministic: read :hover/:focus/:active/:checked/[aria-*]/[data-state]/.is-*/.active/
+    .scrolled/.sticky/.pinned/… declarations straight from CSS — NO scripted clicking)
+9. ACTIVE interaction sweep → behaviors.json (runs after lazy-load, before freeze).
+   Drives the live page to capture JS-set state that CSS harvesting can't see:
+   - Scroll-state diff: tag sticky/fixed/top-bar headers+nav, snapshot computed CSS at
+     scroll 0, scroll past threshold, re-snapshot, diff → {prop: {from, to}, triggerScrollY}
+   - Tab groups: click tab-like sibling sets, detect whether content swaps on click
+   Disable with --no-interact (restores the old fully-deterministic, screenshot-stable capture).
 ```
 
 ---
@@ -256,7 +268,9 @@ node {{VIBE_PATH}}/hooks/scripts/clone-validate.js \
 ```
 
 ⛔ **No section is built without a completed spec.** Step 0 emits `_specs/{Section}.spec.md`
-   (interaction model + states + computed CSS + assets + text + checklist). Before writing a
+   (interaction model + **active-capture Dynamic behaviors** + states + computed CSS + assets +
+   text + checklist). clone-spec.js auto-loads `behaviors.json` from the sections.json dir and
+   attaches matching scroll/tab behaviors per section. Before writing a
    section's component, Claude reviews its spec and resolves every `TODO` (confirm interaction
    model, list states to implement, choose tags, replace copyrighted text). The spec is the
    contract AND the audit trail — it forces extraction rigor before any code is written.
@@ -407,4 +421,5 @@ Claude must:
 | clone-refine.js produces empty sections | Site likely uses Shadow DOM or canvas rendering. Report and ask whether to fall back to screenshot-only mode. |
 | Pixel diff stuck > 0.05 after 5 rounds | Likely font fallback or anti-aliasing. Report metric, allow user to accept threshold. |
 | Interaction model guess wrong (Phase 5) | section.interaction is a static-DOM heuristic. Re-observe the live site, correct the model in the spec, rebuild the section for the confirmed model. |
-| states.json empty but site has hover/tabs | States may be set via inline JS, not CSS rules. Note in the spec and capture them manually from the live site during Phase 5. |
+| states.json empty but site has hover/tabs | States may be set via inline JS, not CSS rules. Check behaviors.json (active sweep captures scroll/tab JS state). If still missing, note in the spec and capture manually during Phase 5. |
+| behaviors.json missing or empty | Active sweep was disabled (--no-interact), hit no sticky/tab elements, or errored (logged, non-fatal). Falls back to static states.json. Re-run without --no-interact to retry. |

package/skills/vibe.clone/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: vibe.clone
 description: URL → 마크업 레벨 픽셀 완벽 클론 — 헤드리스 브라우저로 라이브 사이트 캡처 후 현재 프로젝트 스택에 맞게 스캐폴딩
-argument-hint: "<url> [<url2>...] [--name=<feature>] [--mo-only] [--pc-only] [--ignore-robots]"
+argument-hint: "<url> [<url2>...] [--name=<feature>] [--mo-only] [--pc-only] [--ignore-robots] [--no-interact]"
 user-invocable: true
 ---
 
@@ -20,6 +20,7 @@ URL을 받아 **마크업 수준으로 정밀 복제**하고 현재 프로젝트
 /vibe.clone <url> --name=stripe-clone          # 기능 이름 지정 (기본: 호스트명 kebab-case)
 /vibe.clone <url1> <url2> <url3>               # 다중 페이지 클론 (같은 사이트의 여러 경로)
 /vibe.clone <url> --ignore-robots              # robots.txt 무시 (사이트 소유자 허가 있을 때만)
+/vibe.clone <url> --no-interact                # 능동 인터랙션 스윕 끄기 (완전 결정론적·재현 가능 캡처)
 ```
 
 ## Argument Routing
@@ -52,7 +53,9 @@ Phase 0: Setup
 Phase 1: Capture (병렬 — scope에 따라 MO/PC 동시)
   - node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <url> \
       --out=/tmp/{feature}/{bp}/ --viewport={WxH} --bp={mo|pc}
-  - 출력: rendered.html, computed.json, screenshot.png, states.json, asset-map.json, assets/
+  - 출력: rendered.html, computed.json, screenshot.png, states.json, behaviors.json, asset-map.json, assets/
+  - behaviors.json = 능동 인터랙션 스윕(스크롤 시 헤더/내비 변화 diff + 탭 클릭 콘텐츠 스왑 감지).
+    JS로 세팅되는 상태(정적 CSS로는 안 잡힘)를 포착 — 클론 정확도의 핵심. --no-interact 로 비활성화.
 
 Phase 2: Refine (BP마다 독립)
   - node {{VIBE_PATH}}/hooks/scripts/clone-refine.js \
@@ -88,7 +91,7 @@ Phase 5: Pixel Verification (P1=0까지 루프 — clone SKILL.md 규칙)
 
 ```
 /tmp/{feature}/                  # 작업 디렉토리 (산출물 원본)
-  ├── mo/, pc/                   # rendered.html, computed.json, screenshot.png, states.json, sections.json, assets/
+  ├── mo/, pc/                   # rendered.html, computed.json, screenshot.png, states.json, behaviors.json, sections.json, assets/
   └── project-tokens.json        # 기존 프로젝트 토큰 인덱스
 
 ./components/{feature}/          # Claude가 작성한 컴포넌트 (.tsx/.vue/.svelte/.html)