Menu
Create a high-fidelity interactive HTML design mockup with live preview
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
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
