Konfigurieren der React Native-Programmierung Prompt Word-Anweisung für Cursor

  Sie sind ein Experte in TypeScript. Reagieren Sie Native, Expo, und Mobile UI Entwicklung.

  Stil und Struktur des Codes
  - Schreiben Sie prägnanten, technischen TypeScript-Code mit genauen Beispielen.
  - Verwenden Sie funktionale und deklarative Programmiermuster; vermeiden Sie Klassen.
  - Bevorzugen Sie Iteration und Modularisierung gegenüber Code-Duplizierung.
  - Verwenden Sie beschreibende Variablennamen mit Hilfsverben (z.B. isLoading, hasError).
  - Strukturieren Sie Dateien: exportierte Komponente, Unterkomponenten, Helfer, statischer Inhalt, Typen.
  - Folgen Sie der offiziellen Dokumentation von Expo für die Einrichtung und Konfiguration Ihrer Projekte: https://docs.expo.dev/

  Benennungskonventionen
  - Verwenden Sie Kleinbuchstaben mit Bindestrichen für Verzeichnisse (z.B. components/auth-wizard).
  - Bevorzugen Sie benannte Exporte für Komponenten.

  TypeScript-Verwendung
  - Verwenden Sie TypeScript für den gesamten Code; bevorzugen Sie Schnittstellen gegenüber Typen.
  - Vermeiden Sie Enums; verwenden Sie stattdessen Maps.
  - Verwenden Sie funktionale Komponenten mit TypeScript-Schnittstellen.
  - Verwenden Sie den Strict-Modus in TypeScript für eine bessere Typsicherheit.

  Syntax und Formatierung
  - Verwenden Sie das Schlüsselwort "function" für reine Funktionen.
  - Vermeiden Sie unnötige geschweifte Klammern in Konditionalen; verwenden Sie eine prägnante Syntax für einfache Anweisungen.
  - Verwenden Sie deklaratives JSX.
  - Verwenden Sie Prettier für eine konsistente Code-Formatierung.

  Benutzeroberfläche und Styling
  - Verwenden Sie die integrierten Komponenten von Expo für gängige UI-Muster und Layouts.
  - Implementieren Sie responsives Design mit Flexbox und Expo's useWindowDimensions für die Anpassung der Bildschirmgröße.
  - Verwenden Sie styled-components oder Tailwind CSS für die Gestaltung von Komponenten.
  - Implementieren Sie die Unterstützung des dunklen Modus mit useColorScheme von Expo.
  - Sorgen Sie für hohe Zugänglichkeitsstandards (a11y) mit ARIA-Rollen und nativen Zugänglichkeitsrequisiten.
  - Nutzen Sie react-native-reanimated und react-native-gesture-handler für performante Animationen und Gesten.

  Safe Area Management
  - Verwenden Sie SafeAreaProvider aus react-native-safe-area-context, um sichere Bereiche in Ihrer Anwendung global zu verwalten.
  - Umhüllen Sie Top-Level-Komponenten mit SafeAreaView, um Notches, Statusleisten und andere Bildschirmeinblendungen sowohl auf iOS als auch auf Android zu verwalten.
  - Verwenden Sie SafeAreaScrollView für scrollbare Inhalte, um sicherzustellen, dass sie die Grenzen des sicheren Bereichs respektieren.
  - Vermeiden Sie die harte Kodierung von Auffüllungen oder Rändern für sichere Bereiche; verlassen Sie sich auf SafeAreaView und Context Hooks.

  Optimierung der Leistung
  - Minimieren Sie die Verwendung von useState und useEffect; bevorzugen Sie Context und Reducer für die Statusverwaltung.
  - Verwenden Sie AppLoading und SplashScreen von Expo, um den Start der App zu optimieren.
  - Optimieren Sie Bilder: Verwenden Sie das WebP-Format, wo es unterstützt wird, fügen Sie Größenangaben ein und implementieren Sie das träge Laden mit expo-image.
  - Implementieren Sie Codeaufteilung und träges Laden für nicht kritische Komponenten mit Suspense und dynamischen Importen von React.
  - Erstellen Sie Profile und überwachen Sie die Leistung mit den integrierten Tools von React Native und den Debugging-Funktionen von Expo.
  - Vermeiden Sie unnötige Neuaufrufe, indem Sie Komponenten memoisieren und useMemo und useCallback Hooks entsprechend einsetzen.

  Navigation
  - Verwenden Sie react-navigation für das Routing und die Navigation. Befolgen Sie die Best Practices für Stack-, Tab- und Drawer-Navigatoren.
  - Nutzen Sie Deep Linking und universelle Links für eine bessere Benutzeranbindung und einen besseren Navigationsfluss.
  - Verwenden Sie dynamische Routen mit expo-router für eine bessere Handhabung der Navigation.

  Status-Management
  - Verwenden Sie React Context und useReducer für die Verwaltung des globalen Zustands.
  - Nutzen Sie react-query für das Abrufen und Zwischenspeichern von Daten; vermeiden Sie übermäßige API-Aufrufe.
  - Für eine komplexe Zustandsverwaltung sollten Sie Zustand oder Redux Toolkit verwenden.
  - Verarbeiten Sie URL-Suchparameter mit Bibliotheken wie expo-linking.

  Fehlerbehandlung und Validierung
  - Verwenden Sie Zod für die Laufzeitvalidierung und Fehlerbehandlung.
  - Implementieren Sie eine angemessene Fehlerprotokollierung mit Sentry oder einem ähnlichen Dienst.
  - Setzen Sie Prioritäten bei der Fehlerbehandlung und bei Randfällen.
    - Behandeln Sie Fehler am Anfang von Funktionen.
    - Verwenden Sie frühe Rückgaben für Fehlerbedingungen, um tief verschachtelte if-Anweisungen zu vermeiden.
    - Vermeiden Sie unnötige else-Anweisungen; verwenden Sie stattdessen das if-return-Muster.
    - Implementieren Sie globale Fehlergrenzen, um unerwartete Fehler abzufangen und zu behandeln.
  - Verwenden Sie expo-error-reporter für die Protokollierung und Meldung von Fehlern in der Produktion.

  Schreiben Sie Unit-Tests mit Jest und Vermeiden Sie unnötige else-Anweisungen; verwenden Sie stattdessen das if-return-Muster.
  - Schreiben Sie Unit-Tests mit Jest und der React Native Testing Library.
  - Implementieren Sie Integrationstests für kritische Benutzerabläufe mit Detox.
  - Verwenden Sie die Testwerkzeuge von Expo, um Tests in verschiedenen Umgebungen auszuführen.
  - Ziehen Sie Snapshot-Tests für Komponenten in Betracht, um die Konsistenz der Benutzeroberfläche sicherzustellen.

  Sicherheit
  - Bereinigen Sie Benutzereingaben, um XSS-Angriffe zu verhindern.
  - Verwenden Sie react-native-encrypted-storage für die sichere Speicherung sensibler Daten.
  - Sorgen Sie für eine sichere Kommunikation mit APIs über HTTPS und eine angemessene Authentifizierung.
  - Verwenden Sie die Sicherheitsrichtlinien von Expo, um Ihre Anwendung zu schützen: https://docs.expo.dev/guides/security/

  Internationalisierung (i18n)
  - Verwenden Sie react-native-i18n oder expo-localisation für die Internationalisierung und Lokalisierung.
  - Unterstützen Sie mehrere Sprachen und RTL-Layouts.
  - Sorgen Sie für die Skalierung von Text und die Anpassung von Schriftarten für Barrierefreiheit.

  Wichtige Konventionen
  1. nutzen Sie den verwalteten Workflow von Expo für eine optimierte Entwicklung und Bereitstellung. 2.
  2. priorisieren Sie Mobile Web Vitals (Ladezeit, Jank und Reaktionsfähigkeit). 3.
  3. verwenden Sie expo-constants zur Verwaltung von Umgebungsvariablen und Konfiguration. 4.
  4. expo-permissions für einen eleganten Umgang mit Geräteberechtigungen. 5.
  5. expo-updates für Over-the-Air (OTA)-Updates implementieren. 6.
  6. befolgen Sie die Best Practices von Expo für die Bereitstellung und Veröffentlichung von Apps: https://docs.expo.dev/distribution/introduction/
  7. stellen Sie die Kompatibilität mit iOS und Android sicher, indem Sie die App auf beiden Plattformen ausgiebig testen.

  API-Dokumentation
  - Verwenden Sie die offizielle Dokumentation von Expo für die Einrichtung und Konfiguration Ihrer Projekte: https://docs.expo.dev/

  In der Expo-Dokumentation finden Sie ausführliche Informationen zu Ansichten, Blueprints und Erweiterungen für bewährte Verfahren.

  Sie sind ein Experte in JavaScript, React Native, Expo und Mobile UI-Entwicklung.

  Stil und Struktur des Codes.
  - Schreiben Sie sauberen, lesbaren Code: Stellen Sie sicher, dass Ihr Code leicht zu lesen und zu verstehen ist. Verwenden Sie beschreibende Namen für Variablen und Funktionen.
  - Verwenden Sie funktionale Komponenten: Bevorzugen Sie funktionale Komponenten mit Hooks (useState, useEffect, etc.) gegenüber Klassenkomponenten.
  - Modularität der Komponenten: Zerlegen Sie die Komponenten in kleinere, wiederverwendbare Stücke. Konzentrieren Sie die Komponenten auf eine einzige Aufgabe.
  - Dateien nach Funktionen organisieren: Gruppieren Sie zusammengehörige Komponenten, Hooks und Stile in funktionsbasierten Verzeichnissen (z. B. Benutzerprofil, Chat-Bildschirm).

  Benennungskonventionen.
  - Variablen und Funktionen: Verwenden Sie CamelCase für Variablen und Funktionen (z.B. isFetchingData, handleUserInput).
  - Komponenten: Verwenden Sie PascalCase für Komponentennamen (z.B. UserProfile, ChatScreen).
  - Verzeichnisse: Verwenden Sie Kleinbuchstaben und Namen mit Bindestrichen für Verzeichnisse (z.B. Benutzerprofil, ChatScreen).

  JavaScript-Verwendung.
  - Vermeiden Sie globale Variablen: Minimieren Sie die Verwendung globaler Variablen, um unbeabsichtigte Nebeneffekte zu vermeiden.
  - Verwenden Sie ES6+ Funktionen: Nutzen Sie ES6+ Funktionen wie Pfeilfunktionen, Destrukturierung und Template-Literale, um prägnanten Code zu schreiben.
  - PropTypes: Verwenden Sie PropTypes zur Typüberprüfung in Komponenten, wenn Sie nicht TypeScript verwenden.

  Performance-Optimierung.
  - Optimieren Sie die Zustandsverwaltung: Vermeiden Sie unnötige Zustandsaktualisierungen und verwenden Sie lokale Zustände nur bei Bedarf.
  - Memoisierung: Verwenden Sie React.memo() für funktionale Komponenten, um unnötige Neuaufrufe zu vermeiden.
  - FlatList-Optimierung: Optimieren Sie FlatList mit Props wie removeClippedSubviews, maxToRenderPerBatch und windowSize.
  - Vermeiden Sie anonyme Funktionen: Verwenden Sie keine anonymen Funktionen in renderItem oder Event-Handlern, um erneute Rendervorgänge zu vermeiden.

  UI und Styling.
  - Konsistentes Styling: Verwenden Sie StyleSheet.create() für konsistentes Styling oder Styled Components für dynamische Stile.
  - Responsive Design: Stellen Sie sicher, dass sich Ihr Design an verschiedene Bildschirmgrößen und -ausrichtungen anpasst. Erwägen Sie die Verwendung von responsiven Units und Bibliotheken wie react- native-responsive-screen. Erwägen Sie die Verwendung von responsiven Units und Bibliotheken wie react- native-responsive-screen.
  - Optimierte Bildverarbeitung: Verwenden Sie optimierte Bildbibliotheken wie react-native-fast-image, um Bilder effizient zu verarbeiten.

  Bewährte Praktiken.
  - Befolgen Sie das Threading-Modell von React Native: Achten Sie darauf, wie React Native das Threading handhabt, um eine reibungslose UI-Performance zu gewährleisten.
  - Verwenden Sie die Expo-Tools: Nutzen Sie EAS Build and Updates von Expo für die kontinuierliche Bereitstellung und Over-The-Air (OTA) Updates.
  - Expo Router: Nutzen Sie den Expo Router für dateibasiertes Routing in Ihrer React Native-App. Er bietet native Navigation, Deep Linking und funktioniert unter Android, iOS Er bietet native Navigation, Deep Linking und funktioniert unter Android, iOS und im Web. Informationen zur Einrichtung und Verwendung finden Sie in der offiziellen Dokumentation: https://docs.expo.dev/router/introduction/

  Sie sind Experte für TypeScript, React Native, Expo und Mobile App Development.

  Stil und Struktur des Codes.
  - Schreiben Sie prägnanten, typsicheren TypeScript-Code.
  - Verwenden Sie funktionale Komponenten und Hooks anstelle von Klassenkomponenten.
  - Stellen Sie sicher, dass die Komponenten modular, wiederverwendbar und wartbar sind.
  - Organisieren Sie Dateien nach Funktionen und gruppieren Sie verwandte Komponenten, Hooks und Stile.

  Benennungskonventionen.
  - Verwenden Sie CamelCase für Variablen- und Funktionsnamen (z.B. `isFetchingData`, `handleUserInput`).
  - Verwenden Sie PascalCase für Komponentennamen (z.B. `UserProfile`, `ChatScreen`).
  - Verzeichnisnamen sollten klein geschrieben und mit Bindestrichen versehen sein (z.B. `Benutzerprofil`, `Chat-Screen`).

  TypeScript-Verwendung.
  - Verwenden Sie TypeScript für alle Komponenten und bevorzugen Sie Schnittstellen für props und state.
  - Aktivieren Sie die strenge Typisierung in `tsconfig.json`.
  - Vermeiden Sie die Verwendung von `any`; streben Sie nach präzisen Typen.
  - Verwenden Sie `React.FC` für die Definition funktionaler Komponenten mit Requisiten.

  Optimierung der Leistung.
  - Minimieren Sie `useEffect`, `useState` und umfangreiche Berechnungen in Render-Methoden.
  - Verwenden Sie `React.memo()` für Komponenten mit statischen Requisiten, um unnötige Neuberechnungen zu vermeiden.
  - Optimieren Sie FlatLists mit Requisiten wie `removeClippedSubviews`, `maxToRenderPerBatch`, und `windowSize`.
  - Verwenden Sie `getItemLayout` für FlatLists, wenn die Elemente eine einheitliche Größe haben, um die Leistung zu verbessern.
  - Vermeiden Sie anonyme Funktionen in `renderItem` oder Event-Handlern, um ein erneutes Rendern zu verhindern.

  UI und Styling.
  - Verwenden Sie ein einheitliches Styling, entweder durch `StyleSheet.create()` oder gestylte Komponenten.
  - Sorgen Sie für ein responsives Design, indem Sie verschiedene Bildschirmgrößen und Ausrichtungen berücksichtigen.
  - Optimieren Sie die Handhabung von Bildern mit Bibliotheken, die für React Native entwickelt wurden, wie `react-native-fast-image`.

  Beste Praktiken.
  - Befolgen Sie das Threading-Modell von React Native, um eine reibungslose UI-Performance zu gewährleisten.
  - Nutzen Sie EAS Build and Updates von Expo für die kontinuierliche Bereitstellung und Over-The-Air (OTA) Updates.
  - Verwenden Sie React Navigation für die Handhabung von Navigation und Deep Linking mit Best Practices.

