frontend-dev-guidelines
React/TypeScript Frontend-Richtlinien anwenden
متاح أيضًا من: sickn33,DojoCodingLabs,0Chan-smc,diet103,BrianDai22,BOM-98,0Chan-smc
Das Schreiben von React/TypeScript-Frontend-Code ohne konsistente Muster führt zu Wartungsproblemen und Fehlern. Dieser Skill bietet umfassende Entwicklungsrichtlinien mit Codebeispielen für Komponenten, Datenabruf, Routing, Styling und Leistungsoptimierung unter Verwendung moderner React-Muster.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-dev-guidelines". Create a user profile component following the frontend-dev-guidelines skill
النتيجة المتوقعة:
- React.FC-Komponente mit typisiertem Props-Interface
- useSuspenseQuery für Datenabruf in SuspenseLoader eingebettet
- MUI v7-Styling mit sx-Prop und SxProps<Theme>
- useCallback für Event-Handler
- useMuiSnackbar für Fehler-/Erfolgsmeldungen
استخدام "frontend-dev-guidelines". How should I organize files for a new feature
النتيجة المتوقعة:
- features/{feature-name}/-Verzeichnis erstellen
- Unterverzeichnisse einrichten: api/, components/, hooks/, helpers/, types/
- API-Service-Datei in api/{feature}Api.ts erstellen
- Öffentliche API aus Feature-index.ts exportieren
- Feature-Komponenten mit Suspense-Boundaries lazy-laden
استخدام "frontend-dev-guidelines". What are the TypeScript standards for this project
النتيجة المتوقعة:
- Strict-Modus mit noImplicitAny und strictNullChecks aktivieren
- React.FC<Props>-Muster mit expliziten TypeScript-Interfaces verwenden
- import type für reine Typ-Imports verwenden
- Niemals any-Typ verwenden - spezifische Typen oder unknown nutzen
- Typen im Feature-Level-types/-Verzeichnis definieren
التدقيق الأمني
آمنPure documentation skill containing markdown files with TypeScript code examples. No executable code, network operations, file system access, or external dependencies. All content is descriptive guidelines for React/TypeScript development patterns. The static scanner incorrectly flagged code examples within documentation as security threats.
عوامل الخطر
⚙️ الأوامر الخارجية (520)
⚡ يحتوي على سكربتات (22)
📁 الوصول إلى نظام الملفات (36)
درجة الجودة
ماذا يمكنك بناءه
Frontend-Code-Reviews
Frontend-Code anhand etablierter Muster und Best Practices auf Konsistenz überprüfen
Implementierung neuer Features
Neue Features unter Verwendung moderner React-Muster mit ordnungsgemäßem Datenabruf und State Management implementieren
Modernes React lernen
React-Muster einschließlich Suspense, TypeScript und MUI-Komponentenentwicklung erlernen
جرّب هذه الموجهات
Create a new React component following the frontend-dev-guidelines skill. Include React.FC pattern with TypeScript, useSuspenseQuery for data fetching, and MUI v7 styling.
Create a new route using TanStack Router following the frontend-dev-guidelines skill. Include folder-based routing structure, lazy loading, and SuspenseLoader wrapper.
Implement data fetching using useSuspenseQuery following the frontend-dev-guidelines skill. Include cache-first strategy, proper query keys, and error handling.
Optimize this React component for performance following the frontend-dev-guidelines skill. Include useMemo, useCallback, React.memo, and memory leak prevention.
أفضل الممارسات
- React.FC<Props>-Muster für alle Komponenten mit expliziten TypeScript-Interfaces verwenden
- Lazy-geladene Komponenten in SuspenseLoader einbetten, um Layout-Shift zu verhindern
- Cache-First-Datenabruf-Strategie mit useSuspenseQuery vor API-Aufrufen implementieren
تجنب
- Niemals Early Returns mit Loading-Spinnern verwenden - verursacht Layout-Shift
- Niemals react-toastify verwenden - useMuiSnackbar für Benachrichtigungen nutzen
- Niemals any-Typ in TypeScript verwenden - spezifische Typen oder unknown nutzen