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.
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/chriswiles-react-ui-patterns.md and its manifest at https://skillstore.io/api/skills/chriswiles-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.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„react-ui-patterns“ wird verwendet. Eine Produktliste zeigt bei jedem erneuten Abruf im Hintergrund kurz einen Spinner.
Erwartetes Ergebnis:
Der Skill empfiehlt, vorhandene Produktdaten während des erneuten Abrufs anzuzeigen und nur bei Bedarf einen dezenten Aktualisierungsindikator zu verwenden.
„react-ui-patterns“ wird verwendet. Eine Übermittlungsschaltfläche bleibt aktiv, während eine Mutation ausgeführt wird.
Erwartetes Ergebnis:
Der Skill empfiehlt, die Schaltfläche zu deaktivieren, einen Ladezustand anzuzeigen und Abschluss- oder Fehlerfeedback sichtbar zu machen.
„react-ui-patterns“ wird verwendet. Eine Suchansicht liefert keine Ergebnisse und zeigt eine leere Seite an.
Erwartetes Ergebnis:
Der Skill empfiehlt einen kontextbezogenen Leerzustand mit Suchhinweisen und einer klaren nächsten Aktion.
The static findings are false positives caused by Markdown code fences and React component examples in SKILL.md. No executable scripts, shell commands, prompt injection, credential access, or malicious intent were found.
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-react-ui-patterns/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/chriswiles-react-ui-patterns?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/chriswiles-react-ui-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/chriswiles-react-ui-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/chriswiles-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>ChrisWiles. (2026). react-ui-patterns security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9@techreport{chriswiles-chriswiles-react-ui-patterns-2026,
author = {ChrisWiles},
title = {react-ui-patterns security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9},
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: "react-ui-patterns security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "ChrisWiles"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/chriswiles-react-ui-patterns/audits/9"
identifiers:
- type: other
value: "skillstore:chriswiles-react-ui-patterns:audit:9"
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
chriswiles-react-ui-patterns
2026-09-09
sickn33-react-ui-patterns
2026-09-09
Nutzen Sie die Muster, um veraltete Spinner, fehlende Leerzustände und unklare Wiederholungspfade in React-Ansichten zu vermeiden.
Wenden Sie die Checkliste an, wenn Sie Lade-, Fehler- und Leerzustände vor der Veröffentlichung prüfen.
Nutzen Sie die Formular- und Schaltflächenmuster, um Übermittlungen klar, deaktiviert und wiederherstellbar zu halten.
Überprüfe diese React-Komponente mit dem react-ui-patterns Skill. Identifiziere fehlende Lade-, Fehler-, Leer- und Schaltflächenzustände.
Refaktorisiere diese Datenabrufansicht mit der Anleitung aus react-ui-patterns. Erhalte zwischengespeicherte Daten während des erneuten Abrufs und zeige klare Wiederherstellungspfade.
Entwirf die asynchronen Zustände für dieses Formular mit react-ui-patterns. Beziehe Validierungsfeedback, deaktiviertes Übermittlungsverhalten, Erfolgsfeedback und Fehlerbehebung ein.
Auditiere diesen React-Workflow mit react-ui-patterns. Erstelle eine priorisierte Liste von Lücken in UI-Zuständen für Laden, Fehler, leere Daten und Mutationen.
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/react-ui-patternsRef.
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
Aktualität der Wartung
22.7.2026
Nutzung
9 Downloads · 188 Aufrufe
Dateistruktur
📄 SKILL.md
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.
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.
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.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.
Typsichere React-Komponenten erstellen
von softaworks
React-TypeScript-Arbeit erfordert häufig präzise Typen für Events, Hooks und Routen. Diese Skill bietet fokussierte Muster für typisierte Komponenten, React 19 APIs und Routing.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
Next.js-Performance optimieren
von Atman36
Next.js-Anwendungen können durch große Bundles, schwaches Caching und nicht optimierte Medien langsam werden. Dieser Skill führt Claude, Codex und Claude Code durch gezielte Performance-Verbesserungen für Produktions-Apps.
React- und Next.js-Performance optimieren
von vercel-labs
React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.