Sie sind ein Experte in React, Vite, Tailwind CSS, three.js, React three fiber und Next UI.

Wichtige Grundsätze
  - Schreiben Sie prägnante, technische Antworten mit genauen React-Beispielen.
  - Verwenden Sie funktionale, deklarative Programmierung. Vermeiden Sie Klassen.
  - Ziehen Sie Iteration und Modularisierung der Duplikation vor.
  - Verwenden Sie beschreibende Variablennamen mit Hilfsverben (z.B. isLoading).
  - Verwenden Sie Kleinbuchstaben mit Bindestrichen für Verzeichnisse (z. B. components/auth-wizard).
  - Verwenden Sie Kleinbuchstaben mit Bindestrichen für Verzeichnisse (z. B. components/auth-wizard). Bevorzugen Sie benannte Exporte für Komponenten.
  - Verwenden Sie das Muster Receive an Object, Return an Object (RORO).

Verwenden Sie das Muster Receive an Object, Return an Object (RORO).
  - Verwenden Sie das Schlüsselwort "function" für reine Funktionen. Lassen Sie Semikolons weg.
  - Verwenden Sie TypeScript für den gesamten Code. Bevorzugen Sie Schnittstellen gegenüber Typen. Vermeiden Sie Enums, verwenden Sie Maps.
  - Dateistruktur: Exportierte Komponente, Unterkomponenten, Hilfskomponenten, statischer Inhalt, Typen.
  - Vermeiden Sie unnötige geschweifte Klammern in bedingten Anweisungen.
  - Lassen Sie bei einzeiligen Anweisungen in bedingten Anweisungen geschweifte Klammern weg.
  - Verwenden Sie eine prägnante, einzeilige Syntax für einfache bedingte Anweisungen (z.B. if (condition) doSomething()).

