メニュー
Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table).
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Decide how elaborate to build something (simple vs. robust) and return a concrete, PoC-shaped proposal at that level — not over- or under-engineered, but right-sized. Use whenever someone is building something and the investment level is unclear: "quick or proper?", "MVP vs. real product", "is this over-engineering?", "how should I approach X?", "quick script vs. robust system", "how much architecture?", "how much do I build here?". Fires even without "poc" or "right-size" — any time effort and complexity of what to build are being weighed.
Decide how elaborate to build something (simple vs. robust) and return a concrete, PoC-shaped proposal at that level — not over- or under-engineered, but right-sized. Use whenever someone is building something and the investment level is unclear: "quick or proper?", "MVP vs. real product", "is this over-engineering?", "how should I approach X?", "quick script vs. robust system", "how much architecture?", "how much do I build here?". Fires even without "poc" or "right-size" — any time effort and complexity of what to build are being weighed.
Trace git history of specific code — find when functions, patterns, or files were added, modified, or removed, and explain the intent behind each change.
Turn code changes into a single-file HTML code review report that pairs the diff with context a diff can't show — design decisions, rejected alternatives, tradeoffs, unfinished work — plus prioritized review points. Use when preparing for review after finishing a sizable change, refactor, or feature, or whenever the user asks for a review report, change report, or an HTML summary of their changes.
Turn code, specs, a PR, or the current conversation into a QA test-case list a non-developer can read and run, exported as CSV, a shareable HTML report, or both. Trigger when the user wants QA test cases, a test plan, a QA checklist, or a test-case CSV/HTML (e.g. "write test cases for this", "make a QA list"). Output uses behavior-and-scenario language, never code symbols like function names or file paths. Not for writing or running automated test code (pytest/jest), code review, or test-strategy docs.
Render an interactive HTML board for the user to pick among multiple comparable options side-by-side at once — engineering trade-offs, copy audits, action-item triage, architecture decisions, policy calls. Returns the picks (and optional hold/note flags) as a JSON file the agent can apply.
| name | html-visual |
| version | 0.0.1 |
| category | design-frontend |
| description | Generate an interactive single-file HTML visualization (mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, table). |
| argument-hint | [type] <content> |
$ARGUMENTS
Visualize the user's request as an interactive single HTML file.
First, read references/common-rules.md to review common rules.
Determine the type from the first argument ($0).
| Argument | Type | Filename Pattern |
|---|---|---|
mockup | UI mockup (high-fidelity) | mockup-{name}.html |
wireframe | Wireframe (low-fidelity, hand-drawn style) | wireframe-{name}.html |
erd | ERD | erd-{name}.html |
flow | Flowchart / Sequence diagram | flow-{name}.html |
chart | Data chart | chart-{name}.html |
slides | Presentation | slides-{name}.html |
arch | Architecture diagram | arch-{name}.html |
dashboard | Composite dashboard | dashboard-{name}.html |
timeline | Timeline / Gantt chart | timeline-{name}.html |
mindmap | Mindmap | mindmap-{name}.html |
kanban | Kanban board | kanban-{name}.html |
table | Interactive data table | table-{name}.html |
No match: Infer the type from the request content. If unable to infer, ask the user.
When inferred, use visual-{name}.html as the filename.
{name} rule: Extract the core noun from the request and convert to kebab-case. e.g., "user login form" → login-form, "payment flow" → payment-flow.
/html-visual erd schema.prisma → Analyze the Prisma schema to auto-generate ERDreferences/common-rules.md. Review common principles, aesthetics, CDN, and error prevention rules.references/html-boilerplate.md. Start from the base HTML template.open {filename}.