メニュー
Generate a beautiful standalone HTML diagram and open it in the browser. Use when visualizing workflows, architectures, systems, or any concept that benefits from a rich visual page.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Create a pull request with conventional commits and a structured description. Supports GitHub and Azure DevOps — platform is auto-detected from the git remote. Use when the user wants to open a PR, commit changes, or submit work for review.
Create a pull request with conventional commits and a structured description. Supports GitHub and Azure DevOps — platform is auto-detected from the git remote. Use when the user wants to open a PR, commit changes, or submit work for review.
Analyze meeting transcripts — extract decisions, action items, and create SSOT documents. Use when processing standup notes, stakeholder reviews, or sprint meetings.
Save valuable insights from the current session to storage. Use when you've discovered decisions, patterns, or gotchas worth remembering across sessions.
Generate comprehensive, production-ready README.md by analyzing codebase with explorer + documenter agents. Use when creating or updating project documentation.
Sync project context to copilot-instructions.md by analyzing codebase patterns and conventions. Use after adding agents, commands, or significant architecture changes.
| name | generate-web-diagram |
| description | Generate a beautiful standalone HTML diagram and open it in the browser. Use when visualizing workflows, architectures, systems, or any concept that benefits from a rich visual page. |
Load the visual-explainer skill, then generate an HTML diagram for: $@
Follow the visual-explainer skill workflow. Read the reference template and CSS patterns before generating. Pick a distinctive aesthetic that fits the content — vary fonts, palette, and layout style from previous diagrams.
If surf CLI is available (which surf), consider generating an AI illustration via surf gemini --generate-image when an image would genuinely enhance the page — a hero banner, conceptual illustration, or educational diagram that Mermaid can't express. Match the image style to the page's palette. Embed as base64 data URI. See css-patterns.md "Generated Images" for container styles. Skip images when the topic is purely structural or data-driven.
Write to ~/.agent/diagrams/ and open the result in the browser.
