Validate that an implemented React or React Native UI faithfully reproduces a reference mockup (HTML+CSS, served prototype, Figma export, or another rendered component set), then update the code to close every gap — by measuring, never eyeballing. Treats the mock as the source of truth and asks (full-comparison and per-screen) before removing working functionality; builds a complete screen/frame inventory and never silently drops a frame; renders both sides; inverts the burden of proof (a visible difference is a defect until a citation proves it intentional); diffs structure first then per-property computed styles; produces a per-screen present/divergent/absent ledger AND a functional-gaps document for newly-added UI that is only visual. For React Native it measures the RENDERED tree — structural/accessibility extraction (axe describe-ui / Maestro hierarchy) plus resolved style props over the Metro CDP connection (rozenite / agent-cdp) — and forces every screen's measurement to disk as artifacts, so a 'match' verdict can never come from a screenshot, a source read, or reasoning (frontier vision models catch under half of fine-grained UI differences); navigation is deep-link-first (xcrun simctl openurl) because a Maestro tap carries a ~15-20s XCUITest startup tax. For a React web target the comparison is symmetric DOM-to-DOM — reference and target are both read via getComputedStyle through one extractor at the same viewport, with the app chrome (sidebar/header/nav) in scope. Generic and framework-agnostic. Merges and replaces ui-fidelity-audit + mockup-align. Adds a mechanical STRUCTURE/LAYOUT differ (structure-diff.mjs — grid/flex/missing-node/order, the class a per-property style diff is blind to), a CONTENT/data differ (content-diff.mjs), a zero-dep visual pixel-overlay (overlay.mjs), a decorative-subtree HTML-to-React converter (capture-subtree.js + to-stylex.mjs — embed pixel-exact or StyleX skeleton with token mapping), a per-section parallel fan-out workflow, and a Storybook visual-regression pattern.
Add the marketplace
/plugin marketplace add DiologIR/diolog-pluginsInstall plugins
/pluginRun these commands in Claude Code to add this plugin to your environment. The marketplace must be added before you can install its plugins.
From Marketplace