react-ui-patterns
Zuverlässige React-UI-Zustände erstellen
React-Oberflächen scheitern häufig bei Ladezuständen, Fehlern und leeren Daten. Dieser Skill bietet praktische Muster für vorhersehbare asynchrone UI-Zustände.
Mit meinem Agent installieren
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "react-ui-patterns" from https://skillstore.io/skills/sickn33-react-ui-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-react-ui-patterns/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.
Agent-lesbare Ressourcen
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
Testen
„react-ui-patterns“ wird verwendet. Eine Listenseite zeigt während eines Refetches weiterhin einen Spinner.
Erwartetes Ergebnis:
Halte die vorhandene Liste während des Refetches sichtbar. Verwende vollständiges Laden nur, wenn keine Daten vorhanden sind, und zeige dezenten Fortschritt für Aktualisierungen.
„react-ui-patterns“ wird verwendet. Eine Mutation protokolliert Fehler, aber Benutzer sehen kein Feedback.
Erwartetes Ergebnis:
Mache den Fehler über einen Toast oder eine Inline-Nachricht sichtbar. Gib Hinweise zum erneuten Versuch und halte den fehlgeschlagenen Zustand sichtbar.
„react-ui-patterns“ wird verwendet. Ein Submit-Button kann mehrfach angeklickt werden.
Erwartetes Ergebnis:
Deaktiviere den Button während der Übermittlung. Zeige einen Ladezustand und verhindere ungültige Übermittlungen, bevor die Mutation aufgerufen wird.
Sicherheitsaudit
SicherStatic analysis flagged Markdown code fences as Ruby or shell backtick execution and flagged JSX disabled props as reconnaissance. Context shows all instances are documentation examples in SKILL.md, with no executable commands, network activity, data access, or prompt injection evidence.
Risikofaktoren
⚙️ Externe Befehle (27)
Diesen Bericht teilen & zitieren
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
Berichtslink kopieren
https://skillstore.io/skills/sickn33-react-ui-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown-Badge
[](https://skillstore.io/skills/sickn33-react-ui-patterns?utm_source=security_passport_badge)HTML-Badge
<a href="https://skillstore.io/skills/sickn33-react-ui-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-react-ui-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Einbettungskarte
<iframe src="https://skillstore.io/embed/skills/sickn33-react-ui-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Wissenschaftliche Zitate (APA · BibTeX · CFF)
APA-Zitat
sickn33. (2026). react-ui-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-react-ui-patterns/audits/4BibTeX-Zitat
@techreport{sickn33-sickn33-react-ui-patterns-2026,
author = {sickn33},
title = {react-ui-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-react-ui-patterns/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-ui-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-react-ui-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-react-ui-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Varianten vergleichen
2 installierbare VariantenJeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
chriswiles-react-ui-patterns
2026-09-09
sickn33-react-ui-patterns
2026-09-09
Skillstore-Score
Warum dieser Score Evidenzvertrauen: HochWas Sie erstellen können
Asynchrone Screens stabilisieren
Wende Lade-, Fehler-, Leer- und Erfolgsmuster auf Screens an, die Remote-Daten abrufen.
UI-State-Abdeckung prüfen
Prüfe Pull Requests auf fehlendes Feedback, verschluckte Fehler oder wiederholte Aktionsauslöser.
Regeln für Produktinteraktionen definieren
Erstelle konsistente Erwartungen dafür, wie sich Formulare, Listen und Mutationen bei Fehlern verhalten.
Diese Prompts ausprobieren
Überprüfe diese React-Komponente und füge klare Lade-, Fehler-, Leer- und Erfolgszustände mithilfe des react-ui-patterns-Skills hinzu.
Verwende react-ui-patterns, um diesen Datenscreen so zu überarbeiten, dass zwischengespeicherte Inhalte während Refetches im Hintergrund sichtbar bleiben.
Wende react-ui-patterns auf dieses Formular an, damit Validierung, Ladezustand bei der Übermittlung, Vermeidung von Duplikaten und Fehlerfeedback konsistent behandelt werden.
Auditiere dieses React-Feature mit react-ui-patterns und berichte fehlende Zustände, riskantes asynchrones Verhalten und empfohlene UI-Änderungen.
Bewährte Praktiken
- Zeige vollständige Ladezustände nur, wenn keine nützlichen Daten verfügbar sind.
- Kombiniere jede asynchrone Aktion mit für Benutzer sichtbarem Erfolgs- oder Fehlerfeedback.
- Deaktiviere wiederholte Auslöser, während Anfragen laufen.
Vermeiden
- Zwischengespeicherte Inhalte während Refetches im Hintergrund durch Spinner ersetzen.
- Fehler protokollieren, ohne Benutzern einen Wiederherstellungspfad zu zeigen.
- Formulare übermitteln, während sie ungültig sind oder bereits laden.