Fähigkeiten frontend-dev-guidelines

📦

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: sickn33

Sicher

Produktionsreife React-Anwendungen mit modernen Patterns erstellen

Auch verfügbar von: 0Chan-smc,diet103,Dimon94,DojoCodingLabs,0Chan-smc,BrianDai22,BOM-98

Frontend-Entwickler kämpfen mit inkonsistenten Patterns und technischen Schulden in React-Codebasen. Diese Skill bietet verbindliche Standards für Suspense-first Data Fetching, Feature-basierte Architektur und TypeScript-Disziplin.

Unterstützt: Claude Codex Code(CC)

📊 70 Angemessen

Die Skill-ZIP herunterladen

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

Einschalten und loslegen

Teste es

Verwendung von "frontend-dev-guidelines". Produktlisten-Komponente mit Suspense erstellen

Erwartetes Ergebnis:

ProductList-Komponente mit useSuspenseQuery-Hook erstellt
In SuspenseLoader-Boundary für automatische Loading-States eingewickelt
TypeScript-Interface für Product-Datentyp definiert
MUI Grid-Layout mit responsiver Größenanpassung unter Verwendung der v7-Syntax
Cache-first Query-Konfiguration für optimale Performance

Verwendung von "frontend-dev-guidelines". Wie sollte ich Authentifizierungs-Feature-Code organisieren

Erwartetes Ergebnis:

features/authentication-Verzeichnisstruktur erstellen
Auth-API-Aufrufe in api/authApi.ts mit typisierten Antworten platzieren
useAuth-Hook in hooks/useAuth.ts implementieren
Öffentliche Interfaces über index.ts-Barrel-Exports exportieren
Auth-Komponenten im components/-Unterverzeichnis behalten

Sicherheitsaudit

Sicher

v1 • 2/25/2026

All 649 static analysis findings are false positives. The skill consists entirely of Markdown documentation files containing code examples for educational purposes. Patterns like external_commands, scripts, filesystem, and network references are illustrative code snippets teaching React TypeScript development, not executable code. No actual security risks detected.

Gescannte Dateien

5,456

Analysierte Zeilen

befunde

Gesamtzahl Audits

Keine Sicherheitsprobleme gefunden

Auditiert von: claude

Qualitätsbewertung

Architektur

100

Wartbarkeit

Inhalt

Community

100

Sicherheit

Spezifikationskonformität

Was du bauen kannst

Neue React-Komponentenentwicklung

Produktionsreife React-Komponenten nach Suspense-first Patterns mit ordnungsgemäßen TypeScript-Typen, Lazy Loading und MUI-Styling generieren

Codebase-Standardisierung

Konsistente architektonische Patterns über Teams hinweg mit feature-basierter Organisation, striktem TypeScript und einheitlichem Styling-Ansatz etablieren

Legacy-Code-Modernisierung

Bestehende Komponenten refaktorieren, um useSuspenseQuery zu nutzen, isLoading-Conditionals zu entfernen und ordnungsgemäße Lazy Loading Boundaries zu implementieren

Probiere diese Prompts

Suspense-Komponente erstellen

Erstelle eine React-Komponente, die Benutzerprofildaten anzeigt. Verwende useSuspenseQuery zum Abrufen, umschließe mit SuspenseLoader und gestalte mit MUI sx Prop. Schließe TypeScript-Typen für die Benutzerdaten ein.

Feature-basierte Struktur einrichten

Richte eine feature-basierte Ordnerstruktur für eine Dashboard-Anwendung mit Features ein: Analytics, Benutzerverwaltung und Einstellungen. Zeige die api-, components-, hooks-, helpers- und types-Unterverzeichnisse für jedes Feature mit index.ts-Exporten.

Lazy Loaded Route implementieren

Implementiere eine TanStack Router-Konfiguration für eine Dashboard-Route mit Lazy Loading. Schließe eine Loader-Funktion ein, die Breadcrumb-Metadaten zurückgibt und Cache-first Query-Strategie für den initialen Datenabruf verwendet.

Zu Suspense-Patterns refaktorieren

Refaktoriere diese Legacy-Komponente, die useQuery mit isLoading-Checks verwendet, um stattdessen useSuspenseQuery zu nutzen. Entferne alle Early Returns und bedingte Loading-States. Zeige den vorherigen und nachherigen Code mit Erklärungen.

Bewährte Verfahren

Verwende immer useSuspenseQuery als Standard-Data-Fetching-Pattern anstelle von useQuery mit isLoading-Checks
Organisiere Code nach Feature-Domain im features-Verzeichnis anstatt nach technischem Typ
Lazy lade jede Routenkomponente oder schwere UI-Elemente wie Datagrids und Charts zur Bundle-Größen-Optimierung

Vermeiden

Early-Return-Patterns für Loading-States wie if isLoading return null, was Suspense-Boundaries bricht
Feature-spezifische Business-Logik im generischen components-Verzeichnis anstatt in features platzieren
Direkte API-Aufrufe innerhalb von Komponenten anstelle von zentralisierten Feature-API-Service-Layern

Häufig gestellte Fragen

Warum useSuspenseQuery anstelle von useQuery verwenden?

useSuspenseQuery eliminiert isLoading-Conditionals durch Nutzung von React Suspense Boundaries. Dies führt zu saubererem Komponentencode mit garantierter Datenverfügbarkeit und konsistenter Loading-UX durch zentralisierte SuspenseLoader-Komponenten.

Wann sollte ich inline Styles versus separate .styles.ts-Dateien verwenden?

Verwende inline Styles mit dem sx Prop für Komponenten unter 100 Zeilen. Erstelle separate ComponentName.styles.ts-Dateien für größere Komponenten zur besseren Lesbarkeit und Trennung der Anliegen.

Kann ich diese Skill mit bestehenden React 17-Codebasen verwenden?

Suspense für Data Fetching erfordert React 18 oder höher. Für React 17-Projekte können Sie immer noch die feature-basierte Organisation, TypeScript-Standards und API-Layer-Patterns anwenden, während Sie traditionelle useQuery-Patterns nutzen.

Welche Abhängigkeiten sind erforderlich, um diese Richtlinien zu befolgen?

Kern-Abhängigkeiten umfassen React 18+, TypeScript, TanStack Query v5, TanStack Router und MUI v7. Optional aber empfohlen: React Hook Form und Zod für Formularbehandlung.

Wie behandle ich Error-States mit Suspense-Patterns?

Umschließe Suspense Boundaries mit ErrorBoundary-Komponenten aus react-error-boundary oder ähnlichen Bibliotheken. Verwende den useMuiSnackbar-Hook für benutzerfreundliche Fehlermeldungen in Komponenten, die Mutationen auslösen.

Ist feature-basierte Organisation für kleine Projekte geeignet?

Für sehr kleine Projekte unter 20 Komponenten kann eine einfachere Struktur ausreichen. Feature-basierte Organisation skaliert jedoch vorhersehbar und etabliert früh gute Gewohnheiten. Beginne mit dem Pattern auch für kleine Projekte.