菜单
Create an interactive design-preview in a browser tab
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.