Preview

Agent Skills › mereyabdenbekuly-ctrl/clodex-ide › Preview

Preview

GitHub

用于在浏览器标签页中创建交互式设计预览的迷你应用。通过构建自包含HTML，使用API.openApp以tab模式打开响应式页面，支持迭代编辑与CDP调试，禁止在聊天窗口直接展示。

apps/browser/bundled/skills/preview/SKILL.md mereyabdenbekuly-ctrl/clodex-ide

触发场景

用户请求可视化设计预览需要生成可交互的HTML演示前端组件或页面的即时效果验证

安装

npx skills add mereyabdenbekuly-ctrl/clodex-ide --skill Preview -g -y

更多选项

非标准路径

npx skills add https://github.com/mereyabdenbekuly-ctrl/clodex-ide/tree/main/apps/browser/bundled/skills/preview -g -y

不安装直接使用

npx skills use mereyabdenbekuly-ctrl/clodex-ide@Preview

指定 Agent (Claude Code)

npx skills add mereyabdenbekuly-ctrl/clodex-ide --skill Preview -a claude-code -g -y

安装 repo 全部 skill

npx skills add mereyabdenbekuly-ctrl/clodex-ide --all -g -y

预览 repo 内 skill

npx skills add mereyabdenbekuly-ctrl/clodex-ide --list

SKILL.md

Frontmatter

{
    "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.

Workflow

Scaffold — create apps/{appId}/index.html (+ optional styles.css, script.js).
Design for a full browser tab — the preview opens on an internal clodex://internal/preview/{appId} page, so use responsive layouts that work from narrow to full-width viewports.
Open in tab — call 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.
Iterate — use file tools (multiEdit, overwriteFile) for edits, then call API.openApp(appId, { target: 'tab', title: 'Readable preview title' }) again to open the refreshed preview.

Rules

One index.html per app. Sibling assets resolve via relative paths (./styles.css).
Prefer self-contained HTML (inline or sibling files) — no external build step.
Do not open preview apps in the chat. Use target: 'tab'.
Use API.sendMessage / API.onMessage only when bidirectional communication is needed.