Initial commit

commands/explain.md

@@ -0,0 +1,98 @@
+---
+description: 完整解釋技術概念、架構設計或流程
+model: claude-sonnet-4-5
+---
+
+# 視覺化優先解釋模式
+
+當我請你解釋技術概念、架構設計或流程時，請使用「視覺化優先」的解釋方式：
+
+1. 不使用程式碼（除非我明確要求）
+2. 大量使用圖表、流程圖、表格來輔助說明
+3. 從高階概念逐步深入細節
+4. 用對比方式展示改進（現況 vs 建議）
+5. 提供實際案例和場景
+
+請按照以下結構組織回答：
+
+## 一、核心概念總覽
+
+- 用一段話說明本質
+- 用簡單的圖表展示全貌
+
+## 二、現況分析（如適用）
+
+- 目前的做法/問題
+- 用圖表呈現現有架構
+
+## 三、解決方案/概念詳解
+
+- 核心想法的視覺化呈現
+- 各組件關係圖
+- 資料/流程走向
+
+## 四、具體案例
+
+- 用時間軸或流程圖展示實際運作
+- 標註關鍵決策點
+
+## 五、優劣對比
+
+- 用表格或對比圖展示優缺點
+- 說明適用場景
+
+## 六、實施建議
+
+- 分階段實施圖
+- 風險與注意事項
+
+【視覺化工具】
+優先使用這些方式呈現：
+
+1. **表格（最穩定）**：適合中文內容對比
+   ```
+   ┌──────┬──────┬──────┐
+   │ 標題 │ 標題 │ 標題 │
+   ├──────┼──────┼──────┤
+   │ 內容 │ 內容 │ 內容 │
+   └──────┴──────┴──────┘
+   ```
+
+2. **層級結構**：適合流程說明
+   ```
+   主題
+   ├─ 子項目一
+   │  └─ 細節
+   └─ 子項目二
+      └─ 細節
+   ```
+
+3. **流程圖**：使用框線確保對齊
+   ```
+   ┌────┐     ┌────┐
+   │開始│ ──→ │結束│
+   └────┘     └────┘
+   ```
+
+4. **對比圖**：使用分欄表格
+5. **關係圖**：簡化連線，重點在結構
+6. **時間軸**：垂直排列較穩定
+
+圖表風格使用 Unicode 框線圖表，優先考慮排版穩定性：
+- 框線：┌─┬─┐ │ ├─┼─┤ └─┴─┘
+- 雙線框：╔═╦═╗ ║ ╠═╬═╣ ╚═╩═╝
+- 圓角框：╭─╮ │ ╰─╯
+- 箭頭：→ ← ↑ ↓ ⇒ ⇐
+- 分隔線：───── ═════ ━━━━━
+- 項目符號：• ▸ ▪ ◆
+
+說明風格：
+- 每個圖表前後都要有文字說明
+- 複雜概念要分解成多個簡單部分
+- 用類比幫助理解（如適用）
+- 標註「為什麼」而不只是「是什麼」
+
+記住：
+1. 目標是讓讀者快速理解概念和架構，而不是展示技術細節
+
+think hard