frontend-dev-guidelines
React TypeScript Frontend-Richtlinien anwenden
متاح أيضًا من: Dimon94,sickn33,DojoCodingLabs,0Chan-smc,BrianDai22,BOM-98,0Chan-smc
Frontend-Projekten fehlen oft konsistente Muster, was zu Wartungsproblemen und Fehlern führt. Dieser Skill bietet umfassende Richtlinien für React- und TypeScript-Anwendungen, einschließlich moderner Muster, Dateiorganisation und Best Practices.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-dev-guidelines". Erstelle eine Benutzerprofil-Komponente
النتيجة المتوقعة:
Ich werde eine Benutzerprofil-Komponente gemäß den Frontend-Richtlinien erstellen:
1. Dateistruktur: features/user/profile/
2. Komponente mit TypeScript-Schnittstellen
3. Lade- und Fehlerzustände unter Verwendung von Suspense und Error Boundaries
4. Datenabruf mit useSuspenseQuery
5. MUI-Komponenten für das Styling
استخدام "frontend-dev-guidelines". Wie sollte ich meine React-Projektdateien organisieren?
النتيجة المتوقعة:
Gemäß den Frontend-Richtlinien organisiere dein React-Projekt mit einem Features-Directory-Muster:
- src/
- features/
- feature-name/
- components/
- hooks/
- types/
- utils/
- shared/
- components/
- hooks/
- types/
- routes/
- app/
Dies hält verwandten Code zusammen und fördert die Wiederverwendbarkeit.
التدقيق الأمني
آمنThis is a documentation skill containing frontend development guidelines for React and TypeScript applications. Static analysis detected code patterns within markdown documentation files. All findings are false positives as the patterns are code examples in documentation, not executable code. No security concerns identified.
درجة الجودة
ماذا يمكنك بناءه
Einrichtung eines neuen React-Projekts
Konsistente Muster und Struktur etablieren beim Start eines neuen React TypeScript-Projekts mit teamweiten Richtlinien
Code-Review und Qualitätssicherung
Bestehenden Frontend-Code anhand etablierter Richtlinien überprüfen, um Verbesserungsbereiche und Konsistenz zu identifizieren
Moderne React-Muster lernen
Aktuelle Best Practices für React-Entwicklung lernen, einschließlich Suspense, Datenabruf und Komponentenorganisation
جرّب هذه الموجهات
Erstelle eine neue React-Komponente gemäß den Frontend-Richtlinien. Die Komponente sollte TypeScript verwenden, ordnungsgemäße Typen enthalten,Lade- und Fehlerzustände behandeln und den Dateiorganisationsmustern folgen.
Implementiere den Datenabruf für ein Feature mit TanStack Query mit ordnungsgemäßer Fehlerbehandlung, Ladezuständen und Cache-Verwaltung gemäß den Richtlinien.
Richte Routen für ein neues Feature mit TanStack Router ein, einschließlich verschachtelter Routen, Parameter und ordnungsgemäßer Dateistruktur gemäß den Richtlinien.
Überprüfe den folgenden React TypeScript-Code anhand der Frontend-Richtlinien. Identifiziere Bereiche, die Verbesserung benötigen, und schlage spezifische Änderungen vor, um sie mit Best Practices in Einklang zu bringen.
أفضل الممارسات
- TypeScript-Schnittstellen für alle Komponenten-Props und Datentypen verwenden, um Typsicherheit in der gesamten Anwendung zu gewährleisten
- Code nach Features organisieren unter Verwendung des Features-Directory-Musters, anstatt nach Dateityp zu gruppieren
- Lade- und Fehlerzustände mit React Suspense und Error Boundaries implementieren für konsistente Benutzererfahrung
تجنب
- Vermeiden, nicht zusammenhängende Feature-Code in gemeinsamen Verzeichnissen zu mischen, da dies eine enge Kopplung zwischen Features erzeugt
- TypeScript-Typdefinitionen für Komponenten-Props nicht auslassen, da dies zu Laufzeitfehlern führt
- Vermeiden, Geschäftslogik direkt in Komponenten zu platzieren; in Hooks und Utilities extrahieren für Wiederverwendbarkeit