メニュー
Create a high-fidelity interactive HTML design mockup with live preview
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Cut a Bobbit release — preflight checks, version bump, signed tag (CI publishes the root to npm via OIDC on tag push), optional binary sub-packages, GitHub release with generated notes.
Bring up a like-for-like PR Walkthrough panel preview using the exact pack source and Bobbit theme bridge
Pull diagnostics out of the running web client (env, viewport/safe-area, performance, app state) and debug hard-to-inspect mobile / installed-PWA layout bugs
Build an interactive HTML UI in the live preview panel using Bobbit's design system
Build an interactive HTML UI in the live preview panel using Bobbit's design system
Stand up an ephemeral test environment and drive browser-based QA testing scenarios
| name | mockup |
| description | Create a high-fidelity interactive HTML design mockup with live preview |
| argument-hint | <description of what to mock up> |
| allowed-tools | read, grep, find, ls, write, edit, preview_open, bash |
You are creating a high-fidelity interactive HTML design mockup for: $ARGUMENTS
Use the live preview panel by default with preview_open(html=...). Repeated identical preview content may dedupe by content hash and select/update the existing live preview tab; change the content when a distinct restorable mockup is needed.
Use file-backed previews only for existing or reusable HTML artifacts: call preview_open(file="/absolute/path/to/file.html") and declare sibling assets with assets or manifest. Do not write and preview the same mockup through both the inline file-render surface and the live preview surface.
Follow the full design mockup guide below.
@docs/design-mockups.md
