Match
This skill rebuilds something the user pointed at in another app, site or design. It works from the real source and its measured values, not from memory of how it looks.
One to one means exact values
When the user says "one to one", "exact" or "like this", every value comes from the reference. A guessed value is a finding. When the user says "inspired by", carry the concept and use the project's own tokens.
Use it whenever a message names an app, a URL, a screenshot, a design file or a design reference library. Building with the project's parts belongs to reuse. Checking the result runs in verify.
1. Open the real source
Open the reference itself: the live page, the installed app, the design file or the screenshot. Rebuilding from memory is match-inspect-the-source. When the reference is a native or desktop app, look at that app, not its website. Judging a desktop app by its marketing page is match-same-platform.
2. Read the values
Read computed styles, design tokens or measurements from the source. Write down sizes, spacing, radius, colours, type, durations and easing. A radius chosen by eye is match-read-computed-values.
3. Inventory the states
List every state the reference has: hover, pressed, focus, open, empty, loading, error, selected and disabled. Then list its transitions. Rebuilding the resting state alone is match-inventory-states.
4. Copy the named part
Rebuild the part the user named and nothing around it. Asked for the sidebar, copying the whole layout is match-copy-the-named-part. Carry the idea, not the brand. Their logo, product names and colours stay behind unless the user asked for them. That is match-concept-not-brand.
5. Compare side by side
Put the reference and the rebuild next to each other at the same size and in the same state. Name every difference left. "Looks close" with no comparison is match-side-by-side.
Capture both in every state from step 3 at one size and one device scale factor. Copy compare.html to .match/<part>/index.html, an ignored folder and never the source tree. Write compare.js beside it in the shape its header comment shows, with captures in img/, then open it.
The compare page ships with the skill, so write data only. A page with its own markup or styles is match-shipped-compare. Mark each value Match, Differs or Not Verified. The user sends what is left back with Copy Differences.
The pair
Every check is a pair. The broken line sits beside the line that replaces it.
| Rule | Broken | Replacement |
|---|---|---|
match-inspect-the-source |
A menu rebuilt from memory | The live menu opened and inspected |
match-same-platform |
A desktop app judged by its website | The installed app opened |
match-read-computed-values |
border-radius: 8px by eye |
The 6px read from computed styles |
match-inventory-states |
The resting state only | Hover, pressed, open, empty and error rebuilt |
match-copy-the-named-part |
The whole layout copied for "the sidebar" | The sidebar only |
match-concept-not-brand |
Their logo and accent colour shipped | The pattern in the project's tokens |
match-side-by-side |
"Looks close" | Both at one size, differences listed |
match-shipped-compare |
A compare page written from scratch | compare.html copied, only compare.js written |
Reporting
Severity. HIGH is a rebuild made without opening the source, or a missing state the user named. MEDIUM is a guessed value under "one to one", a part copied beyond the ask or a hand-written compare page. LOW is a remaining difference that was found and named.
Format. One finding per root cause:
file:line - [rule-id] what is wrong
Then a Rule | Count | Severity summary. Block when any HIGH remains, Approve otherwise. Mark every value you could not read from the source as Not verified.