菜单
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.
