frontend-components
Wiederverwendbare Frontend-Komponenten erstellen
Große Frontend-Komponenten sind schwer wiederzuverwenden, zu testen und zu warten. Dieser Skill leitet Claude, Codex und Claude Code dabei an, fokussierte React-Komponenten mit klaren Props und State-Grenzen zu erstellen.
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 "frontend-components" from https://skillstore.io/skills/devanb-frontend-components.md and its manifest at https://skillstore.io/api/skills/devanb-frontend-components/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
„frontend-components“ wird verwendet. Erstelle eine wiederverwendbare Alert-Komponente für Erfolgs-, Warn- und Fehlermeldungen.
Erwartetes Ergebnis:
Ein fokussierter Plan für eine Alert-Komponente mit Variant-Props, barrierefreien Labels, Kompositionshinweisen und vorgeschlagener Dateiplatzierung.
„frontend-components“ wird verwendet. Refaktorisiere ein großes Einstellungs-Panel, das Formularfelder, Validierung und Layout vermischt.
Erwartetes Ergebnis:
Eine Aufteilung in Formularabschnitte, Feldkomponenten, Validierungshelfer und Empfehlungen zur State-Zuständigkeit im Parent.
„frontend-components“ wird verwendet. Überprüfe eine gemeinsame Card-Komponente, die über Dashboards hinweg verwendet wird.
Erwartetes Ergebnis:
Konkrete Verbesserungen der Prop-API, Kompositionsänderungen und Dokumentationspunkte für eine konsistente Dashboard-Nutzung.
Sicherheitsaudit
SicherTwo external command findings are false positives caused by markdown inline code examples. The path traversal finding is confirmed because SKILL.md directs the assistant to load guidance through a ../../../ relative link outside the skill directory.
Elemente der Fähigkeitsprüfung (1)
Dies sind echte lokale Fähigkeiten, die für diese Fähigkeit erwartet werden können; daher müssen sie überprüft werden, werden jedoch nicht als bestätigtes bösartiges Verhalten gezählt.
Risikofaktoren
⚙️ Externe Befehle (2)
📁 Dateisystemzugriff (1)
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/devanb-frontend-components/audits/11?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown-Badge
[](https://skillstore.io/skills/devanb-frontend-components?utm_source=security_passport_badge)HTML-Badge
<a href="https://skillstore.io/skills/devanb-frontend-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Einbettungskarte
<iframe src="https://skillstore.io/embed/skills/devanb-frontend-components.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
DevanB. (2026). frontend-components security audit report (audit version 11) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-components/audits/11BibTeX-Zitat
@techreport{devanb-devanb-frontend-components-2026,
author = {DevanB},
title = {frontend-components security audit report (audit version 11)},
institution = {Skillstore},
year = {2026},
number = {11},
url = {https://skillstore.io/skills/devanb-frontend-components/audits/11},
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: "frontend-components security audit report (audit version 11)"
version: "unspecified"
type: report
authors:
- name: "DevanB"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/devanb-frontend-components/audits/11"
identifiers:
- type: other
value: "skillstore:devanb-frontend-components:audit:11"
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
eis-its-frontend-components
2026-09-09
devanb-frontend-components
2026-09-09
Skillstore-Score
Warum dieser Score Evidenzvertrauen: HochWas Sie erstellen können
Gemeinsame UI-Komponenten erstellen
Nutze den Skill, um wiederverwendbare Buttons, Cards, Modals, Formulare und Layout-Komponenten mit klaren Verantwortlichkeiten zu entwerfen.
Große Komponenten refaktorisieren
Nutze den Skill, um monolithische React-Komponenten in kleinere Komponenten mit fokussierten APIs und klarerer State-Zuständigkeit aufzuteilen.
Komponenten-APIs standardisieren
Nutze den Skill, um Prop-Benennung, TypeScript-Typen und Kompositionsmuster über gemeinsame Komponentenverzeichnisse hinweg abzustimmen.
Diese Prompts ausprobieren
Erstelle eine wiederverwendbare React-Komponente für diesen UI-Bedarf. Achte auf eine einzelne Verantwortlichkeit, klare Props und einfachen lokalen State.
Überprüfe diese Komponenten-API. Schlage klarere Prop-Namen, TypeScript-Typen und Standardwerte vor, während die öffentliche Schnittstelle klein bleibt.
Refaktorisiere diese große Komponente in kleinere React-Komponenten. Bewahre das Verhalten und erkläre die neuen Zuständigkeitsgrenzen.
Entwirf ein gemeinsames Komponenten-Muster für dieses Feature. Berücksichtige Kompositionsentscheidungen, State-Platzierung, Dateiorganisation und Nutzungshinweise.
Bewährte Praktiken
- Halte jede Komponente auf eine Verantwortlichkeit fokussiert.
- Bevorzuge explizite Prop-Interfaces gegenüber versteckter Kopplung.
- Dokumentiere gemeinsame Komponenten mit erwarteter Nutzung und klaren Grenzen.
Vermeiden
- Platziere kein unzusammenhängendes Layout, Data Fetching und keine Business-Logik in einer einzigen Komponente.
- Stelle keine breiten Props bereit, die interne Implementierungsdetails preisgeben.
- Erstelle keine gemeinsamen Komponenten, bevor die Wiederverwendungsanforderungen klar sind.