Menu
Create an interactive design-preview in a browser tab
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when adding a new LLM/model to stagewise model catalogs, provider routing, validation, docs, or showcase UI.
Complete guide for the Figma plugin — REST API access, real-time selection monitoring via CDP, and the figma-app interactive UI. Read this IMMEDIATELY when the user asks to work with Figma.
Best practices for using the stagewise built-in JavaScript sandbox. Explains how to access APIs for browser debugging/interaction, use external dependencies, file system access, running mini-apps, etc.
Guide for building custom interactive web apps ("mini apps") displayed in browser tabs — scaffolding, iframe constraints, bidirectional messaging with the sandbox, and iteration workflows.
How stagewise's agent history compression pipeline works — boundary selection, recency bias, chained compressions, and the SQLite-backed test harness for replaying real compressions in LLM playgrounds. Use when debugging, tuning, or extending history compression, when investigating context-window overflow, or when the user wants to probe compression quality against real chat histories.
Implement the most recent plan
| name | Preview |
| description | Create an interactive design-preview in a browser tab |
| user-invocable | true |
| agent-invocable | false |
Build a mini-app to fulfill the request. Use the apps/ directory and API.openApp(appId, { target: 'tab', title: 'Readable preview title' }) as documented in the Application Environment section.
apps/{appId}/index.html (+ optional styles.css, script.js).stagewise://internal/preview/{appId} page, so use responsive layouts that work from narrow to full-width viewports.await API.openApp(appId, { target: 'tab', title: 'Readable preview title' }). The title is shown in the tab breadcrumbs. The returned { tabId } can be used with API.sendCDP() if the preview needs inspection.multiEdit, overwriteFile) for edits, then call API.openApp(appId, { target: 'tab', title: 'Readable preview title' }) again to open the refreshed preview.index.html per app. Sibling assets resolve via relative paths (./styles.css).target: 'tab'.API.sendMessage / API.onMessage only when bidirectional communication is needed.