Das Erstellen von React-Komponenten mit korrekten Ladezuständen, Fehlerbehandlung und Nutzerfeedback ist herausfordernd und führt oft zu verwirrender UX. Diese Skill-Sammlung bietet bewährte UI-Muster für den Umgang mit asynchronen Operationen, angemessenes Feedback und die Schaffung reibungsloser Nutzererlebnisse.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "react-ui-patterns". Wie zeige ich Ladezustände ohne Flackern beim Neuabrufen von Daten?
Erwartetes Ergebnis:
Verwende das Muster: Ladeanzeige nur anzeigen, wenn loading UND keine Daten vorhanden sind. Dies verhindert das Flackern, wenn zwischengespeicherte Daten verfügbar sind. Beispiel: if (loading && !data) return <Skeleton />;
Verwendung von "react-ui-patterns". Was ist der korrekte Weg, Fehler in React zu behandeln?
Erwartetes Ergebnis:
Fehler immer mit klaren Mitteilungen für Nutzer sichtbar machen. Hierarchie verwenden: Inline-Fehler für Formulare, Toasts für behebbare Fehler, Banner für Seitenprobleme und vollständige Fehlerbildschirme für nicht behebbare Fehler.
Verwendung von "react-ui-patterns". Wie sollte ich Schaltflächenzustände während der Formularübermittlung behandeln?
Erwartetes Ergebnis:
Schaltfläche während der Übermittlung deaktivieren UND Ladeanzeige zeigen. Dies verhindert doppelte Übermittlungen und gibt Nutzern Feedback, dass ihre Aktion in Bearbeitung ist.
Sicherheitsaudit
SicherStatic analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.
Qualitätsbewertung
Was du bauen kannst
Datengesteuerte React-Komponenten erstellen
Beim Erstellen von Komponenten, die Daten von APIs abrufen, wenden Sie korrekte Lade-, Fehler- und Leerzustände nach etablierten Mustern an.
Formularübermittlungen behandeln
Stellen Sie beim Implementieren von Formularen mit asynchronen Übermittlungen sicher, dass Schaltflächen während der Übermittlung deaktiviert sind und angemessenes Ladefeedback zeigen.
Nutzererlebnis verbessern
Beim Refaktorisieren vorhandenen React-Codes zur Beseitigung verwirrender Lade-Blitze und versteckter Fehler.
Probiere diese Prompts
Zeig mir, wie man einen Ladezustand für eine React-Komponente implementiert, die Daten abruft. Ich möchte vermeiden, einen Spinner zu zeigen, wenn bereits zwischengespeicherte Daten existieren.
Erstelle eine Fehlerzustands-Komponente für React, die die Fehlermeldung anzeigt und eine Wiederholungsschaltfläche enthält. Wie sollte ich dies mit Apollo oder React Query integrieren?
Schreibe ein Formularübermittlungsmuster in React, das die Submit-Schaltfläche während der Mutation deaktiviert, einen Lade-Spinner anzeigt und Erfolgs- oder Fehler-Toasts anzeigt.
Baue eine vollständige React-Komponente, die alle UI-Zustände behandelt: Ladezustand (mit Skeleton), Fehler (mit Wiederholung), Leerzustand (mit Call-to-Action) und Erfolg (mit Datenanzeige).
Bewährte Verfahren
- Niemals veraltete UI anzeigen – Lade-Spinner sollten nur erscheinen, wenn keine Daten zum Anzeigen vorhanden sind
- Fehler immer für Nutzer sichtbar machen – Fehler niemals stillschweigend ohne Feedback schlucken
- Schaltflächen während asynchroner Operationen deaktivieren, um doppelte Übermittlungen zu verhindern
Vermeiden
- Lade-Spinner anzeigen, wann immer loading true ist, unabhängig davon, ob zwischengespeicherte Daten existieren
- Fehler abfangen und nur in der Console loggen, ohne Nutzerfeedback anzuzeigen
- Nutzern erlauben, während der Formularübermittlung mehrfach auf Submit zu klicken