Adopt the shared shell in any framework
Step 1: copy site-shell/tokens.css and site-shell/shell.css into your own artifact (e.g. assets/al-tokens.css, assets/al-shell.css) and add class="al-shell" to the root. Never reference a central CDN: a shared CSS outage must not take down every site.
Step 2: call createUrlHelper({basePath, siteOrigin, siteId}) from site-shell/url.ts (or the zero-dependency runtime assets-src/al-url.mjs) for every link, asset, API prefix and health path. For subpath hosting re-run npm run build:basepath and confirm the output contains /sandbox/<site>/assets/ rather than a hardcoded /assets/.
Step 3: follow site-shell/header-footer.html for the 64px header (48px for canvas), breadcrumbs, title + purpose + local/cloud tag, work area, at most 3 related actions and the unified footer. Every input needs a visible <label>; put errors under the field and announce status with aria-live="polite".
Step 4: analytics is only window.ALAnalytics?.emit(name, fields). Events are limited to tool_view / tool_start / tool_success / tool_error / result_download / result_copy / related_click and fields to the whitelist. Removing the analytics script must not stop the workspace from producing results.
Step 5: use reference/a-file.html, reference/b-split.html and reference/c-canvas.html for the empty / busy / success / error (plus cancelled) states. Real capability belongs to each project; this guide claims no browser-width or device verification.