메뉴
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
