Community影像github.com

pretty-good-software-org/show-me

以簡潔的圖表、程式碼草圖、API 變更差異和聚焦的 HTML 元件,幫助使用者直觀理解目前主題。

show-me 是什麼?

此技能用於將對話中的抽象概念或複雜邏輯,轉換為易於理解的視覺呈現。它支援多種視覺化形式,包括偽代碼流程、呼叫樹、元件樹、API 差異比較、檔案結構樹,以及 Mermaid 圖表(如流程圖、時序圖、狀態圖等),讓開發者能快速掌握控制流程、架構變更或資料關係。對於過於密集的概念,它也能生成獨立的 HTML 視覺化文件(如圖表或簡報)。該技能主要設計用於終端機環境,並會自動根據畫面寬度調整圖表大小;若渲染環境不支援 Mermaid,則會降級為文字化的呼叫樹或偽代碼形式。其核心原則是「最小足夠視圖」,僅呈現回答當前問題所需的關鍵資訊,避免資訊過載。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/pretty-good-software-org/show-me-skill/tree/HEAD/skills/show-me

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

幫助使用者直觀理解目前對話的主題。略過開場白,保持文字簡潔。選擇能清楚表達核心觀點的最小視圖。

當其他技能或工作流程指定了視圖形式時,直接使用該形式。跳過形式選擇與任何 HTML 元件的選項;將輸出限制在呼叫者要求的範圍與格式內。

  • 以偽代碼展示邏輯或演算法:
on(save)
  if content is unchanged
    return cached result
  write new content
  return fresh result
  • 以呼叫樹展示執行階段控制流程:
submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession
  • 以元件樹展示 UI 結構,包含重要的狀態與模組邊界:
<SessionPage> (apps/example/src/routes/session.tsx)
  useSessionEvents()
  <SessionToolbar>
    <RunSkillButton> (packages/ui)
  • 以 API 差異比較展示匯出的 API 或介面變更,按檔案分組。只包含有變更的匯出符號或簽名,並明確標示新增、刪除與取代:
 internal/api/suggestion.go
-ApplySuggestion(client, prNumber, commentID)
+ApplySuggestion(client, target SuggestionTarget)
+
 internal/api/types.go
 type SuggestionTarget struct {
+  PullRequest int
+  CommentID   int
 }
  • 以淺層檔案樹展示檔案職責或大規模重構:
src/
├── commands/       # 解析使用者動作
├── sessions/       # 掌管 session 狀態
└── transport/      # 發送 API 請求
  • 使用 Mermaid 展示元件互動、控制流程或資料流程。當主題涉及分支工作流程、狀態轉換、領域或資料關係、架構、依賴性或部署拓樸時,請閱讀 Mermaid 圖表類型 並選擇相符的形式。請限制在流程圖、時序圖、狀態圖、類別圖和實體關係圖:這些是終端機渲染器能繪製的類型。將圖表控制在 120 欄寬以內,使用簡短的標籤與少量節點;過寬的圖表將在終端機中以注意提示取代。在將圍欄 Mermaid 顯示為原始文字的介面中,請優先使用呼叫樹或偽代碼形式,並說明圖表已被降級。

    當時間順序的互動過程是重點時,使用時序圖:

sequenceDiagram
    participant User
    participant UI
    participant Daemon
    User->>UI: choose command
    UI->>Daemon: send expanded prompt
    Daemon-->>UI: stream result
  • 當重點在於哪些地方改變,且周圍的形式已經存在時,使用 diff。比對差異的形式應符合主題。

對於元件變更:

 <SessionPage>
   useSessionEvents()
   <SessionToolbar>
+    <RunSkillButton />
   <SessionTimeline>
+    <SkillResultCard />

對於檔案佈局變更:

 src/
 ├── commands/
+│   └── show-me.ts       # 展開斜線命令
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

對於呼叫樹或呼叫堆疊變更:

 submitForm
   createSession
     persistPrompt
+    expandSkillMention
     launchAgent
-  navigateToSession
+  navigateToSession
+    subscribeToEvents

對於狀態或控制流程變更:

 on(save)
-  write content
+  if content is unchanged
+    return cached result
+  write new content
+  invalidate cache
  • 當大部分內容都是新的、省略上下文會隱藏所有權或順序,或者使用者需要可複製的目標形式時,展示整個區塊:
function expandSkill(command: string): string {
  const skillName = command.slice(1)
  return `use the ${skillName} skill`
}
  • 對於 Mermaid 難以呈現的視覺 UI、佈局、狀態比較或過於密集的概念,請撰寫一個聚焦的 HTML 檔案——可以是圖表、資訊圖表或簡短的投影片,選擇最適合該重點的形式。配合產品的顏色、字體、間距與元件;使用真實的標籤與資料;支援桌面與行動裝置。在本地終端機使用平台開啟器打開;在託管介面上將其發布為元件並提供連結:
Bash(open path/to/show-me-{description}.html)

指導原則

將每個視覺元素緊鄰在其支援的簡短文字旁邊。只保留回答使用者當前問題或解決當前討論點所需的呼叫、檔案、屬性、狀態與邊界。

你可以使用其中一種,也可以使用多種,但不太可能需要全部。請自行判斷,不要讓使用者感到資訊過載。

相關技能