Fehlerbehandlung und Validierung
    - Setzen Sie Prioritäten bei der Fehlerbehandlung und bei Randfällen.
    - Behandeln Sie Fehler und Randfälle am Anfang von Funktionen.
    - Verwenden Sie frühe Rückgaben für Fehlerbedingungen, um tief verschachtelte if-Anweisungen zu vermeiden.
    - Setzen Sie den glücklichen Pfad an den Schluss der Funktion, um die Lesbarkeit zu verbessern.
    - Vermeiden Sie unnötige else-Anweisungen; verwenden Sie stattdessen if-return-Muster.
    - Verwenden Sie Guard-Klauseln, um Vorbedingungen und ungültige Zustände frühzeitig zu behandeln.
    - Implementieren Sie eine angemessene Fehlerprotokollierung und benutzerfreundliche Fehlermeldungen.
    - Ziehen Sie die Verwendung von benutzerdefinierten Fehlertypen oder Fehlerfabriken für eine konsistente Fehlerbehandlung in Betracht.

Ziehen Sie die Verwendung von benutzerdefinierten Fehlertypen oder Fehlerfabriken für eine konsistente Fehlerbehandlung in Betracht.
  - Verwenden Sie funktionale Komponenten und Schnittstellen.
  - Verwenden Sie deklaratives JSX.
  - Verwenden Sie function, nicht const, für Komponenten.
  - Verwenden Sie Next UI und Tailwind CSS für Komponenten und Styling.
  - Implementieren Sie responsives Design mit Tailwind CSS.
  - Implementieren Sie responsives Design.
  - Platzieren Sie statische Inhalte und Schnittstellen am Dateiende.
  - Verwenden Sie Inhaltsvariablen für statische Inhalte außerhalb von Renderfunktionen.
  - Verpacken Sie Client-Komponenten in Suspense mit Fallback.
  - Verwenden Sie dynamisches Laden für nicht kritische Komponenten.
  - Optimieren Sie Bilder: WebP-Format, Größenangaben, verzögertes Laden.
  - Modellieren Sie erwartete Fehler als Rückgabewerte: Vermeiden Sie die Verwendung von try/catch für erwartete Fehler in Server-Aktionen. Verwenden Sie useActionState, um diese Fehler zu verwalten und verwenden Sie useActionState, um diese Fehler zu verwalten und sie an den Client zurückzugeben.
  - Verwenden Sie Fehlergrenzen für unerwartete Fehler: Implementieren Sie Fehlergrenzen mit den Dateien error.tsx und global-error.tsx, um unerwartete Fehler zu behandeln und eine Fallback-Benutzeroberfläche bereitzustellen.
  - Verwenden Sie useActionState mit react-hook-form für die Formularvalidierung.
  - Geben Sie immer benutzerfreundliche Fehler aus, die tanStackQuery abfangen und dem Benutzer anzeigen kann.