This skill independently handles local preview and comparison of the Stitch interface;stitch-ui-guideit continues to be responsible for design expression. Existing exported files can be used directly, with no remote Stitch call or authentication required.
When to use
Build a clickable local comparison console for an existing page: switch the same scenario synchronously, inspect Phone/Pad layout differences, compare light and dark themes, or deliver a copy-and-run review attachment. Do not pass off a shrunken desktop screenshot as a mobile layout. Page production, visual approval, and production run acceptance are recorded 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 the existing specification as the source of truth, and do not create another product requirement. Execute directly when the scope is clear; ask only about missing pages or mutually conflicting contracts.
Step 2: Copy the complete example
Copy the entire complete application directory where this skill assets/device-preview resides to the target output directory; do not copy only the review shell, and do not depend on sibling skills or the original repository. Preserve all relative paths, and retain the source record when replacing project branding. Read as needed the 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's logical viewport unchanged, and only scale the outer display.
Step 4: Start and actually operate
In the copied directory, execute python3 serve.py --port 8872, and open the printed loopback address. Use the unified page, previous/next buttons, theme, and quick selection for each endpoint; then click the in-interface navigation and tabs such as “link address/compressed file” to confirm linkage; turn off synchronization to view each separately, then turn it back on to follow the most recently operated endpoint. Refresh to verify URL restoration, and reload a single endpoint to verify that the latest selection can be replayed.
Step 5: Verify and correct
In an environment that already has Playwright/Chrome, execute 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's 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. If 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 capabilities not yet integrated. Screenshots and clickable demos cannot prove that native application or real backend capabilities are complete.
Operation contract
| Operation | Expected result |
|---|---|
| Top selects page/theme, previous/next page switching | Switch all devices at once |
| Use single-endpoint quick selection when synchronization is on | Propagate to the other endpoint and update all selectors |
| Click internal navigation, import method, or add/get model entry on either endpoint | The other endpoint enters the same scenario, with each layout adapting separately |
| Select a single endpoint after turning off synchronization | The other endpoint maintains its page and theme |
| Turn synchronization back on | Adopt the page and theme of the most recently operated endpoint |
| Refresh or late load on one endpoint | Restore by URL and current selection, without replaying outdated values |
| Page adapter missing | Display failed; reload after fixing. Cannot show already synced |
Syncing includes review scenarios/themes and whitelisted internal navigation, modal toggles, and tabs. Report semantic state through page adapters; never replay arbitrary clicks. Input, credentials, save, import, network requests, and deletion are never forwarded to other devices. URLs only store scenario, theme, and linkage state, not business data. Examples include mock model fetching and source draft import; the demo notice 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 and no script errors.
- Global and per-device linkage, independent comparison, resynchronization, URL restoration, and slow load/reload 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 the model list, manual entry/fetch model, and skill/agent/plugin import is not described as a real service.
- Actual comparison screenshots, execution logs, and known gaps are all traceable; the confirmed baseline was not modified.
Non-applicability and boundaries
This skill only compares against existing trustworthy 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 a screenshot, only visual review is performed; behavioral acceptance requires a runnable page. When there is no source file or source mapping, report the missing items and do not package the built-in examples 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 turn 390 into the available container width.
- Late page overwrites new selection: The load event reads the current expected state; after rapidly 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 identicalness.
- Arbitrary broadcast of user operations: Only broadcast registered page, theme, modal, and tab states; input, submission, or credentials must not be copied; every new internal entry requires an adapter 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 with a temporary directory outside the project; do not point to assets of sibling skills.
Best Practices
Run only trustworthy local prototypes. The existing example uses same-origin iframes for direct calls, and the server only listens on 127.0.0.1; if the port is occupied, change the port rather than killing 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 the 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 and 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 changes and production implementation are recorded separately.
References
- Running, adaptation, and failure recovery
- Complete application instructions
- Source and code verification instructions
- Scenario linkage browser regression
- Model and import full interaction regression
Examples
- Normal preview and independent comparison
- Only screenshots and source are missing
- Slow loading and adapter recovery
Keywords
UI preview, synchronized preview, device comparison, responsive review, interactive preview, synchronized page switching, multi-device comparison, phone, tablet, theme comparison
Stitch input and handoff
First read the existing exported HTML, resource directory, and screen source records, and retain the mapping of project/screen ID, device type, source version, and local files. If there is no HTML, report the gap; only when the user has authorized retrieval, hand it over by skill name to stitch-extract-static-html, and do not automatically install other skills. When there are only screenshots, deliver a visual comparison and clearly state that interaction cannot be checked.
The exported single-screen HTML is adapted according to the static HTML integration method ; an existing clickable prototype is integrated according to the same-origin API method. The attached complete AgentScope case is used to demonstrate the preview method, does not claim to be generated by Stitch, and does not fabricate remote project/screen IDs or receipts. Issues found in review are returned to the existing design process by page ID, and by default no remote generation, editing, uploading, or publishing is invoked.