skills.rest
Automattic
AutomatticOFFICIAL
Explore all skills by this author →
Website𝕏@automatticengGitHub

match-page

Compare built web pages to source screenshots and fix divergent visual sections.

31|3|Updated Mar 31, 2026
Search Tags:#iteration#design consistency#web design#visual parity#page assessment
One-click install
npx skills add https://github.com/Automattic/data-liberation-agent --skill match-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: match-page
Source: https://github.com/Automattic/data-liberation-agent/tree/main/skills/match-page
Command: npx skills add https://github.com/Automattic/data-liberation-agent --skill match-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

The Skill addresses the challenge of achieving visual parity across web pages, particularly in cases where design inconsistencies occur during reconstruction.

Core Features & Use Cases

  • Visual Parity Assessment: Measures and assesses visual consistency between the built page and the source screenshot.
  • Parity Log Replay: Re-applies previous parity work when reconstructing pages to maintain consistency.
  • Iterative Section Matching: Focuses on divergent sections and applies fixes until visual parity is achieved.
  • Use Case: If a page has been reconstructed and there are design inconsistencies, this Skill can be used to identify and fix those issues, ensuring that the final page matches the original design.

Quick Start

Use the match-page skill to assess the visual parity of the page 'homepage' in the 'example.com' site.

Frequently Asked Questions about match-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I ensure pixel-perfect design consistency when reconstructing a web page from a screenshot?▼

Visual parity assessment compares a built web page against a source screenshot to measure design consistency. It iteratively identifies and fixes divergent sections across visual axes like structure, type-size, alignment, and spacing until the pages match.

How do I fix web design inconsistencies in type-size, alignment, and spacing during page reconstruction?▼

To fix web design inconsistencies, you assess the built page against the source screenshot and focus on divergent sections. You iteratively apply targeted fixes to specific visual axes like type-size, alignment, and spacing until visual parity is achieved.

Can I replay previous visual parity fixes when reconstructing a web page?▼

Yes, you can replay previous visual parity fixes by using a parity-log.json file. This allows the system to re-apply past parity work during page reconstruction, ensuring consistent design output and maintaining previously established visual standards.

Do I need a specific file to maintain design consistency across multiple web pages?▼

Yes, you need a parity-log.json file to maintain design consistency across multiple web pages. This file is required to replay previous parity work and ensure that iterative fixes are tracked and applied consistently during reconstruction.

What is the best way to assess visual parity for an existing web page against its original design?▼

The best way to assess visual parity is to run a visual parity assessment that directly compares the built page to the original source screenshot. This process measures alignment, structure, and spacing differences to pinpoint where divergent sections require iteration.

Related Skills

Explore More Design & Creative Skills→
zinohomezinohome

visual-regression-tester

Implements visual regression testing with screenshot comparison and CI integration using Playwright or Chromatic.

Community
Intermediate
letta-ailetta-ai
134

path-tracing-reverse

Reverse engineer ray-tracing binaries to reconstruct pixel-perfect rendering algorithms.

Official
Advanced
WanxiaJaneYangWanxiaJaneYang

css-layout-helper

Diagnose CSS layout issues and propose fixes with Flexbox or Grid.

Community
Basic
aquariuscookaquariuscook

visual-testing-advanced

Compare screenshots across viewports and browsers to detect visual regressions.

Community
Advanced