react-ui-patterns
79Robuste React-UI-Zustände erstellen
React-Oberflächen zeigen häufig keine klaren Lade-, Fehler-, Leer- und Übermittlungszustände. Dieser Skill bietet praktische Muster für vorhersehbares asynchrones UI-Verhalten.
Code mit Ursachenanalyse debuggen
Bugs kosten Zeit, wenn Teams ohne Belege nur Symptome beheben. Dieser Skill führt Claude, Codex und Claude Code durch eine strukturierte Diagnose, bevor Änderungen vorgenommen werden.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
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.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„systematic-debugging“ wird verwendet. Ein Unit-Test schlägt nach einem Refactoring fehl, aber die geänderte Funktion sieht korrekt aus.
Erwartetes Ergebnis:
Der Assistent fragt nach dem vollständigen Fehler, vergleicht die alten und neuen Aufrufpfade, verfolgt den unerwarteten Wert und schlägt eine testbare Hypothese vor.
„systematic-debugging“ wird verwendet. In der Produktion tritt ein Laufzeitfehler auf, wenn ein Feld null ist.
Erwartetes Ergebnis:
Der Assistent folgt dem Stacktrace, identifiziert, wo der null-Wert zuerst in den Ablauf gelangt, und empfiehlt Validierung an dieser Quelle.
„systematic-debugging“ wird verwendet. Drei Fixes sind fehlgeschlagen, und jeder legt ein anderes Problem offen.
Erwartetes Ergebnis:
Der Assistent stoppt weiteres Patchen, fasst die Belege zusammen, listet vermutete Designannahmen auf und bereitet Punkte für die Teamprüfung vor.
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.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
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"
Jeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
asmayaseen-systematic-debugging
2026-09-09
sickn33-systematic-debugging
2026-09-09
chriswiles-systematic-debugging
2026-09-09
dmjgilbert-systematic-debugging
2026-09-09
doyajin174-systematic-debugging
2026-09-09
codingcossack-systematic-debugging
2026-09-09
zhanlincui-systematic-debugging
2026-09-09
obra-systematic-debugging
2026-09-09
cycleaddict-systematic-debugging
2026-09-09
davila7-systematic-debugging
2026-09-09
dyai2025-systematic-debugging
2026-09-09
cygnusfear-systematic-debugging
2026-09-09
Nutze die Checkliste, um den vollständigen Fehler zu lesen, das Setup zu prüfen, fehlerhafte Werte nachzuverfolgen und einen gezielten Fix zu erstellen.
Folge dem Stacktrace, identifiziere den ungültigen Zustand und füge Validierung dort hinzu, wo der fehlerhafte Wert entsteht.
Stoppe nach mehreren fehlgeschlagenen Fixes, dokumentiere die Erkenntnisse und entscheide, ob das Design im Team besprochen werden muss.
Nutze den systematic-debugging-Skill, um diesen Bug zu untersuchen. Fasse zuerst das Symptom, die Reproduktionsschritte und die benötigten Belege zusammen, bevor du einen Fix vorschlägst.
Wende den systematic-debugging-Prozess auf diesen fehlgeschlagenen Test an. Lies die Assertion, prüfe die Setup-Daten, verfolge den unerwarteten Wert und benenne die Ursache.
Wende die Hypothesen- und Testphase an. Formuliere eine klare Hypothese, sage das Ergebnis voraus, wähle den kleinsten Test und erkläre, was jedes Ergebnis bedeutet.
Nutze systematic-debugging, um diese fehlgeschlagenen Fix-Versuche zu überprüfen. Identifiziere Muster, entscheide, ob das Patchen beendet werden sollte, und bereite eine knappe Übergabe an das Team vor.
Autor
ChrisWilesLizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Repository
https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/systematic-debuggingRef.
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
Aktualität der Wartung
18.7.2026
Nutzung
7 Downloads · 276 Aufrufe
Dateistruktur
📄 SKILL.md
Robuste React-UI-Zustände erstellen
React-Oberflächen zeigen häufig keine klaren Lade-, Fehler-, Leer- und Übermittlungszustände. Dieser Skill bietet praktische Muster für vorhersehbares asynchrones UI-Verhalten.
Zuverlässige Formik-Formulare erstellen
Formik-Formulare wiederholen häufig Validierungs-, Fehleranzeige- und Submit-Status-Logik. Dieser Skill bietet prägnante Muster für wiederverwendbare Felder, Yup-Schemas, GraphQL-Submissions, Bearbeitungsformulare und mehrstufige Abläufe.
Konsistente Core-UI-Komponenten erstellen
Inkonsistente UI-Komponenten verlangsamen die Produktarbeit und führen zu visuellen Abweichungen. Dieser Skill leitet Claude, Codex und Claude Code dabei an, gemeinsame Tokens, Layouts und Komponenten-Muster zu verwenden.
Bessere Jest-Tests mit wiederverwendbaren Mustern schreiben
Unit-Tests werden oft fragil, wenn sie Setup oder Testimplementierungsdetails duplizieren. Dieser Skill bietet wiederverwendbare Jest-Muster für Factories, Mocks, Render-Helper und TDD.
GraphQL-Operationen mit generierten Typen erstellen
Die Arbeit mit GraphQL-Clients führt oft zu doppelten Operationen, schwacher Fehlerbehandlung und veralteten generierten Typen. Dieser Skill führt durch konsistente .gql-Dateien, von Apollo generierte Hooks, Codegen-Schritte und UI-Schutzmechanismen für Mutationen.
Fehler und Ursachen debuggen
von 89jobrien
Fehler und Incidents sind schwer zu triagieren, wenn sich Hinweise über Logs, Stacktraces und Services verteilen. Dieser Skill strukturiert die Diagnose, parst Logs, erkennt Muster und leitet zu minimalen Fixes an.
Codemuster und Architektur analysieren
von C0ntr0lledCha0s
Große Codebasen verbergen wiederkehrende Strukturen und unklare Architekturentscheidungen. Diese Skill findet Muster, erklärt ihre Absicht und hebt praktische Refactoring-Möglichkeiten hervor.
Zuverlässige Testautomatisierung entwickeln
von 89jobrien
Schwache Tests verlangsamen Releases und verbergen Regressionen. Diese Skill unterstützt bei Teststrategie, TDD, Automatisierung, Coverage-Review und Playwright-Webprüfungen.
Code mit strukturierten Qualitätsprüfungen reviewen
von alirezarezvani
Code-Reviews können Qualitäts-, Sicherheits- und Wartbarkeitsprobleme übersehen. Dieser Skill unterstützt strukturierte Reviews mit Skripten, Checklisten und Berichtserstellung.
Codekontext schneller finden
von 89jobrien
Entwickler verlieren häufig Zeit damit nachzuvollziehen, warum Code existiert und was davon abhängt. Dieser Skill veranlasst Claude, Codex oder Claude Code dazu, vor Änderungen zugehöriges Graph-Wissen, Aufrufer, Importe und Tests zu sammeln.
Fullstack-Apps mit Senior-Anleitung erstellen
von alirezarezvani
Fullstack-Projekte benötigen oft ein konsistentes Setup, Architekturentscheidungen und Qualitätsprüfungen. Dieser Skill bietet Skripte und Referenzen für Arbeiten mit React, Next.js, Node.js, GraphQL und PostgreSQL.