ui-design-preview

UI Design Preview

This skill independently handles preview and comparison.ui-design-visualContinue to handle page production,ui-design-reviewhandle formal design review; do not regenerate confirmed pages for preview tasks.

When to use

Build a clickable local comparison console for existing pages: switch the same scenario in sync, inspect Phone/Pad layout differences, compare light and dark themes, or deliver a copy-and-run review attachment. Do not shrink a desktop screenshot and pass it off as a mobile layout. Record page production, visual approval, and production run acceptance separately.

How to use · Workflow

Step 1: Confirm inputs

Read the current task's page ID, confirmed design, viewport, theme, source files, and output location. Protect existing modifications; continue to use existing specifications as the source of truth and do not create another product requirements document. Execute directly when the scope is clear; ask only when pages are missing or contracts conflict with each other.

Step 2: Copy the complete example

Copy the entire complete application directory where this skill's assets/device-preview is located to the target output directory; do not copy only the review shell, and do not depend on sibling skills or the original repository. Keep all relative paths, and retain source records when replacing project branding. Read as needed run and adaptation contract。

Step 3: Map the same scenario

In the copy's review.js maintain the page directory and device sizes, and implement the scenario and theme adapters on the page side. The default examples are Phone 390×884 and Pad 768×1024; add Desktop 1280×1024 only when the user requests it and a corresponding page exists. Keep the iframe logical viewport unchanged and only scale the outer presentation.

Step 4: Start and actually operate

In the copied directory, run python3 serve.py --port 8872, and open the printed loopback address. Use the unified page, previous/next buttons, theme, and per-device quick selection; then click the in-interface navigation and tabs such as "link address/compressed file" to confirm linkage; turn off sync to view each side separately, then turn it back on to follow the most recently operated side. Refresh to verify URL restoration, and reload a single side to verify the latest selection can be replayed.

Step 5: Verify and correct

In an environment that already has Playwright/Chrome, run python3 verify_review.py and python3 verify_ui.py. The former starts a temporary service and checks review linkage, while the latter covers the complete case business interactions. After actually integrating a new project, replace the case selectors and assertions, then run again; do not reuse the old example's passing results. When the browser/dependencies are missing, report as unverified and do not silently install.

Step 6: Deliver

Provide the preview entry point, complete directory, page/device mapping, input source version, actual screenshots, and inspection results; list missing scenarios, erroneous resources, and unintegrated capabilities. Screenshots and clickable demos cannot prove that native app or real backend capabilities have been completed.

Operation contract

Operation	Expected result
Select page/theme at the top, switch pages forward/back	Switch all devices at once
Use single-side quick selection when sync is on	Propagate to the other side and update all selectors
Click internal navigation, import method, or add/get model entry on either side	The other side enters the same scenario, with layouts adapted separately
Select a single side after turning off sync	The other side keeps its page and theme
Turn sync back on	Adopt the page and theme of the most recently operated side
Refresh or one side loads late	Restore according to the URL and current selection, without replaying stale values
Page adapter missing	Display failed; reload after fixing; cannot display as synced

Synchronization includes review scenarios/themes and whitelisted internal navigation, popup toggles, and tabs. Report semantic state through the page adapter; arbitrary clicks must not be replayed. Inputs, keys, saves, imports, network requests, and deletions are never forwarded to other devices. URLs store only scenarios, themes, and linkage state, not business data. Examples include simulated model fetching and source draft import, and the demo description must be retained.

Validation checklist

After copying the complete directory to a temporary directory outside the project, both the page and local SVG load with no 404s or script errors.
Global and single-end linkage, independent comparison, resynchronization, URL restoration, and slow loading/reloading all execute per contract.
The iframe logical width matches the specified device; a narrow review window only changes the display scale, with no horizontal page overflow.
The demo scope of model lists, manually entered/fetched models, and skill/agent/plugin imports is not presented as a real service.
Actual comparison screenshots, execution logs, and known gaps are all traceable; the confirmed baseline has not been modified.

Non-applicability and boundaries

This skill only compares against existing trusted HTML or interactive prototypes; it is not responsible for inventing designs, remote generation, deployment/release, or real model/package installation. When the only input is screenshots, only visual review is performed; behavioral acceptance requires a runnable page. When there are no source files or source mappings, report the missing items and do not package the built-in cases as user project results.

Gotchas

Logical size replaced by scaling: Check innerWidth inside the iframe; CSS transform only affects the outer display and must not change 390 to a usable container width.
Late page overrides new selection: The load event reads the current expected state; after quickly switching through three pages, the last page must still take effect.
Different layouts on the two ends misjudged: The same scenario using step-by-step back navigation on phone and master-detail split view on Pad is a reasonable difference; compare semantics and reachable operations, not pixel identity.
Arbitrarily broadcasting user operations: Broadcast only registered page, theme, popup, and tab states; do not replicate inputs, submissions, or credentials; every new internal entry point requires adaptation and actual click verification.
Example verification passed off as actual verification: After integrating a new page, replace the assertions and rerun; retain the Stitch source ID and do not fabricate remote receipts.
Missing files after single-skill installation: Copy the complete internal resources of this skill and check in a temporary directory outside the project; do not point to a sibling skill's assets.

Best Practices

Run only trusted local prototypes. The existing example uses same-origin iframes with direct invocation, and the server listens only on 127.0.0.1; if the port is occupied, change ports and do not kill unknown services. Cross-origin pages cannot be integrated by disabling browser security policies; if a message bridge is truly needed, explicitly verify origin, source, protocol version, and data whitelist. Static screenshots can only compare visuals, not verify interactions. For single-end 404s, missing resources, or adapter failures, fix the source mapping first; do not blindly regenerate the interface.

Output contract

Deliver preview_url、source_directory, scenario/device/theme list, source version or SHA256, screenshots, actual execution checks, failed/skipped items, and next steps. Checks not executed are recorded as NOT_VERIFIED; the existence of complete code does not equal completed acceptance. Prototype modifications and production implementations are recorded separately.

References

Examples

Keywords

UI preview, synchronized preview, device comparison, responsive review, interactive preview, synchronized page switching, multi-device comparison, phone, tablet, theme comparison