Moderne React-Frontends erstellen
Frontend-Teams benötigen konsistente Muster für React, TypeScript, Routing, Datenabruf und Ladezustände. Dieser Skill bietet praktische Richtlinien und Beispiele zum Erstellen wartbarer Frontend-Funktionen.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/dimon94-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/dimon94-frontend-dev-guidelines/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.
„frontend-dev-guidelines“ wird verwendet. Erstelle eine Benutzerdetailseite mit Datenladen und Bearbeitungsfeedback.
Erwartetes Ergebnis:
Ein Feature-Plan mit Routenplatzierung, typisierten API-Service-Methoden, einer mit Suspense umschlossenen Komponente, Mutationsablauf, Snackbar-Feedback und Schritten zur Cache-Invalidierung.
„frontend-dev-guidelines“ wird verwendet. Prüfe eine Dashboard-Komponente, die mehrere Datensätze abruft.
Erwartetes Ergebnis:
Eine knappe Prüfung zu Query-Platzierung, parallelem Datenladen, Memoisierungsbedarf, Layout-Stabilität, MUI Grid-Syntax und Cleanup-Empfehlungen.
„frontend-dev-guidelines“ wird verwendet. Organisiere ein neues Posts-Feature in einer bestehenden React-App.
Erwartetes Ergebnis:
Eine Ordnerübersicht mit API, Komponenten, Hooks, Helpern, Typen, öffentlichen Exports, Routendateien und Hinweisen zu Import-Aliassen.
The static findings were reviewed against the skill files and are false positives from Markdown documentation and fixed frontend examples. The dynamic imports are React code-splitting examples, path traversal detections are import paths or documentation links, and network references are local application API client guidance. No prompt injection, malicious intent, data exfiltration, or executable installer behavior was 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/dimon94-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/dimon94-frontend-dev-guidelines?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/dimon94-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/dimon94-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/dimon94-frontend-dev-guidelines.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Dimon94. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8@techreport{dimon94-dimon94-frontend-dev-guidelines-2026,
author = {Dimon94},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/dimon94-frontend-dev-guidelines/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: "frontend-dev-guidelines security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Dimon94"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:dimon94-frontend-dev-guidelines: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
briandai22-frontend-dev-guidelines
2026-09-09
0chan-smc-frontend-dev-guidelines
2026-09-09
bom-98-frontend-dev-guidelines
2026-09-09
sickn33-frontend-dev-guidelines
2026-09-09
dojocodinglabs-frontend-dev-guidelines
2026-09-09
dimon94-frontend-dev-guidelines
2026-09-09
diet103-frontend-dev-guidelines
2026-09-09
Plane einen neuen Feature-Ordner mit API-Services, Komponenten, Hooks, Helpern, Typen und Routendateien.
Prüfe Komponenten-, Routing-, Styling- und Datenabrufentscheidungen anhand einer gemeinsamen Frontend-Konvention.
Refaktoriere ältere Lade-, Query- und Layout-Muster in Richtung Suspense, typisierte Services und stabile Layouts.
Erstelle eine React TypeScript-Komponente für [purpose]. Befolge bei Bedarf die Frontend-Richtlinien für Props, Hooks, Exports, MUI-Styling und Suspense-Grenzen.
Füge TanStack Query-Datenabruf für [entity] hinzu. Verwende useSuspenseQuery, einen Feature-API-Service, typisierte Rückgabewerte, Cache-Keys und das Projekt-Lademuster.
Entwirf ein vollständiges Feature für [workflow]. Schließe Ordnerstruktur, Routendatei, Lazy Loading, API-Service, Typen, Komponenten und Benutzerbenachrichtigungen ein.
Prüfe diesen Frontend-Code auf Einhaltung der Richtlinien. Konzentriere dich auf Dateiorganisation, Suspense-Nutzung, Cache-Strategie, MUI v7-Syntax, Performance und TypeScript-Standards.
Autor
Dimon94Lizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
72d5025b022c77f7a51bdf5c1637c689c80e89d1
Aktualität der Wartung
18.7.2026
Nutzung
6 Downloads · 684 Aufrufe
Code mit Root-Cause-Disziplin debuggen
Fehlerbehebungen scheitern oft, wenn Teams raten, bevor sie die Ursache verstehen. Diese Skill führt Claude, Codex und Claude Code durch evidenzbasiertes Debugging vor der Implementierung.
Verzeichnis-CLAUDE.md-Anleitungen erstellen
Änderungen an Verzeichnissen lassen lokale Dokumentation oft veralten. Diese Skill gibt Claude, Codex und Claude Code ein prägnantes Muster zum Aktualisieren von CLAUDE.md-Dateien auf Verzeichnisebene.
CC-DevFlow-Workflows routen
Teams verlieren Zeit bei der Auswahl des nächsten CC-DevFlow-Befehls während komplexer Auslieferungsarbeiten. Dieser Skill ordnet Projektstatus, Phasen-Gates und Nutzerabsicht dem passenden Claude-, Codex- oder Claude-Code-Workflow zu.
Anforderungen vor der Implementierung erfassen
Teams verlieren Zeit, wenn vage Anfragen zu überhasteter Implementierung werden. Dieser Skill strukturiert frühes Brainstorming, vergleicht Optionen und dokumentiert Entscheidungen für spätere Abstimmung.
Test-First-Aufgabenabschluss erzwingen
Teams können von der Test-First-Disziplin abweichen, wenn Aufgabendateien manuell bearbeitet werden. Dieser Skill definiert Prüfungen, die den Implementierungsabschluss blockieren, bis die zugehörigen Tests abgeschlossen sind.
KI-Fokus bei Flow-Aufgaben auffrischen
Lange Coding-Sitzungen können ursprüngliche Ziele aus der Aufmerksamkeit des Modells verdrängen. Dieser Skill fügt Auffrischungs-Checkpoints vor wichtigen Workflow-Entscheidungen hinzu.
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.
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.
Vue-Options-API-Komponenten verbessern
von vuejs-ai
Vue-Options-API-Projekte können Typsicherheit und korrektes this-Binding verlieren. Diese Skill bietet direkte Muster für sicherere Vue-Komponenten.
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.
Moderne React- und Next.js-Apps entwickeln
von sickn33
React- und Next.js-Projekte benötigen häufig konsistente Einrichtungsentscheidungen für Routing, Komponenten, Styling, Daten, Formulare, Tests und Deployment. Diese Skill gibt Claude, Codex und Claude Code einen phasenbasierten Workflow für die Planung und Entwicklung moderner Frontend-Anwendungen.