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
Guide for building custom interactive web apps ("mini apps") displayed in browser tabs — scaffolding, iframe constraints, bidirectional messaging with the sandbox, and iteration workflows.
Review a change against release gates, rollback safety, validation evidence, and operational risk.
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.
Complete guide for the GitHub plugin — REST API access for repositories, issues, pull requests, actions, releases, and search using a GitHub Personal Access Token.
Best practices for using the clodex built-in JavaScript sandbox. Explains how to access APIs for browser debugging/interaction, use external dependencies, file system access, running mini-apps, etc.
Use Alibaba Open Code Review (`ocr`) to review git diffs, staged changes, branches, or scan a workspace, then summarize findings and optionally fix high-confidence issues.
| 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).clodex://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.