react-ui-patterns
79建構具韌性的 React UI 狀態
React 介面經常無法清楚呈現載入、錯誤、空狀態和提交狀態。此技能提供實用模式,協助建立可預期的非同步 UI 行為。
透過根本原因分析進行程式碼除錯
當團隊在沒有證據的情況下修補症狀時,錯誤會浪費時間。這項技能會引導 Claude、Codex 和 Claude Code 在進行變更前先完成結構化診斷。
將此請求複製給你的智慧代理,其中包含權威 Skill 頁面和清單。
Review the Skillstore skill "systematic-debugging" from https://skillstore.io/skills/chriswiles-systematic-debugging.md and its manifest at https://skillstore.io/api/skills/chriswiles-systematic-debugging/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫,並依安全政策請求必要確認。
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時,請使用這些連結。
正在使用「systematic-debugging」。 一次重構後單元測試失敗,但變更的函式看起來是正確的。
預期結果:
助理會要求完整錯誤資訊,比較新舊呼叫路徑,追蹤非預期值,並提出一個可測試的假設。
正在使用「systematic-debugging」。 當某個欄位為 null 時,生產環境會出現執行階段錯誤。
預期結果:
助理會依循堆疊追蹤,找出 null 值最早進入流程的位置,並建議在該來源處進行驗證。
正在使用「systematic-debugging」。 三次修復都失敗了,而且每次都暴露出不同問題。
預期結果:
助理會停止進一步修補,摘要證據,列出可疑的設計假設,並準備團隊檢視要點。
All static findings are false positives caused by Markdown code fences and general debugging prose in SKILL.md. I found no prompt injection, data exfiltration, network behavior, credential access, or malicious intent in the skill content. The skill documents a debugging workflow and does not contain executable scripts.
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據,不判斷該 Skill 是否安全。
https://skillstore.io/skills/chriswiles-systematic-debugging/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/chriswiles-systematic-debugging?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/chriswiles-systematic-debugging?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/chriswiles-systematic-debugging/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/chriswiles-systematic-debugging.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>ChrisWiles. (2026). systematic-debugging security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-systematic-debugging/audits/8@techreport{chriswiles-chriswiles-systematic-debugging-2026,
author = {ChrisWiles},
title = {systematic-debugging security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/chriswiles-systematic-debugging/audits/8},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "systematic-debugging security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "ChrisWiles"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/chriswiles-systematic-debugging/audits/8"
identifiers:
- type: other
value: "skillstore:chriswiles-systematic-debugging:audit:8"
description: "Skillstore immutable audit report identifier"
每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
asmayaseen-systematic-debugging
2026-10-25
dmjgilbert-systematic-debugging
2026-09-09
chriswiles-systematic-debugging
2026-09-09
doyajin174-systematic-debugging
2026-09-09
codingcossack-systematic-debugging
2026-09-09
zhanlincui-systematic-debugging
2026-09-09
cycleaddict-systematic-debugging
2026-09-09
cygnusfear-systematic-debugging
2026-09-09
使用檢查清單閱讀完整失敗資訊、檢查設定、追蹤錯誤值,並建立聚焦的修復。
依循堆疊追蹤,識別無效狀態,並在錯誤值的來源處加入驗證。
在多次修復失敗後停止,記錄發現,並判斷設計是否需要團隊討論。
使用 systematic-debugging skill 調查這個錯誤。請先摘要症狀、重現步驟,以及在提出任何修復前所需的證據。
針對這個失敗的測試使用 systematic-debugging process。閱讀斷言、檢查設定資料、追蹤非預期值,並說明根本原因。
套用假設與測試階段。形成一個明確假設、預測結果、選擇最小測試,並解釋每種結果代表什麼。
使用 systematic-debugging 檢視這些失敗的修復嘗試。識別模式、判斷是否停止修補,並準備一份精簡的團隊交接內容。
作者
ChrisWiles授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
儲存庫
https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/systematic-debugging引用
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
維護新鮮度
2026/7/22
使用量
8 次下載 · 276 次瀏覽
檔案結構
📄 SKILL.md
建構具韌性的 React UI 狀態
React 介面經常無法清楚呈現載入、錯誤、空狀態和提交狀態。此技能提供實用模式,協助建立可預期的非同步 UI 行為。
建構可靠的 Formik 表單
Formik 表單經常重複驗證、錯誤顯示和提交狀態邏輯。此技能提供精簡模式,涵蓋可重用欄位、Yup schema、GraphQL 提交、編輯表單和多步驟流程。
建置一致的核心 UI 元件
不一致的 UI 元件會拖慢產品工作並造成視覺漂移。此技能會引導 Claude、Codex 和 Claude Code 使用共用權杖、版面配置與元件模式。
使用可重用模式撰寫更好的 Jest 測試
當單元測試重複設定或測試實作細節時,往往會變得脆弱。此技能提供可重用的 Jest 模式,涵蓋 factories、mocks、render 輔助函式與 TDD。
使用生成型別建立 GraphQL 操作
GraphQL client 工作經常會產生重複的操作、薄弱的錯誤處理,以及過時的生成型別。此技能會引導建立一致的 .gql 檔案、Apollo 生成的 hooks、codegen 步驟,以及 mutation UI 防護措施。
偵錯錯誤與根本原因
由 89jobrien
當證據分散在日誌、堆疊追蹤與服務之間時,錯誤和事件很難分流判斷。此技能會結構化診斷流程、解析日誌、識別模式,並引導最小修復。
Review Defects and Verify Root-Cause Repairs
由 aakashh242
Reviews can miss failure conditions or accept fixes without reliable evidence. Gauntlet guides scoped adversarial reviews, authorized repairs, and revision-bound verification within a finite budget.
分析程式碼模式與架構
由 C0ntr0lledCha0s
大型程式碼庫隱藏著重複結構與不明確的架構選擇。此技能會找出模式、說明其意圖,並突顯實用的重構機會。
建構可靠的測試自動化
由 89jobrien
薄弱的測試會拖慢發布並掩蓋回歸問題。此技能可引導測試策略、TDD、自動化、覆蓋率審查,以及 Playwright 網頁檢查。
使用結構化品質檢查審查程式碼
由 alirezarezvani
程式碼審查可能會遺漏品質、安全性與可維護性問題。此技能會透過腳本、檢查清單與報告產生流程,引導進行結構化審查。
更快找到程式碼脈絡
由 89jobrien
開發人員經常耗費時間追查程式碼為何存在,以及有哪些內容依賴它。這個技能會提示 Claude、Codex 或 Claude Code 在變更前收集相關圖譜知識、呼叫者、匯入項目和測試。