Menu
Create an interactive design-preview in a browser tab
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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.