A local coding agent needs a concrete way to prepare a faithful, adjustable preview of an app component. This adds a portable `building-app-previews` skill, dependency-free number/colour helpers, and a tested local example that imports the illustrative app’s actual component, children, theme, font and asset.

The example stays outside the production client. Merging this does not add a decision card to Chopin. The MCP request/result contract, production preview bridge, shared drafts and durable Save remain separate integration work.

## What the agent receives

- A copyable skill folder, target-app guidance, React error handling and reporting instructions. - Validated complete snapshots, immutable baselines, serialized render callbacks and explicit failures. - A runnable example, source comparison and browser evidence.

## Real local UI

The wide inspector controls spacing and accent; Show current compares with the source baseline while held. Copy/Download values are local output.


At 390px, the same controls sit below the preview.


## Independent skill trial

A fresh agent used only the installed skill and a second raw app component requiring a provider. Its built baseline matched the source in wide/narrow Chromium; the app source and copied helpers were unchanged. Parent browser checks verified both controls, baseline comparison/reset and all 11 served resource checksums. The trial uses local same-origin frames; the primary example separately tests the opaque sandbox boundary.


## Integration boundary


Review locally with `bun install --frozen-lockfile` and `bun run preview-toolkit:dev`, then open http://127.0.0.1:8810. Run the dedicated database-free suite with `bun run preview-toolkit:test`.

## Validation

The repair head is `c22b17e9f861c8fc30b5b15f103f817dfec38d85`, merged with main at `b28882d2`. It confines the example server's decoded resource paths under `.built` on Windows and accepts valid decimal steps above nonzero minima while rejecting off-grid values. Main's build and production-exclusion checks remain in CI alongside the dedicated toolkit browser suite.

- Local: frozen install; 24 focused helper/path tests (119 assertions); 14 toolkit Chromium cases across wide and narrow layouts; full TypeScript, format/lint/token/design checks; production build; and preview exclusion across 429 built JS/CSS assets all passed. - The local toolkit browser run used reserved loopback ports 8850/8851 through temporary substitutions, then restored the source. GitHub CI uses the committed example ports. - Exact-head [GitHub CI](https://github.com/githubnext/chopin/actions/runs/37928912904) passed: 4,243 unit tests (3 skipped), 76 PostgreSQL tests, 14 toolkit Chromium cases, 477 application E2E cases (4 skipped), 14 design cases, 9 diagram cases (1 skipped), production build/exclusion, and container build.

The Windows path regression exercised POSIX, Windows drive and UNC rules through `node:path` on macOS; it did not run a native Windows HTTP server. The independent provider-dependent skill trial above remains prior authoring evidence. This local harness is not production hosting certification. A separate credential-free preview site, private artifact delivery, and the production bridge remain gates. No deployment or merge is requested.

The preview deployment for **chopin** is ready. 🟢

[Open app](http://416-chopin.githubnext.com) | [Open Build Logs](https://next-appserver.tail49836a.ts.net/project/l9buznc9ua1if0vflxrjwajs/environment/lxqsvczv19eopxk29vfb46mj/application/hb85gdd9mwqqlfwcteflvpbj/deployment/evm3hkcpjpwpctex1uplaet3) | [Open Application Logs](https://next-appserver.tail49836a.ts.net/project/l9buznc9ua1if0vflxrjwajs/environment/lxqsvczv19eopxk29vfb46mj/application/hb85gdd9mwqqlfwcteflvpbj/logs)

Last updated at: 2026-10-09 12:22:25 CET