Skill

comparison-mode

Compares two HTML files side-by-side with DOM diff, pixel diff, and style diff. Useful for reviewing before/after or A/B versions of artifacts.

HTML

JavaScript

frontend

Popularity

Parent stars

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/design-process:comparison-mode

User invocable

Model invocable

Inline context

Default effort

When to use

Есть две версии артефакта (до/после, A/B), нужно показать что изменилось.

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Не текстовый diff (его делает git). А **визуальный** + **семантический**.

SKILL.md

199 lines · ~1.6k tokens

Stats

LanguagePython

Parent stars7

Parent forks9

MaintenanceGood

Last CommitJun 29, 2026

Actions

View Source View Plugin View on GitHub View README

Comparison mode

Не текстовый diff (его делает git). А визуальный + семантический.

Что показывает

Side-by-side — два iframe, один над другим / рядом, одинаковый scroll.
DOM diff — какие узлы добавили/удалили/поменяли.
Pixel diff — оверлей с подсветкой, что отличается.
Style diff — изменения в computed styles (color, font-size, padding...).

Структура

comparison/
  index.html          ← главная
  before.html         ← (или any path)
  after.html
  diff-engine.js      ← логика

index.html

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Comparison</title>
  <style>
    body { display: grid; grid-template: auto 1fr / 1fr 1fr; height: 100vh; margin: 0; font: 13px ui-monospace, monospace; gap: 1px; background: #888; }
    h2 { margin: 0; padding: 8px 16px; background: #222; color: #fff; font-size: 12px; font-weight: normal; }
    iframe { width: 100%; height: 100%; border: 0; background: #fff; }
    .toolbar { grid-column: 1 / -1; padding: 8px 16px; background: #fafafa; border-bottom: 1px solid #ddd; display: flex; gap: 16px; align-items: center; }
    .mode { display: flex; gap: 4px; }
    .mode button { padding: 4px 12px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
    .mode button.active { background: #111; color: #fff; }
    .stats { color: #888; }
    .stats b { color: #111; }
  </style>
</head>
<body>
  <div class="toolbar">
    <strong>Comparison</strong>
    <div class="mode" id="mode">
      <button data-mode="side"    class="active">Side by side</button>
      <button data-mode="overlay">Overlay diff</button>
      <button data-mode="dom">DOM tree</button>
    </div>
    <span class="stats" id="stats">Loading…</span>
  </div>
  <h2>Before</h2>
  <h2>After</h2>
  <iframe id="a" src="before.html"></iframe>
  <iframe id="b" src="after.html"></iframe>

  <script src="diff-engine.js" defer></script>
</body>
</html>

diff-engine.js (минимум)

// 1. Sync scroll
function syncScroll() {
  const a = document.getElementById('a').contentWindow;
  const b = document.getElementById('b').contentWindow;
  let last = 0, fromA = false;
  a.addEventListener('scroll', () => {
    if (Date.now() - last < 50 && !fromA) return;
    fromA = true; b.scrollTo(0, a.scrollY); last = Date.now();
    setTimeout(() => fromA = false, 100);
  });
  b.addEventListener('scroll', () => {
    if (Date.now() - last < 50 && fromA) return;
    a.scrollTo(0, b.scrollY); last = Date.now();
  });
}

// 2. DOM diff (rough)
function domDiff() {
  const ad = document.getElementById('a').contentDocument;
  const bd = document.getElementById('b').contentDocument;
  const aSet = new Set([...ad.querySelectorAll('*')].map(el => el.tagName + (el.id ? '#' + el.id : '') + ' ' + el.className));
  const bSet = new Set([...bd.querySelectorAll('*')].map(el => el.tagName + (el.id ? '#' + el.id : '') + ' ' + el.className));
  const removed = [...aSet].filter(x => !bSet.has(x));
  const added   = [...bSet].filter(x => !aSet.has(x));
  return { added, removed };
}

// 3. Stats
window.addEventListener('load', () => {
  document.getElementById('a').addEventListener('load', update);
  document.getElementById('b').addEventListener('load', update);
  syncScroll();
  function update() {
    try {
      const d = domDiff();
      const stats = document.getElementById('stats');
      stats.innerHTML = `<b>+${d.added.length}</b> added · <b>-${d.removed.length}</b> removed`;
    } catch (e) { /* not loaded yet */ }
  }
});

Pixel diff (overlay-режим)

Через Playwright (или html-to-image в браузере):

// templates/pixel-diff.mjs
import { chromium } from 'playwright';
import { PNG } from 'pngjs';
import pixelmatch from 'pixelmatch';
import fs from 'node:fs/promises';

const [a, b] = process.argv.slice(2);
const browser = await chromium.launch();
const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });

async function shoot(file) {
  const page = await ctx.newPage();
  await page.goto(`file://${process.cwd()}/${file}`, { waitUntil: 'networkidle' });
  const buf = await page.screenshot({ fullPage: true });
  await page.close();
  return PNG.sync.read(buf);
}

const imgA = await shoot(a);
const imgB = await shoot(b);
await browser.close();

const { width, height } = imgA;
const diff = new PNG({ width, height });
const pixels = pixelmatch(imgA.data, imgB.data, diff.data, width, height, { threshold: 0.1 });
await fs.writeFile('diff.png', PNG.sync.write(diff));
console.log(`${pixels} pixels differ. → diff.png`);

npm i pixelmatch pngjs playwright
node pixel-diff.mjs before.html after.html

DOM tree mode

Для глубокого diff'а — text-based рекурсивный обход:

function tree(el, depth = 0) {
  let s = '  '.repeat(depth) + el.tagName.toLowerCase();
  if (el.id) s += '#' + el.id;
  if (el.className) s += '.' + [...el.classList].slice(0,2).join('.');
  s += '\n';
  for (const c of el.children) s += tree(c, depth + 1);
  return s;
}

const treeA = tree(ad.body);
const treeB = tree(bd.body);
// → unified diff (через `diff` lib)

npm i diff

import { diffLines } from 'diff';
const out = diffLines(treeA, treeB);
out.forEach(p => console.log((p.added ? '+' : p.removed ? '-' : ' ') + p.value.split('\n').join('\n' + (p.added?'+':p.removed?'-':' '))));

Workflow

До правок → cp index.html .compare/before.html.
Делаешь правки.
После → cp index.html .compare/after.html.
Открой .compare/index.html в браузере → side-by-side.
(опционально) node pixel-diff.mjs ... для overlay.

Ограничения

Cross-origin: если артефакты загружают разные origin'ы — sync scroll работает, DOM diff может упасть. Локальные файлы через file:// работают.
Лучше работает на статичных HTML. Анимированные / интерактивные требуют paused state для diff.

Антипаттерны

❌ Использовать как замену git diff. Текстовый diff информативнее для кода.
❌ Пытаться сравнить два production-сайта на разных доменах — упрётся в CORS.
❌ Pixel diff на каждый тривиальный изменение шрифта — даёт огромную разницу. Используй с порогом и для крупных правок.

comparison-mode

Popularity

Invocation

Context Preview

SKILL.md

comparison-mode

Popularity

Invocation

Context Preview

SKILL.md

Comparison mode

Что показывает

Структура

index.html

diff-engine.js (минимум)

Pixel diff (overlay-режим)

DOM tree mode

Workflow

Ограничения

Антипаттерны

Similar Skills

Comparison mode

Что показывает

Структура

index.html

diff-engine.js (минимум)

Pixel diff (overlay-режим)

DOM tree mode

Workflow

Ограничения

Антипаттерны

Similar Skills