litclaude-ai 0.3.3 → 0.3.7

package/plugins/litclaude/skills/visual-qa/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: visual-qa
+description: "Rigorous visual QA for any UI you built or changed, across BOTH web/page UIs and TUI/terminal UIs. MUST USE after building or changing any UI to verify it visually before declaring it done. Captures objective reference evidence with a bundled diff script (image-diff for screenshots, tui-check for terminal captures), then runs two parallel read-only oracle passes (design-system and functional integrity; visual fidelity and CJK precision) and synthesizes one good/bad verdict. Triggers: visual QA, visual regression, screenshot diff, pixel diff, image comparison, UI looks wrong, design system check, alpha channel breakage, responsive check, CJK text, Korean/Japanese/Chinese text clipping, glyph drop, TUI alignment, terminal UI, tmux capture, box-drawing border misalignment, wide-character column drift."
+---
+
+# Visual QA - Dual-Oracle Web and TUI Verification
+
+The LitClaude visual specialist for Claude Code. Verify a rendered UI against
+intent using objective script evidence plus two parallel read-only oracle
+passes, then synthesize one good/bad verdict. The script numbers focus the
+reviewers. They are not the verdict.
+
+## Runtime
+
+The bundled scripts are dependency-free TypeScript with zero external packages
+(no install step). Run them with either:
+
+- Node 22.6+: `node --experimental-strip-types "$SKILL_DIR/scripts/cli.ts" ...`
+- bun: `bun "$SKILL_DIR/scripts/cli.ts" ...`
+
+PNG decoding, CRC, deflate/inflate, ANSI stripping, and East-Asian width all use
+only Node built-ins (`node:fs`, `node:zlib`, `node:buffer`). `$SKILL_DIR` is this
+skill's own directory (the folder containing this SKILL.md).
+
+## Purpose and when to use
+
+- Use after you build or change any UI, before calling it done. Covers web/page
+  UIs and TUI/terminal UIs.
+- Use when output must match a mock, a baseline, or a stated design intent; when
+  you suspect a regression; when CJK (Korean/Japanese/Chinese) text may clip,
+  misalign, or wrap awkwardly; when a claimed design system might actually be a
+  flat image; when a terminal layout may overflow or its borders may break.
+- Skip when there is no rendered surface (pure backend or library logic with no
+  visual or terminal output). For broad post-implementation review use
+  review-work; this skill is the visual specialist.
+
+## Step 1 - Detect the surface
+
+- Web/page UI: renders in a browser (HTML/CSS/JS, components, canvas, SVG).
+  Evidence is screenshots.
+- TUI/terminal UI: renders as text in a terminal (box-drawing, panes, status
+  lines, REPL/TUI apps). Evidence is terminal captures.
+
+If the change touches both, run both capture tracks and feed both into the passes.
+
+## Step 2 - Capture objective reference evidence
+
+### Web
+
+1. Capture a REFERENCE image: the user's mock/target, or a known-good baseline.
+   Save as PNG.
+2. Capture the ACTUAL rendered screenshot at the same viewport size using the
+   project's browser tooling (Claude Code's browser/Playwright tooling). Save as
+   PNG.
+3. Run the diff and keep the JSON:
+
+```
+node --experimental-strip-types "$SKILL_DIR/scripts/cli.ts" image-diff <reference.png> <actual.png>
+```
+
+Key fields: `dimensionsMatch`, `diffRatio` (0..1), `similarityScore` (0..100),
+`alphaChannelIntact`, `hotspots[]` (grid regions ranked by `diffRatio`).
+
+### TUI
+
+1. Capture plain text and an ANSI-preserving copy:
+
+```
+tmux capture-pane -p > capture.txt
+tmux capture-pane -e -p > capture-ansi.txt
+```
+
+2. Run the check with the REAL terminal width and keep the JSON:
+
+```
+node --experimental-strip-types "$SKILL_DIR/scripts/cli.ts" tui-check capture.txt --cols <N>
+```
+
+Key fields: `maxWidth`, `overflowLines[]`, `borderMisaligned`,
+`wideCharColumns[]`, `hasAnsi`.
+
+This JSON (diff ratio, similarity score, hotspots or overflow lines, border
+alignment, wide-char columns, alpha) is REFERENCE evidence to aim the reviewers.
+It is not the verdict by itself.
+
+## Step 3 - Dispatch two read-only QA subagents in parallel
+
+Spawn BOTH oracle passes as background subagents in a single message using
+Claude Code's `Task` tool with `run_in_background: true`, so they run
+concurrently. Each oracle is read-only: it reviews and reports, and must not
+modify files. Each returns PASS, REVISE, or FAIL with concrete, located
+findings. Pass A proves the surface is a real design-system implementation, not
+a mock-only or faked-image substitute. Pass B directly opens screenshots and
+inspects source/content for visual and CJK defects. The main session waits for
+both background subagents to finish, then synthesizes the verdict.
+
+Paste evidence directly into each prompt: source code, the plain-text TUI
+captures, the script JSON, and the screenshot paths plus your described
+observations for web. The two passes differ in depth by charter, not by any
+model or effort setting.
+
+### Pass A - Design-system and functional integrity (deeper, strict)
+
+Launch with the `Task` tool, `run_in_background: true`, description
+"Visual QA pass A: design-system and functional integrity", prompt:
+
+```
+REVIEW TYPE: DESIGN-SYSTEM AND FUNCTIONAL INTEGRITY (read-only)
+TIER INTENT: Treat this as the deeper, stricter pass. Reason exhaustively before concluding. Assume a plausible-looking surface may be faked or mock-only until the source proves otherwise. Do not modify any file.
+
+INTENT:
+{What the user asked for, the mock or baseline, and the constraints.}
+
+SURFACE: {web | tui | both}
+
+SOURCE CODE:
+{Full source of the UI: components, styles/tokens, layout, render code. Include neighboring files that show existing patterns.}
+
+CAPTURES:
+{Web: actual screenshot path(s) plus your described observations. TUI: paste capture.txt and capture-ansi.txt inline.}
+
+SHARED SCRIPT EVIDENCE (reference, not verdict):
+{Paste the image-diff or tui-check JSON. Use alphaChannelIntact for the transparency check.}
+
+CHECK EACH:
+1. Real design system vs ad-hoc/mock-only: are styles driven by coherent design tokens and reused primitives, or one-off hardcoded values scattered per element? Treat mock-only screens, static compositions, or one-page hardcoded styling with no reusable system as BLOCKING unless the user explicitly requested a throwaway mock.
+2. Faked-with-an-image anti-pattern: is the UI a real DOM/component tree, or a pasted raster/screenshot or background-image standing in for live elements? For TUI: a real layout that reflows, or hardcoded pre-rendered text at fixed widths?
+3. Alpha and transparency: handled correctly, with no unexpected opaque or black fills and correct PNG/CSS alpha? Cross-check alphaChannelIntact.
+4. Code style and implementation quality.
+5. Responsive and resize behavior across viewport sizes (web) or terminal resize (TUI).
+6. Do the user-intended FEATURES actually work: interactions, states, navigation (web); input handling, resize, scroll (TUI)? Trace the code paths.
+
+OUTPUT:
+VERDICT: PASS | REVISE | FAIL
+CONFIDENCE: HIGH | MEDIUM | LOW
+SUMMARY: 1-3 sentences
+FINDINGS: for each, [dimension] [severity] what is wrong, where (file/line or capture region), and the concrete fix
+WHAT IS GOOD: correct aspects that must not regress
+BLOCKING: items that must be fixed; empty if PASS
+```
+
+### Pass B - Visual fidelity and CJK precision (focused)
+
+Launch with the `Task` tool, `run_in_background: true`, description
+"Visual QA pass B: visual fidelity and CJK precision", prompt:
+
+```
+REVIEW TYPE: VISUAL FIDELITY AND CJK PRECISION (read-only)
+TIER INTENT: Treat this as the focused visual pass. Directly open the screenshots with Claude Code's image-reading tool (the Read tool on the PNG path) before judging. Anchor every claim to the script evidence, source code, and captures. Do not modify any file.
+
+INTENT:
+{What the user requested and the mock or baseline to match.}
+
+SURFACE: {web | tui | both}
+
+CAPTURES:
+{Web: actual and reference screenshot paths plus your described observations. TUI: paste capture.txt and capture-ansi.txt inline.}
+
+SOURCE CODE:
+{For web: include the rendered text/content, components, typography, layout, and style code. For TUI: include render code that controls wrapping, width, and wide-character handling.}
+
+SCRIPT EVIDENCE (required, consume every field):
+{Paste the image-diff or tui-check JSON.}
+
+USE THE EVIDENCE:
+- Web (image-diff): start from diffRatio and similarityScore, then directly open every screenshot path and inspect every hotspots[] entry (gridX, gridY, x, y, width, height, diffRatio). Explain the visual cause of each flagged region from the pixels and source/content together.
+- TUI (tui-check): inspect maxWidth vs expectedColumns, every overflowLines[] entry, borderMisaligned, and wideCharColumns[].
+
+CHECK:
+1. Does the rendered output match what the user requested: layout, spacing, color, type, alignment?
+2. CJK precision:
+   - Web: natural CJK line breaking for display and body text. Flag oversized headings that create orphaned one-character or final-syllable lines, split Korean/Japanese/Chinese semantic phrases unnaturally, detach labels such as `[Image #1]` from their content, clip baselines/descenders, drop glyphs (tofu), or show font metric mismatch.
+   - TUI: wide-character column drift (CJK cells counted as 1 instead of 2), box-drawing border misalignment, content overflowing past the terminal width.
+
+OUTPUT:
+VERDICT: PASS | REVISE | FAIL
+CONFIDENCE: HIGH | MEDIUM | LOW
+SUMMARY: 1-3 sentences
+EVIDENCE TRACE: each hotspot or overflow line mapped to its visual cause
+FINDINGS: for each, [severity] what is wrong, where (hotspot grid or capture line:col), and the concrete fix
+BLOCKING: items that must be fixed; empty if PASS
+```
+
+## Step 4 - Synthesize one verdict
+
+When both background subagents return, merge them into a single report. Per
+dimension, mark good or bad with evidence. For each bad item, state what is
+wrong, where (file/line, hotspot grid, or capture line), and the concrete fix.
+Call out what is genuinely good so it is not regressed later.
+
+Completion gate: do not declare the UI done until both passes are satisfied, OR
+the remaining gaps are explicitly listed and accepted by the user. A high
+`similarityScore` with an open Pass A finding, for example a faked-image layout
+or a broken feature, is still a FAIL.
+
+```markdown
+# Visual QA - Verdict: GOOD | NEEDS WORK
+
+| Dimension | Pass | Verdict | Evidence |
+|---|---|---|---|
+| Design system real vs faked | A | good/bad | ... |
+| Features work | A | good/bad | ... |
+| Responsive / resize | A | good/bad | ... |
+| Alpha / transparency | A+B | good/bad | ... |
+| Visual fidelity to intent | B | good/bad | ... |
+| CJK precision | B | good/bad | ... |
+
+## Must fix
+[Blocking items, each with location and fix, in priority order]
+
+## Good, keep it
+[Correct aspects that must not regress]
+
+## Completion gate
+[Satisfied, or the exact remaining gaps and who accepted them]
+```
+
+## Reference evidence is not the verdict
+
+The script quantifies pixels and columns. It cannot judge whether the result is
+a real design system, whether features work, or whether intent was met. A 99/100
+`similarityScore` can still hide a pasted-image fake, a broken interaction, or
+clipped CJK descenders. Use the numbers to aim the oracles, then trust the
+synthesized review.
+
+Illustrative output (locked field names):
+
+```json
+{
+  "command": "image-diff",
+  "dimensionsMatch": true,
+  "reference": { "width": 1440, "height": 900 },
+  "actual": { "width": 1440, "height": 900 },
+  "totalPixels": 1296000,
+  "diffPixels": 38880,
+  "diffRatio": 0.03,
+  "similarityScore": 97,
+  "alphaChannelIntact": true,
+  "hotspots": [
+    { "gridX": 2, "gridY": 0, "x": 960, "y": 0, "width": 480, "height": 300, "diffRatio": 0.21 }
+  ],
+  "summary": "97/100 similarity; one hotspot in the top-right header region."
+}
+```
+
+```json
+{
+  "command": "tui-check",
+  "expectedColumns": 80,
+  "lineCount": 24,
+  "lineWidths": [80, 80, 82, 80],
+  "maxWidth": 82,
+  "overflowLines": [ { "line": 3, "width": 82 } ],
+  "borderMisaligned": true,
+  "wideCharColumns": [12, 13],
+  "hasAnsi": false,
+  "summary": "Line 3 overflows 80 cols by 2; borders misaligned at wide-char columns 12-13."
+}
+```

package/plugins/litclaude/skills/visual-qa/scripts/ansi.ts

@@ -0,0 +1,17 @@
+const ESC = String.fromCharCode(0x1b)
+const CSI = String.fromCharCode(0x9b)
+
+// Matches CSI/escape sequences (colors, cursor moves) without embedding raw
+// control characters in the regex source.
+const ANSI_PATTERN = new RegExp(
+	`[${ESC}${CSI}][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]`,
+	"g",
+)
+
+export function stripAnsi(input: string): string {
+	return input.replace(ANSI_PATTERN, "")
+}
+
+export function hasAnsi(input: string): boolean {
+	return stripAnsi(input) !== input
+}

package/plugins/litclaude/skills/visual-qa/scripts/cli.ts

@@ -0,0 +1,96 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { resolve } from "node:path"
+import process from "node:process"
+
+import { diffImages } from "./image-diff.ts"
+import { decodePng } from "./png-decode.ts"
+import { checkTui } from "./tui-grid.ts"
+import type { ImageDiffResult, TuiCheckResult } from "./types.ts"
+
+export class CliError extends Error {
+	readonly name = "CliError"
+}
+
+const DEFAULT_COLUMNS = 80
+const COLS_FLAG = "--cols"
+
+export function runImageDiff(args: readonly string[]): ImageDiffResult {
+	const referencePath = args[0]
+	const actualPath = args[1]
+	if (referencePath === undefined || actualPath === undefined) {
+		throw new CliError("usage: image-diff <reference.png> <actual.png>")
+	}
+	const reference = decodePng(readFileSync(referencePath))
+	const actual = decodePng(readFileSync(actualPath))
+	return diffImages(reference, actual)
+}
+
+function parseColumns(args: readonly string[]): number {
+	for (let index = 0; index < args.length; index++) {
+		const arg = args[index] ?? ""
+		if (arg === COLS_FLAG) {
+			const parsed = Number(args[index + 1])
+			if (!Number.isInteger(parsed) || parsed <= 0) {
+				throw new CliError(`${COLS_FLAG} requires a positive integer`)
+			}
+			return parsed
+		}
+		if (arg.startsWith(`${COLS_FLAG}=`)) {
+			const parsed = Number(arg.slice(COLS_FLAG.length + 1))
+			if (!Number.isInteger(parsed) || parsed <= 0) {
+				throw new CliError(`${COLS_FLAG} requires a positive integer`)
+			}
+			return parsed
+		}
+	}
+	return DEFAULT_COLUMNS
+}
+
+export function runTuiCheck(args: readonly string[]): TuiCheckResult {
+	const capturePath = args[0]
+	if (capturePath === undefined || capturePath.startsWith("--")) {
+		throw new CliError("usage: tui-check <capture.txt> [--cols N]")
+	}
+	const text = readFileSync(capturePath, "utf8")
+	return checkTui(text, parseColumns(args.slice(1)))
+}
+
+export function run(argv: readonly string[]): ImageDiffResult | TuiCheckResult {
+	const command = argv[0]
+	const rest = argv.slice(1)
+	switch (command) {
+		case "image-diff":
+			return runImageDiff(rest)
+		case "tui-check":
+			return runTuiCheck(rest)
+		default:
+			throw new CliError(`unknown command "${command ?? ""}"; expected "image-diff" or "tui-check"`)
+	}
+}
+
+function main(argv: readonly string[]): void {
+	try {
+		const result = run(argv)
+		process.stdout.write(`${JSON.stringify(result, null, 2)}\n`)
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error)
+		process.stderr.write(`visual-qa error: ${message}\n`)
+		process.exitCode = 1
+	}
+}
+
+// Entry guard that works under both bun and Node (`--experimental-strip-types`).
+function isMainModule(): boolean {
+	const entry = process.argv[1]
+	if (entry === undefined) return false
+	try {
+		return resolve(fileURLToPath(import.meta.url)) === resolve(entry)
+	} catch {
+		return false
+	}
+}
+
+if (isMainModule()) {
+	main(process.argv.slice(2))
+}

package/plugins/litclaude/skills/visual-qa/scripts/east-asian-width.ts

@@ -0,0 +1,72 @@
+export interface CodePointRange {
+	readonly start: number
+	readonly end: number
+}
+
+// Combining marks and zero-width code points advance the cursor by 0 columns.
+const ZERO_WIDTH_RANGES: readonly CodePointRange[] = [
+	{ start: 0x0300, end: 0x036f }, // combining diacritical marks
+	{ start: 0x0483, end: 0x0489 }, // combining Cyrillic
+	{ start: 0x0591, end: 0x05bd }, // Hebrew points
+	{ start: 0x0610, end: 0x061a }, // Arabic marks
+	{ start: 0x064b, end: 0x065f }, // Arabic marks
+	{ start: 0x0670, end: 0x0670 }, // Arabic superscript alef
+	{ start: 0x06d6, end: 0x06dc }, // Arabic small high marks
+	{ start: 0x1160, end: 0x11ff }, // Hangul Jamo medial/final (combining)
+	{ start: 0x200b, end: 0x200f }, // zero-width space / directional marks
+	{ start: 0x202a, end: 0x202e }, // bidi embeddings
+	{ start: 0x2060, end: 0x2064 }, // word joiner / invisible operators
+	{ start: 0x20d0, end: 0x20ff }, // combining marks for symbols
+	{ start: 0xfe20, end: 0xfe2f }, // combining half marks
+	{ start: 0xfeff, end: 0xfeff }, // zero-width no-break space (BOM)
+]
+
+// East Asian Wide + Fullwidth code points advance the cursor by 2 columns.
+const WIDE_RANGES: readonly CodePointRange[] = [
+	{ start: 0x1100, end: 0x115f }, // Hangul Jamo (leading consonants)
+	{ start: 0x231a, end: 0x231b }, // watch / hourglass
+	{ start: 0x2e80, end: 0x303e }, // CJK radicals, Kangxi, CJK symbols
+	{ start: 0x3041, end: 0x33ff }, // Kana, Bopo phonetics, CJK compatibility
+	{ start: 0x3400, end: 0x4dbf }, // CJK Unified Ext A
+	{ start: 0x4e00, end: 0x9fff }, // CJK Unified Ideographs
+	{ start: 0xa000, end: 0xa4cf }, // Yi syllables
+	{ start: 0xa960, end: 0xa97f }, // Hangul Jamo Ext-A
+	{ start: 0xac00, end: 0xd7a3 }, // Hangul syllables
+	{ start: 0xf900, end: 0xfaff }, // CJK compatibility ideographs
+	{ start: 0xfe10, end: 0xfe19 }, // vertical forms
+	{ start: 0xfe30, end: 0xfe6f }, // CJK compatibility / small forms
+	{ start: 0xff00, end: 0xff60 }, // fullwidth forms (halfwidth starts at 0xff61)
+	{ start: 0xffe0, end: 0xffe6 }, // fullwidth signs
+	{ start: 0x1b000, end: 0x1b16f }, // Kana supplement / extended
+	{ start: 0x1f200, end: 0x1f2ff }, // enclosed ideographic supplement
+	{ start: 0x1f300, end: 0x1faff }, // emoji and pictographs
+	{ start: 0x20000, end: 0x3fffd }, // CJK Unified Ext B and beyond
+]
+
+function inRanges(codePoint: number, ranges: readonly CodePointRange[]): boolean {
+	for (const range of ranges) {
+		if (codePoint >= range.start && codePoint <= range.end) {
+			return true
+		}
+	}
+	return false
+}
+
+export function charWidth(codePoint: number): 0 | 1 | 2 {
+	if (codePoint === 0) return 0
+	if (codePoint < 0x20) return 0 // C0 control
+	if (codePoint >= 0x7f && codePoint <= 0x9f) return 0 // DEL and C1 control
+	if (inRanges(codePoint, ZERO_WIDTH_RANGES)) return 0
+	if (inRanges(codePoint, WIDE_RANGES)) return 2
+	return 1
+}
+
+export function stringWidth(text: string): number {
+	let total = 0
+	for (const char of text) {
+		const codePoint = char.codePointAt(0)
+		if (codePoint === undefined) continue
+		total += charWidth(codePoint)
+	}
+	return total
+}

package/plugins/litclaude/skills/visual-qa/scripts/image-diff.ts

@@ -0,0 +1,109 @@
+import type { DecodedImage, Hotspot, ImageDiffResult } from "./types.ts"
+
+const GRID_SIZE = 8
+
+function round4(value: number): number {
+	return Math.round(value * 10000) / 10000
+}
+
+function pixelsDiffer(ref: Uint8Array, refOffset: number, act: Uint8Array, actOffset: number): boolean {
+	return (
+		ref[refOffset] !== act[actOffset] ||
+		ref[refOffset + 1] !== act[actOffset + 1] ||
+		ref[refOffset + 2] !== act[actOffset + 2] ||
+		ref[refOffset + 3] !== act[actOffset + 3]
+	)
+}
+
+function buildHotspots(
+	cellDiff: readonly number[],
+	cellTotal: readonly number[],
+	cols: number,
+	rows: number,
+	overlapWidth: number,
+	overlapHeight: number,
+): Hotspot[] {
+	const hotspots: Hotspot[] = []
+	for (let gridY = 0; gridY < rows; gridY++) {
+		for (let gridX = 0; gridX < cols; gridX++) {
+			const index = gridY * cols + gridX
+			const diff = cellDiff[index] ?? 0
+			const total = cellTotal[index] ?? 0
+			if (diff === 0 || total === 0) continue
+			const left = Math.floor((gridX * overlapWidth) / cols)
+			const right = Math.floor(((gridX + 1) * overlapWidth) / cols)
+			const top = Math.floor((gridY * overlapHeight) / rows)
+			const bottom = Math.floor(((gridY + 1) * overlapHeight) / rows)
+			hotspots.push({
+				gridX,
+				gridY,
+				x: left,
+				y: top,
+				width: right - left,
+				height: bottom - top,
+				diffRatio: round4(diff / total),
+			})
+		}
+	}
+	hotspots.sort((a, b) => b.diffRatio - a.diffRatio)
+	return hotspots
+}
+
+function buildSummary(
+	similarityScore: number,
+	diffPixels: number,
+	totalPixels: number,
+	dimensionsMatch: boolean,
+	hotspotCount: number,
+): string {
+	const parts = [`${similarityScore}/100 similarity`, `${diffPixels}/${totalPixels} pixels differ`]
+	if (!dimensionsMatch) parts.push("dimensions differ")
+	if (hotspotCount > 0) parts.push(`${hotspotCount} hotspot region(s)`)
+	return `${parts.join("; ")}.`
+}
+
+export function diffImages(reference: DecodedImage, actual: DecodedImage): ImageDiffResult {
+	const overlapWidth = Math.min(reference.width, actual.width)
+	const overlapHeight = Math.min(reference.height, actual.height)
+	const totalPixels = overlapWidth * overlapHeight
+	const cols = Math.max(1, Math.min(GRID_SIZE, overlapWidth))
+	const rows = Math.max(1, Math.min(GRID_SIZE, overlapHeight))
+	const cellDiff = new Array<number>(cols * rows).fill(0)
+	const cellTotal = new Array<number>(cols * rows).fill(0)
+
+	let diffPixels = 0
+	for (let y = 0; y < overlapHeight; y++) {
+		const cellY = Math.min(rows - 1, Math.floor((y * rows) / overlapHeight))
+		for (let x = 0; x < overlapWidth; x++) {
+			const cellX = Math.min(cols - 1, Math.floor((x * cols) / overlapWidth))
+			const cellIndex = cellY * cols + cellX
+			cellTotal[cellIndex] = (cellTotal[cellIndex] ?? 0) + 1
+			const refOffset = (y * reference.width + x) * 4
+			const actOffset = (y * actual.width + x) * 4
+			if (pixelsDiffer(reference.rgba, refOffset, actual.rgba, actOffset)) {
+				diffPixels++
+				cellDiff[cellIndex] = (cellDiff[cellIndex] ?? 0) + 1
+			}
+		}
+	}
+
+	const diffRatio = totalPixels === 0 ? 0 : diffPixels / totalPixels
+	const similarityScore = Math.round((1 - diffRatio) * 100)
+	const hotspots = buildHotspots(cellDiff, cellTotal, cols, rows, overlapWidth, overlapHeight)
+	const dimensionsMatch = reference.width === actual.width && reference.height === actual.height
+	const alphaChannelIntact = !(reference.hasTransparentPixels && !actual.hasTransparentPixels)
+
+	return {
+		command: "image-diff",
+		dimensionsMatch,
+		reference: { width: reference.width, height: reference.height },
+		actual: { width: actual.width, height: actual.height },
+		totalPixels,
+		diffPixels,
+		diffRatio: round4(diffRatio),
+		similarityScore,
+		alphaChannelIntact,
+		hotspots,
+		summary: buildSummary(similarityScore, diffPixels, totalPixels, dimensionsMatch, hotspots.length),
+	}
+}

package/plugins/litclaude/skills/visual-qa/scripts/png-crc.ts

@@ -0,0 +1,27 @@
+import { Buffer } from "node:buffer"
+
+export const PNG_SIGNATURE: Buffer = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
+
+function buildCrcTable(): Uint32Array {
+	const table = new Uint32Array(256)
+	for (let n = 0; n < 256; n++) {
+		let c = n
+		for (let k = 0; k < 8; k++) {
+			c = (c & 1) === 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1
+		}
+		table[n] = c >>> 0
+	}
+	return table
+}
+
+const CRC_TABLE = buildCrcTable()
+
+export function crc32(data: Buffer): number {
+	let crc = 0xffffffff
+	for (let i = 0; i < data.length; i++) {
+		const byte = data[i] ?? 0
+		const entry = CRC_TABLE[(crc ^ byte) & 0xff] ?? 0
+		crc = entry ^ (crc >>> 8)
+	}
+	return (crc ^ 0xffffffff) >>> 0
+}