| name | visual-match |
| description | Match UI graphics to reference examples (examples/ screenshots and specs). Use when drawing or changing visuals so the result matches the examples without back-and-forth. |
Visual match — Project
Use this skill when implementing or changing UI graphics (layout, grid, colors, strokes, icons) so the result matches the reference examples in examples/ (screenshots, PDFs, specs). For this extension’s third-party UI inspiration (list density, dashboard layout), also use doc/ui-reference/README.md and doc/plan/EDGE_URL_AUTO_REFRESHER_PLAN.md (Reference UI + agent guidance).
When to apply
- Drawing or changing custom graphics (canvas, DOM, native views, or your UI toolkit).
- Changing layout, grid, background color, or palette.
- User says graphics "don't match the examples" or "make it look like the examples."
Reference look
- Background — Per spec or examples (e.g. solid color, contrast).
- Grid / structure — Alignment, spacing, dots or lines per reference.
- Paths / shapes — Stroke width, dot-to-dot or shape rules from examples.
- Colors — Palette from design or examples; one source of truth.
Implementation rules
- Layout — Sizing and scaling so content fits and tap coordinates match (logical space).
- Stroke / line — Width and style per reference; primary visual is the line/shape, not decoration.
- Alignment — Elements start/end on grid points or specified anchors.
- Background — Solid or specified; no unintended gradients unless in examples.
Output
- PASS — Rendered UI matches the reference look.
- FAIL — Wrong proportions, colors, or layout; apply rules above and re-render.
