메뉴
Visual regression testing skill. Compares HTML documents across pixel, structure, and computed CSS layers. Use when verifying a component change didn't break appearance, comparing overview pages to reference preview HTML, or validating cross-DS equivalence. Writes a .test.ts file and runs vitest.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Infer a design system's tokens + voice from a brand reference (screenshots or a URL) — vision-assisted. Use for /mds:system:create --mode extract, feeding the design-system-author skill.
Reason about color on-system — pick/adjust accent, surfaces, and status colors within a design system's palette, check contrast/accessibility, and propose token changes (not raw hex). Adapted from open-design's color-expert. Use for color decisions during build, review, or system edits.
Build a reusable, on-system React+Tailwind component from an intent. Use when creating or editing a component in emdesign. Composes design-system primitives from "@ds", references token roles only, emits a CSF story, and feeds the verify loop.
Author or maintain a design system's DESIGN.md + tokens.css (the contract). Use when fixing the SYSTEM rather than a component — adding tokens, tightening anti-patterns, or capturing visual rules. Adapted from open-design's design-md (Google Labs / Stitch).
Designer-who-codes visual audit + fix. Use to tighten a component before shipping — run the four-source critique, then make atomic, on-system fixes with before/after screenshots. Adapted from open-design's design-review (gstack) to emdesign's code-first loop.
Create or update a design system to the emdesign quality bar — author the 9-section DESIGN.md + tokens.css + base primitives. Use for the System flow (/mds:system:create | :update). Knows the four sources: brief, blank, import, extract.
SOC 직업 분류 기준
| name | test-visual |
| description | Visual regression testing skill. Compares HTML documents across pixel, structure, and computed CSS layers. Use when verifying a component change didn't break appearance, comparing overview pages to reference preview HTML, or validating cross-DS equivalence. Writes a .test.ts file and runs vitest. |
Visual testing compares two HTML documents across three layers: pixel (via Playwright), DOM structure, and computed CSS. The @emdesign/visual-diff engine powers the comparison — pure JS for structure, Playwright for full pixel rendering.
| Function | Async? | What it does |
|---|---|---|
checkVisualDiff(htmlA, htmlB) | Yes | Compare two HTML strings, return similarity (0-1) + changed regions |
assertVisualSimilarity(htmlA, htmlB, threshold) | Yes | Throw if similarity < threshold (default 0.98) |
assertDomSnapshotMatches(actual, expected) | No | Throw if pretty-printed DOM structure differs |
checkDiff(paths, id1, id2) | No | Compare token declarations between two design systems |
Use skills/test-engineering/test-scenarios/visual-regression.ts for before/after comparison.
| Context | Threshold | Rationale |
|---|---|---|
| HTML structural comparison | 0.95 | Structure may shift slightly across render contexts |
| Pixel comparison (same browser) | 0.98 | Minimal variance expected |
| Cross-DS comparison | 0.85 | Different systems have different visual output |
| CI gate | 0.98 | Strict — prevents any unintended change |
When importing a design system, compare the generated React overview page against the original reference preview:
Template: skills/test-engineering/test-scenarios/overview-vs-preview.ts
1. checkDiff(paths, 'imported-ds', 'referenced-ds') — token equivalence
2. checkVisualDiff(previewHtml, overviewHtml) — visual similarity (threshold 0.85)
npx vitest run src/__tests__/visual-<Name>.test.ts --reporter=json