--- name: agnt-visual-diagnostics description: "Visual overlays for layout debugging - outline elements, show grid/flex containers, typography audit, z-index analysis, interactive element visualization. 視覺疊層排版除錯：輪廓、網格、彈性、字排、z序、互動元素。 Use when: debug layout, outline elements, show grid containers, show flexbox, audit typography, check z-index, visualize interactive elements, debug spacing" --- # Visual Diagnostics Skill 視覺CSS疊層除錯，借agnt診斷模組。使不可見之佈局概念可視，以速除錯。 ## 先決條件 代理須運行且瀏覽器已連： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "start", "id": "dev", "target_url": "http://localhost:3000" } } ``` --- ## 先查錯誤 視覺問題常源於JS錯誤，先查： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "get_errors", "parameters": {"proxy_id": "dev", "include_warnings": false} } ``` 修錯後再稽查佈局。 --- ## 結構與佈局診斷 ### 輪廓所有元素 按嵌套深度色碼標示元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.outlineAll()" } } ``` 色彩循環：紅→綠→藍→黃→青，按嵌套深度。 ### 顯示語義元素 按類型高亮HTML5語義元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showSemanticElements()" } } ``` 返回色彩圖例： - `div` - red - `span` - blue - `section` - green - `article` - purple - `header` - orange - `footer` - cyan - `nav` - magenta - `aside` - lime - `main` - pink ### 顯示容器類 高亮容器/包裹元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showContainers()" } } ``` 目標：`.container`、`.wrapper`、`[class*="container"]`、`[class*="wrapper"]` ### 顯示網格容器 可視化CSS Grid佈局： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showGrid()" } } ``` 於網格容器添加 "GRID" 標籤及紫色輪廓。 ### 顯示彈性容器 可視化Flexbox佈局： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showFlexbox()" } } ``` 於彈性容器添加 "FLEX" 標籤及青色輪廓。 ### 顯示間距用法 高亮使用CSS gap之元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showGaps()" } } ``` --- ## 字排診斷 ### 字排稽查面板 開啟面板顯示頁面所有唯一文字樣式： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showTypographyPanel()" } } ``` 返回： - 唯一樣式組合計數 - 各組字號、字族、字重、行高、顏色 - 使用次數（僅用一次=疑為不一致） - 各樣式預覽文字 ### 高亮不一致文字 找僅用一次之文字樣式（疑為不一致）： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.highlightInconsistentText()" } } ``` 以紅色高亮單次出現字號。 ### 顯示文字邊界 輪廓所有文字元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showTextBounds()" } } ``` 藍色虛線輪廓 `

`、`

`-`

`、``、``。 --- ## 疊層分析 ### 顯示Z序元素 找出並高亮所有有z-index之元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showStacking()" } } ``` 返回按z-index值排序之元素列表（最高在前）。 ### 顯示定位元素 按定位類型高亮元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showPositioned()" } } ``` 色彩圖例： - `absolute` - red outline - `fixed` - orange outline - `sticky` - purple outline ### 降低透明度 淡化所有元素以查看疊層： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.opacity(0.3)" } } ``` 用於查看重疊元素。 --- ## 互動元素診斷 ### 顯示互動元素 高亮所有可點擊/可聚焦元素： ``` mcp__plugin_slop-mcp_slop-mcp__execute_tool Parameters: { "mcp_name": "agnt", "tool_name": "proxy", "parameters": { "action": "exec", "id": "dev", "code": "__devtool_diagnostics.showInteractive()" } } ``` 青綠輪廓標示：``、`