lanhu-verify-parity

name	lanhu-verify-parity
description	Verify visual, interaction, and implementation parity for Lanhu design restoration. Use after generating a baseline or implementing Lanhu design code to check schema fidelity, preview PNG match, local asset usage, styling completeness, real control behavior, and framework adaptation risks.

Verify Lanhu Parity

Use this skill to validate that restored UI code still follows Lanhu's schema and visible preview. It is useful both after baseline generation and after target-framework implementation.

99% Gate

For Lanhu baseline outputs, run the automated verifier and treat 99% visual match as the default pass threshold:

python <plugin-root>/scripts/verify_lanhu.py \
  --input-dir "$OUTPUT_DIR" \
  --threshold 99 \
  --require-interactions

The verifier renders restore/index.html, captures a screenshot, compares it against the Lanhu preview PNG, writes verify/verify-report.json, and exits non-zero below the configured threshold.

Validation Inputs

Use all available inputs:

• .schema.json for authoritative design values
• .png preview for visible-frame composition
• .tokens.txt for supplemental complex-property checks
• .image_mapping.json and assets/slices/ for image localization
• restore/parity-report.json when an interactive baseline exists, especially interaction_contracts and component_candidates
• Target app source files and rendered app screenshots when implementation is complete

Verification Checklist

Check these before finalizing:

• Fixed dimensions remain fixed where the schema requires them.
• Absolute positions, flex directions, gaps, padding, margins, and alignment match the schema.
• Clipping and overflow behavior matches the visible design.
• Text content, font family, size, weight, line-height, alignment, and color are restored.
• Fills preserve exact rgba() values, opacity, gradients, images, and blend-sensitive wrappers.
• Borders, non-uniform radii, multiple shadows, inset shadows, and opacity are complete.
• Local assets render and no Lanhu CDN URL remains in app code.
• Visible elements in the preview PNG exist in the implementation.
• Screenshot-based visual_match_percent is at least 99% unless the user explicitly accepts a lower target for a non-overlay, framework-native rebuild.
• Buttons, links, inputs, tabs, toggles, selects, and navigation affordances are real controls, not inert decorative layers.
• Focus states, selected states, toggled states, opened/closed states, and form input updates are observable where the design implies them.
• Each relevant interaction_contracts item has a matching implementation behavior or a documented reason it is out of scope.
• Hidden layers, alternate states, and covered screens are skipped unless the user requested them.
• Components are neither under-split nor over-split; compare extracted components with component_candidates and prefer semantic or repeated boundaries.
• Project conventions from DESIGN.md, local components, or existing styling patterns are followed.

Rendered-App Checks

When the target project can run locally, start its dev server and inspect the implemented route or component in a browser. Use screenshots to check:

• No overlapping text or controls.
• No cropped text unless the design clips it.
• Images are visible at expected sizes.
• Clicking or typing into visible controls changes state, navigates locally, opens the expected panel, or otherwise performs the intended project behavior.
• Tabs, radios, segmented controls, selects, dialogs, and dismiss actions update grouped or open/closed state consistently.
• Mobile or responsive behavior only changes when the target platform requires it or the user asked for it.

For static HTML outputs, a local file or simple HTTP server is enough. For framework apps, use the project's existing dev command and available test scripts.

Error Recovery

If a mismatch appears:

1. Identify whether the source of truth is schema, official reference code, tokens, preview PNG, or project convention.
2. Fix the smallest affected area instead of rebuilding the full screen.
3. Re-check the same mismatch after the fix.
4. Report intentional adaptations clearly, including the platform reason.

Final Report

Summarize:

• What was implemented or verified.
• Which checks ran.
• Which interaction_contracts and component_candidates were covered.
• Any known deltas from the Lanhu design.
• Any user-visible limitations, such as unavailable fonts or platform-specific substitutions.