沒有適當的工具，前端錯誤很難診斷。此技能提供引導式工作流程，使用 Chrome DevTools MCP 來識別和修復 UI 問題、效能問題、網路錯誤和主控台失敗。

手動測試網頁應用程式耗時且容易出錯。此技能提供 Playwright 自動化腳本和伺服器管理工具，以驗證前端功能、擷取螢幕截圖、偵錯 UI 行為，以及檢視瀏覽器主控台日誌。

開發者浪費時間撰寫驗證模擬物件而非真實行為的測試。此技能透過強制執行 TDD 原則並在每個測試決策前提供檢查函數,來防止五種常見的測試反模式。

事後撰寫測試無法證明任何東西。這項技能透過強制您先撰寫失敗的測試來落實TDD紀律，確保您的測試實際上能驗證行為並在錯誤進入生產環境前發現它們。

隨機修補會浪費時間並產生新錯誤。此技能強制嚴謹的四階段除錯流程，確保在嘗試任何解決方案之前先理解根本原因，避免只修症狀而掩蓋底層問題。

及早發現程式碼問題可避免日後付出高昂的修復成本。此技能會派遣程式碼審查子代理來驗證實作是否符合需求，再繼續開發。

許多開發人員盲目地實作程式碼審查回饋而未經過驗證。此技能確保您在實作前先從技術角度評估回饋。這能提升程式碼品質並防止不必要的變更。

建立 Chrome 擴充功能需要了解 service worker、安全模式和 Chrome 網路商店合規性。此技能提供架構指導、程式碼範本和安全最佳實踐，協助建立專業的擴充功能，並可選擇性地整合 AI。

建立 MCP 伺服器需要對協議規範、以代理人為中心的設計和評估方法論有深入的了解。此技能提供全面的指導、參考實作和評估工具，以建立高品質的 MCP 伺服器，實現有效的 LLM 工具整合。

開發人員浪費時間決定如何完成分支。此技能提供清晰的選項並安全地處理所選的工作流程。它會驗證測試是否通過，並要求確認破壞性操作。

多個測試失敗若逐一調查會浪費時間。此技能提供一種模式，可派遣多個 Claude 代理並行調查與修復彼此獨立的問題，降低除錯時間。

使用原始 HTML 建立複雜的構件速度慢且受限。此技能提供完整的開發環境，包括 React、Tailwind CSS 和 40 多個預建的 shadcn/ui 元件。初始化專案、使用現代工具開發，並將所有內容捆綁成單一可攜式 HTML 檔案。

將模糊的需求轉化為清晰的系統設計。使用 EventStorming 方法論創建可導航的設計目錄,並配有 Mermaid 圖表。

理解大型程式碼庫需要時間和精力。CodeConscious 提供一個自主認知助手，能夠在會話之間建立持續性記憶，實現深度程式碼探索、模式識別和從專案歷史中持續學習。

傳統的文字搜尋無法理解代碼結構。AST-Grep 使用語法感知的模式來查找和轉換代碼，能夠理解代碼的含義。它通過 AST 結構而非純文字進行搜尋，實現精確的代碼分析和大規模重構。

開發人員浪費時間在切換不同獨立開發工具上。這個工具包透過統一的探索系統，無縫整合8個自訂AI工具與10多個流行CLI工具（如ripgrep和jq）。

管理多個 git 分支可能會使您的主要工作目錄變得混亂，並使上下文切換變得困難。此技能提供了一種結構化的方法來建立隔離的 git worktrees，讓您可以同時處理多個功能而不會互相干擾。

TypeScript 嚴格模式能在編譯時期捕捉會導致執行時期錯誤的 bug。此技能協助您設定並強制執行嚴格型別檢查,以獲得更安全、更可靠的程式碼。

先寫程式碼後寫測試會導致覆蓋缺口和遺漏邊界情況。此技能提供結構化的 TDD 工作流程,包含 RED-GREEN-REFACTOR 循環、無模擬的真實實作測試,以及使用 Playwright 的端對端驗證。

修復錯誤時若只處理症狀，往往會失敗。這個四階段除錯框架確保您在嘗試解決方案之前了解根本原因。減少除錯時間並防止問題重複發生。