Einführung von ausgereifter Entwicklungserfahrung als Regeln für KI-generierten Front-End-Code: Next.js 14 Development Cue Words, Swift und SwiftUI Development Cue Words

geeignet als Cursor AI-IDE-Tools wie Windsurf, Cline usw. normalisieren den für Front-End-Projekte generierten Code. Solche Tools, obwohlVollständigen Projektcode generierenDie Fähigkeit ist sehr mächtig, aber das Fehlen von grundlegenden Einschränkungen kann zu einer großen Anzahl von ungültigen Token Verbrauch führen, vor allem bei der Generierung von Front-End-Projekte, denn es gibt keine Einschränkungen für die grundlegende Entwicklung Rahmen, der Standard-Front-End-Seite Generation Ergebnisse sind niedriger als die Schraube , undv0.dev Eine Klasse von Werkzeugen.

Die Einführung eines ausgereiften technologischen Rahmens und grundlegender Einschränkungen zu diesem Zeitpunkt ermöglicht eine bessere Generierung von Front-End-Projektcode mit weniger Schritten und Token, die verbraucht werden müssen.

Next.js 14 Entwicklungsregeln Original

#-Regeln für die Entwicklung von Next.js 14
## Allgemeine Richtlinien
1. verwenden Sie Next.js 14 mit TypeScript und Tailwind CSS für optimale Entwicklererfahrung und Typensicherheit. 2.
2. verwenden Sie `bun` für alle Paketinstallationen und -verwaltung. 3.
3. implementieren Sie den App Router, der das empfohlene Routing-System für Next.js 14 ist. 4.
4. standardmäßig Server-Komponenten verwenden und Client-Komponenten nur dann einsetzen, wenn sie für Interaktivität oder Client-seitigen Status notwendig sind. 5.
5. die Verwendung von Server Actions für die Verarbeitung von Datenmutationen und Formularübermittlungen. 6.
6. implementieren Sie geeignete Caching-Strategien unter Verwendung der in Next.js integrierten Caching-Mechanismen.
7. sicherstellen, dass alle Komponenten und Seiten gemäß den WCAG-Richtlinien zugänglich sind. 8.
8. die Verwendung von Umgebungsvariablen für die Konfiguration gemäß den Next.js Konventionen.
9. implementieren Sie Performance-Optimierungen wie Code-Splitting, Lazy Loading und paralleles Laden von Daten, wo es angebracht ist.
10. klare, prägnante Kommentare zur Erläuterung komplexer Logik oder Designentscheidungen.
## Codestruktur und Syntax
1. verwenden Sie das Verzeichnis "app" für alle Komponenten und Seiten. 2.
2. implementieren Sie die folgenden Dateikonventionen im `app`-Verzeichnis.
- `layout.tsx`: Für eine gemeinsame Benutzeroberfläche auf mehreren Seiten
- page.tsx": Für einzigartige Seiteninhalte
- loading.tsx`: Für das Laden der Benutzeroberfläche
- `error.tsx`: Für die Benutzeroberfläche bei Fehlern
- `not-found.tsx`: Für 404-Seiten
3) Verwenden Sie standardmäßig Server-Komponenten und fügen Sie die Direktive `'use client'` nur bei der Erstellung von Client-Komponenten hinzu.
4) Definieren Sie Komponenten unter Verwendung der Pfeilfunktionssyntax mit TypeScript.
``tsx
importiere { FC } von 'react';
interface ComponentProps {
// Requisitendefinition
}
const Component: FC = ({ prop1, prop2 }) => {
// Komponentenlogik
}
export default Component.
```
5) Für Seitenkomponenten verwenden Sie Standard-Exporte.
``tsx
export default function Seite() {
// Logik der Seitenkomponente
}
```
6. wenn explizite Typisierung erforderlich ist, bevorzugen Sie `React.FC` oder `React.
``tsx
importieren Reagieren Sie von 'react';
const Komponentenname: React.FC = () => {
// Komponentenlogik
}; }
// ODER
const Komponentenname = (): React.ReactNode => {
// Komponentenlogik
};
```
## Leitweglenkung und Navigation
1. verschachteltes Routing mit Ordnerstruktur im `app`-Verzeichnis implementieren. 2.
2. verwenden Sie die `<link>Komponente von `next/link` für die clientseitige Navigation.
`tsx
importiere Link von 'next/link';
<link href="/about">Über</Link>
``
3. dynamische Routen unter Verwendung von Ordnernamen mit eckigen Klammern implementieren (z.B. `[id]`).
4. verwenden Sie `generateStaticParams` zur Erzeugung statischer Pfade in dynamischen Routen.
## Datenabrufe und API-Routen
1. die Verwendung von Server-Komponenten und der "fetch"-API zum Abrufen von Daten unter Nutzung der automatischen Deduplizierung von Next.js-Anfragen.
`tsx
async Funktion getData() {
const res = await fetch(')<https:>', { next: { revalidate: 3600 });
if (!res.ok) throw new Error('Daten konnten nicht geholt werden');
return res.json();
}
export default async function Page() {
const data = await getData(); // Rendering der Komponente unter Verwendung der Daten.
// Rendering der Komponente unter Verwendung der Daten
}
``
2. implementieren Sie Server-Aktionen für Datenmutationen.
``tsx
'use server'; ``tsx''; ``tsx''; ``tsx''.
import { revalidatePath } from 'next/cache';
export async function updateData(formData: FormData) {
// Aktualisieren Sie die Daten in Ihrer Datenbank
revalidatePath('/data'); }
}
``
3. route handlers (route.ts) für API-Routen im App Router verwenden.
4. statische Site-Generierung (SSG) und serverseitiges Rendering (SSR) unter Verwendung von App-Router-Konventionen implementieren, wenn dies angemessen ist.
## Zustandsverwaltung und Interaktivität
1. die Verwendung von Server-Aktionen für Formularübertragungen und Datenmutationen.
```tsx
importiere { updateData } von '. /actions'.
export default function Form() {
return (
<form action="{updateData}" data-trp-original-action="{updateData}">
<input type="text" name="data" />
<button type="submit">Update</button>
<input type="hidden" name="trp-form-language" value="de"/></form>
);
}
``
2) Implementieren Sie bei Bedarf React-Hooks für die clientseitige Zustandsverwaltung.
3) Verwenden Sie die `useState`- und `useEffect`-Hooks in Client-Komponenten für lokale Zustände und Seiteneffekte.
## Styling
1. verwenden Sie ausschließlich Tailwind-CSS-Klassen für das Styling. vermeiden Sie Inline-Stile.
``tsx
<div classname="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{/* Inhalt der Komponente */}
</div>
``
2. benutzerdefinierte Tailwind-Klassen in der Datei "tailwind.config.js" für wiederverwendbare Stile erstellen.
3. bei Bedarf CSS-Module für komponentenspezifische Stile verwenden.
## Performance-Optimierung
1. automatische statische Optimierung für geeignete Seiten implementieren. 2.
2. dynamische Importe für die Code-Aufteilung verwenden.
```tsx
import dynamic from 'next/dynamic'; ``tsx''; ``tsx''; ``tsx''.
const DynamicComponent = dynamic(() =&gt; import('... /components/DynamicComponent')); const
``
3. die Komponente Image aus `next/image` für die automatische Bildoptimierung verwenden.
``tsx
import Image from 'next/image'; ``tsx''.
<image src="/image.jpg" alt="Description" width="{500}" height="{300}" />
``
4) Implementieren Sie geeignete Caching-Strategien unter Verwendung des Data Cache und des Full Route Cache.
5. die in Next.js 14 integrierten Caching- und Revalidierungsfunktionen für eine optimale Leistung nutzen.
```tsx
importiere { unstable_cache } von 'next/cache';
const getCachedUser = unstable_cache(
async (id: string) =&gt; getUser(id),
['user-cache'],
{ revalidate: 3600 } // Revalidate jede Stunde
);
``
6 Verwenden Sie gegebenenfalls eine bedarfsgesteuerte Validierung.
``tsx
importiere { revalidatePath, revalidateTag } von 'next/cache';
export async function updateData() {
// Aktualisieren Sie die Daten in Ihrer Datenbank
revalidatePath('/data'); // Revalidieren Sie einen bestimmten Pfad
revalidateTag('data-tag'); // Revalidiere alle Einträge mit diesem Tag
}
``
7. paralleles Abrufen von Daten zur Verbesserung der Leistung implementieren.
``tsx
async Funktion ParallelDataFetch() {
const dataPromise = fetch('<https:>');
const userPromise = fetch('<https:>').
const [data, user] = await Promise.all([
dataPromise.then(res =&gt; res.json()),
userPromise.then(res =&gt; res.json()))
]);
return { data, user };
}
``
## Fehlerbehandlung und Ladezustände
1. error.tsx-Dateien für Fehlergrenzen erstellen.
``tsx
Client verwenden'.
export default function Error({
error, reset
error, reset, }: { error, reset, reset, reset, reset, reset, reset
}: {
error: Error &amp; { digest?: string }; reset: () =&gt; void; { error: Error &amp; { digest?
reset: () =&gt; void; }) { error: Fehler &amp; { digest?
}) {
return (
<div>
<h2>Etwas ist schief gelaufen!</h2>
<button onclick="{()" > reset()}&gt;Neuer Versuch</button>
</div>
);
}
``
2. loading.tsx-Dateien für die Verwaltung von Ladezuständen implementieren.
3) Verwenden Sie React Suspense für granularere Ladezustände.
``tsx
importiere { Suspense } von 'react';
export default function Seite() {
return (
<suspense fallback="{<Loading" />}>
<somecomponent />
</Suspense>
);
}
``
## SEO und Metadaten
1. die Metadaten-API für die SEO-Optimierung nutzen.
```tsx
importiere Typ { Metadaten } von 'next';
export const metadata: Metadata = {
title: 'Seitentitel',
description: 'Seitenbeschreibung', }
}; }
```
2) Implementieren Sie dynamische Metadaten mit generateMetadata für Seiten mit dynamischem Inhalt.
## Composer-Modus-spezifische Richtlinien
1. wenn Sie den Composer-Modus verwenden, geben Sie klare, natürlichsprachliche Beschreibungen der gewünschten Änderungen oder Ergänzungen an. 2.
2 Geben Sie bei Vorgängen mit mehreren Dateien die beteiligten Dateien und ihre Beziehungen an. 3.
3. wenn Sie die Codegenerierung anfordern, geben Sie den Kontext der gewünschten Funktionalität an und wie sie in die bestehende Projektstruktur passt. 4.
4. bei Refactoring-Aufgaben beschreiben Sie die aktuelle Codestruktur und das gewünschte Ergebnis. 5.
(5) Bei der Behebung von Fehlern sind Einzelheiten über die Fehlermeldung und den umgebenden Code-Kontext anzugeben.
Denken Sie daran, diese Regeln an die spezifischen Projektanforderungen und persönlichen Vorlieben anzupassen. Priorisieren Sie immer sauberen, effizienten und wartbaren Code, der Next einhält. Code, der den Next.js 14 Best Practices entspricht.

Next.js 14 Entwicklungsregeln Übersetzung

# Next.js 14 Entwicklungsregeln
## Allgemeine Richtlinien
1. verwenden Sie Next.js 14 mit TypeScript und Tailwind CSS für die beste Entwicklungserfahrung und Typsicherheit.
2. verwenden Sie `bun` für die gesamte Paketinstallation und -verwaltung.
3. Implementieren Sie App Router, das von Next.js 14 empfohlene Routing-System.
4. standardmäßig Server-Komponenten zu verwenden und Client-Komponenten nur dann zu verwenden, wenn Interaktion oder Client-seitiger Status erforderlich ist. 5. Server-Komponenten für Server-seitige Operationen zu verwenden.
5. verwenden Sie Server-Aktionen, um Datenänderungen und Formularübermittlungen zu verarbeiten.
6. implementieren Sie geeignete Caching-Richtlinien unter Verwendung der in Next.js eingebauten Caching-Mechanismen.
7. sicherstellen, dass alle Komponenten und Seiten die Zugänglichkeitsstandards der WCAG-Richtlinien erfüllen.
8. die Next.js-Konventionen für die Konfiguration mit Umgebungsvariablen zu befolgen.
9. Performance-Optimierungen wie Code-Splitting, Lazy Loading und paralleles Data Fetching implementieren.
10. klare und prägnante Anmerkungen für komplexe Logik oder Designentscheidungen bereitstellen.
## Codestruktur und Syntax
1 Verwenden Sie das Verzeichnis "app", um alle Komponenten und Seiten zu speichern. 2.
(2) Im Verzeichnis "app" werden die folgenden Dateinamenskonventionen eingehalten:
- `layout.tsx`: UI, die von mehreren Seiten gemeinsam genutzt wird.
- page.tsx": für einzelne Seiteninhalte
- loading.tsx": für das Laden von Benutzeroberflächen
- `error.tsx`: Benutzeroberfläche für die Fehlerbehandlung
- `not-found.tsx`: für 404-Seiten.
3. standardmäßig serverseitige Komponenten verwenden. Fügen Sie die Direktive `'use client'` nur bei der Erstellung von clientseitigen Komponenten hinzu. 4.
4. verwenden Sie TypeScripts Pfeilfunktionssyntax, um Komponenten zu definieren:
``tsx
import { FC } from 'react'; ``tsx''; ``tsx''; ``tsx''
interface ComponentProps {
// Eigenschaftsdefinition
}
const Komponente: FC<componentprops> = ({ prop1, prop2 }) =&gt; {
// Komponentenlogik
};
export default Component.
```
5) Für Seitenkomponenten verwenden Sie den Standard-Export:
```tsx
export default function Seite() {
// Logik für die Seitenkomponente
}
``
6 Wenn explizite Typen erforderlich sind, verwenden Sie vorzugsweise `React.FC` oder `React.ReactNode`:
``tsx
importiere React von 'react'; ``tsx
const Komponentenname: React.FC = () =&gt; {
// Komponentenlogik
};
// oder
const Komponentenname = (): React.ReactNode =&gt; {
// Komponentenlogik
};
``
## Weiterleitung und Navigation
1. implementieren Sie ein verschachteltes Routing im `app` Verzeichnis unter Verwendung einer Ordnerstruktur. 2.
2. Verwenden Sie den ``next/link``, der von ``next/link`` bereitgestellt wird.<link>Komponente für die clientseitige Navigation:
``tsx
importiere Link von 'next/link';
<link href="/about">Über uns</Link>
``
3. verwenden Sie Ordnernamen mit eckigen Klammern (z.B. `[id]`), um dynamische Routen zu implementieren.
4) Verwenden Sie `generateStaticParams`, um statische Pfade für dynamische Routen zu erzeugen.
## Datenabruf und API-Routing
1. server-seitige Komponenten und die "fetch"-API zum Abrufen von Daten verwenden und dabei die automatische Request-Deduplizierung von Next.js nutzen:
``tsx
async Funktion getData() {
const res = await fetch(')<https:>', { next: { revalidate: 3600 });
if (!res.ok) throw new Error('Es konnten keine Daten abgerufen werden');
return res.json();
}
export default async function Page() {
const data = await getData();
// Rendering der Komponente unter Verwendung der Daten
}
``
2 Verwenden Sie serverseitige Operationen, um Datenänderungen zu verarbeiten:
```tsx
'use server'; ``tsx''; ``tsx''; ``tsx''
importiere { revalidatePath } von 'next/cache'.
export async function updateData(formData: FormData) {
// Aktualisieren der Daten in der Datenbank
revalidatePath('/data'); }
}
``
3. API-Routing im App Router mit route.ts implementieren.
4. Verwenden Sie die App-Router-Konventionen, um gegebenenfalls statische Site-Generierung (SSG) und serverseitiges Rendering (SSR) zu implementieren.
## State Management und Interaktion
1. Server-seitige Aktionen verwenden, um Formularübermittlungen und Datenänderungen zu verarbeiten:
```tsx
importiere { updateData } von '. /actions';
export default function Form() {
return (
<form action="{updateData}" data-trp-original-action="{updateData}">
<input type="text" name="data" />
<button type="submit">Update</button>
<input type="hidden" name="trp-form-language" value="de"/></form>
);
}
``
2. bei Bedarf React-Hooks für die clientseitige Zustandsverwaltung verwenden.
3. verwenden Sie `useState` und `useEffect` Hooks, um lokale Zustände und Seiteneffekte in Client-seitigen Komponenten zu verwalten.
##-Stile
1. verwenden Sie die Tailwind-CSS-Klasse für das Styling und vermeiden Sie Inline-Styling:
``tsx
<div classname="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{/* Inhalt der Komponente */}
</div>
``
2. eine eigene Tailwind-Klasse in der Datei "tailwind.config.js" erstellen, um wiederverwendbare Stile zu ermöglichen. 3.
3. verwenden Sie das CSS-Modul, um bestimmte Komponenten bei Bedarf zu gestalten.
## Leistungsoptimierung
1. automatische statische Optimierung für geeignete Seiten implementieren. 2.
2. Verwenden Sie dynamische Importe für die Code-Aufteilung:
``tsx
import dynamic from 'next/dynamic'.
const DynamicComponent = dynamic(() =&gt; import('... /components/DynamicComponent'));
```
3) Verwenden Sie die Image-Komponente von `next/image` für die automatische Bildoptimierung:
``tsx
import Image from 'next/image'; ``tsx''.
<image src="/image.jpg" alt="描述" width="{500}" height="{300}" />
``
4. geeignete Caching-Policies mit Daten-Caching und Full-Route-Caching zu implementieren.
5. die in Next.js 14 eingebauten Caching- und Revalidierungsfunktionen zu nutzen, um die Leistung zu verbessern:
```tsx
import { unstable_cache } from 'next/cache'.
const getCachedUser = unstable_cache(
async (id: string) =&gt; getUser(id),
['user-cache'],
{ revalidate: 3600 } // stündlich neu validieren
);
``
6 Verwenden Sie gegebenenfalls eine bedarfsgesteuerte Überprüfung:
```tsx
importiere { revalidatePath, revalidateTag } von 'next/cache' ;
export async function updateData() {
// Aktualisieren der Daten in der Datenbank
revalidatePath('/data'); // Bestimmte Pfade revalidieren
revalidateTag('data-tag'); // Revalidiere alle Einträge mit diesem Tag
}
``
7. paralleles Abrufen von Daten implementieren, um die Leistung zu verbessern:
```tsx
async Funktion ParallelDataFetch() {
const dataPromise = fetch('<https:>');
const userPromise = fetch('<https:>').
const [data, user] = await Promise.all([
dataPromise.then(res =&gt; res.json()),
userPromise.then(res =&gt; res.json()))
]);
return { data, user };
}
``
## Fehlerbehandlung und Ladestatus
1 Erstellen Sie die Datei error.tsx als Fehlergrenze:
``tsx
'use client'.
export default function Error({
error, reset
error, reset, }: { error, reset, reset, reset, reset, reset, reset
}: {
error: Error &amp; { digest?: string }; reset: () =&gt; void; { error: Error &amp; { digest?
reset: () =&gt; void; }) { error: Fehler &amp; { digest?
}) {
return (
<div>
<h2>Es ist ein Fehler aufgetreten!</h2>
<button onclick="{()" > reset()}&gt;wiederholen</button>
</div>
);
}
``
2. eine Datei loading.tsx erstellen, um den Ladezustand zu verwalten.
3. verwenden Sie React Suspense, um einen granulareren Ladezustand zu erreichen:
``tsx
importiere { Suspense } von 'react';
export default function Seite() {
return (
<suspense fallback="{<Loading" />}>
<somecomponent />
</Suspense>
);
}
``
## SEO und Metadaten
1. die Metadaten-API für die SEO-Optimierung nutzen:
``tsx
importiere Typ { Metadaten } von 'next' ;
export const metadata: Metadata = {
title: 'Titel der Seite', description: 'Beschreibung der Seite', ``tsx import type { metadata
}; }
```
2) Für dynamische Inhaltsseiten verwenden Sie generateMetadata, um dynamische Metadaten zu implementieren.
## Composer Schema-spezifische Richtlinien
1. Beschreiben Sie bei der Verwendung des Composer-Schemas die erforderlichen Änderungen oder Ergänzungen in einer klaren, natürlichen Sprache. 2. Geben Sie bei Operationen mit mehreren Dateien die beteiligten Dateien und ihre Beziehungen klar an.
2. Geben Sie bei Operationen mit mehreren Dateien die beteiligten Dateien und ihre Beziehungen zueinander an.
3. Wenn Sie die Codegenerierung anfordern, geben Sie den Kontext der gewünschten Funktionalität an und wie sie in die bestehende Projektstruktur passt.
4. Bei Refactoring-Aufgaben beschreiben Sie die aktuelle Codestruktur und das gewünschte Ergebnis.
5. Bei der Behebung von Fehlern sind detaillierte Informationen über die Fehlermeldung und ihren Kontext anzugeben.
Denken Sie daran, diese Regeln an die spezifischen Projektanforderungen und persönlichen Vorlieben anzupassen. Priorisieren Sie immer das Schreiben von klarem, effizientem und wartbarem Code, der mit den Next.js 14 Best Practices konform ist.

Swift und SwiftUI Entwicklungsregeln

# SwiftUI Best Practices für die iOS-App-Entwicklung
Wenn Sie Code generieren, Fehler finden oder SwiftUI-Projekte optimieren, sollten Sie diese Richtlinien befolgen.
## Allgemeine Richtlinien
- Sie sind ein erfahrener KI-Programmierassistent, der sich darauf konzentriert, klaren, lesbaren SwiftUI-Code zu erstellen.
- Verwenden Sie immer die neueste Version von SwiftUI und Swift (Stand: August/September 2024), und seien Sie mit den neuesten Funktionen und Best Practices vertraut.
- Geben Sie genaue, sachliche und durchdachte Antworten und zeichnen Sie sich durch eine gute Argumentation aus.
- Befolgen Sie die Anforderungen des Benutzers sorgfältig und buchstabengetreu.
- Denken Sie Schritt für Schritt - beschreiben Sie Ihren Plan für die Entwicklung in Pseudocode, der bis ins kleinste Detail ausgearbeitet ist.
- Bestätigen Sie immer Ihr Verständnis, bevor Sie Code schreiben.
- Schreiben Sie korrekten, aktuellen, fehlerfreien, voll funktionsfähigen, funktionierenden, sicheren, leistungsfähigen und effizienten Code.
- Geben Sie der Lesbarkeit Vorrang vor der Leistung.
- Implementieren Sie alle geforderten Funktionen vollständig.
- Lassen Sie KEINE TODOs, Platzhalter oder fehlende Stücke.
- Reduzieren Sie andere Prosa auf ein Minimum.
- Wenn Sie glauben, dass es keine richtige Antwort gibt, sagen Sie es.
## 1. staatliche Verwaltung
- Verwenden Sie geeignete Property Wrappers und Makros.
- Annotieren Sie View-Modelle mit `@Observable`, z.B. `@Observable final class MyModel`.
- Verwenden Sie nicht @State in der SwiftUI View für die Beobachtung von View-Modellen, sondern `let model: MyModel`.
- Für den Status des Referenztyps, der mit einer untergeordneten Ansicht geteilt wird, übergeben Sie die Abhängigkeit an den Konstruktor der untergeordneten Ansicht.
- Für einen Zustand vom Typ value, der mit einer Child-View geteilt wird, verwenden Sie SwiftUI-Bindings, wenn und nur wenn die Child-View Schreibzugriff auf den Zustand benötigt.
- Für den Werttyp state, der mit einer Child-View geteilt wird, übergeben Sie den Wert, wenn die Child-View nur Lesezugriff auf den state benötigt.
- Verwenden Sie ein `@Environment` für Zustände, die in der gesamten Anwendung oder in großen Teilen der Anwendung gemeinsam genutzt werden sollen.
- Verwenden Sie `@State` nur für lokale Zustände, die von der View selbst verwaltet werden.
## 2. Leistungsoptimierung
- Implementieren Sie "lazy loading" für große Listen oder Grids mit `LazyVStack`, `LazyHStack` oder `LazyVGrid`.
- Optimieren Sie ForEach-Schleifen durch die Verwendung stabiler Bezeichner.
## 3. wiederverwendbare Komponenten
- Implementierung benutzerdefinierter View Modifier für gemeinsames Styling und Verhalten.
- Verwenden Sie Erweiterungen, um bestehende Typen um wiederverwendbare Funktionen zu ergänzen.
## 4. barrierefrei
- Hinzufügen von Modifikatoren für Barrierefreiheit zu allen UI-Elementen.
- Unterstützung von Dynamic Type für die Textskalierung.
- Klare Kennzeichnungen und Hinweise für die Zugänglichkeit bereitstellen.
## 5. SwiftUI Lebenszyklus
- Verwenden Sie `@main` und `App` Protokoll für den Einstiegspunkt der App.
- Implementieren Sie `Scene` für die Verwaltung der App-Struktur.
- Geeignete View-Lebenszyklus-Methoden wie `onAppear` und `onDisappear` verwenden.
## 6. Datenfluss
- Verwendung des Observations-Frameworks (`@Observable`, `@State` und `@Binding`) zur Erstellung reaktiver Views.
- Implementierung einer angemessenen Fehlerbehandlung und -weiterleitung.
## 7. Testen
- Schreiben Sie Unit-Tests für ViewModels und Geschäftslogik im Ordner UnitTests.
- Schreiben Sie Unit-Tests für ViewModels und Geschäftslogik im Ordner UnitTests. Implementieren Sie UI-Tests für kritische Benutzerabläufe im Ordner UITests.
- Verwenden Sie Preview-Provider für schnelle UI-Iterationen und -Tests.
## 8. SwiftUI-spezifische Patterns
- Verwenden Sie `@Binding` für den bidirektionalen Datenfluss zwischen übergeordneten und untergeordneten Ansichten.
- Implementieren Sie benutzerdefinierte `PreferenceKey` für die Kommunikation von Kind zu Elternteil.
- Verwendung von `@Environment` für Dependency Injection.
## 9: Stil und Formatierung des Codes
- Befolgen Sie die Swift-Stilrichtlinien für Namenskonventionen und Codestruktur.
- Verwenden Sie SwiftLint oder ähnliche Tools, um einen konsistenten Code-Stil zu erzwingen.
Achten Sie beim Generieren oder Überprüfen von Code auf die Einhaltung dieser Best Practices. Identifizieren und beheben Sie alle Verstöße, um qualitativ hochwertigen, performanten und wartbaren SwiftUI-Code zu erhalten.
Denken Sie daran, dass die beste Struktur diejenige ist, die für Ihr spezifisches Projekt und Team gut funktioniert. Sie können diese Struktur gerne anpassen, wenn Ihr Projekt wächst und Ihr Team wächst. Sie können diese Struktur gerne anpassen, wenn Ihr Projekt wächst und sich Ihre Bedürfnisse entwickeln.

Swift und SwiftUI Entwicklungsregeln Übersetzung

# SwiftUI Best Practices für die Entwicklung von iOS-Apps
Befolgen Sie diese Richtlinien, wenn Sie Code generieren, Fehler finden oder Ihr SwiftUI-Projekt optimieren:
## Allgemeine Richtlinien
- Sie sind ein professioneller KI-Programmierassistent, der sich darauf konzentriert, klaren, lesbaren SwiftUI-Code zu erzeugen.
- Verwenden Sie immer die neueste Version von SwiftUI und Swift (Stand: August/September 2024) und seien Sie mit den neuesten Funktionen und Best Practices vertraut.
- Liefern Sie genaue, faktenbasierte, gut durchdachte Antworten und zeichnen Sie sich durch eine gute Argumentation aus.
- Halten Sie sich strikt an die Benutzeranforderungen.
- Denken Sie Schritt für Schritt - verwenden Sie Pseudocode, um den Bauplan im Detail zu beschreiben.
- Bestätigen Sie immer Ihr Verständnis der Anforderungen, bevor Sie Code schreiben.
- Schreiben Sie Code, der korrekt, aktuell, fehlerfrei, voll funktionsfähig, sicher und effizient ist.
- Geben Sie der Lesbarkeit des Codes Vorrang vor der Leistung.
- Implementieren Sie alle geforderten Funktionen vollständig.
- Hinterlassen Sie keine TODOs, Platzhalter oder fehlende Abschnitte.
- Halten Sie den Code einfach und minimieren Sie anderen überflüssigen Text.
- Wenn Sie glauben, dass es keine richtige Antwort gibt, geben Sie dies an. Wenn Sie die Antwort nicht wissen, sagen Sie das auch offen.
## 1. Statusverwaltung
- Verwenden Sie geeignete Property Wrapper und Makros:
- Verwenden Sie `@Observable`, um das View-Modell zu markieren, z.B. `@Observable final class MyModel`.
- Verwenden Sie nicht `@State`, um das View Model in einer SwiftUI View zu beobachten. Verwenden Sie stattdessen `let model: MyModel`.
- Für den Status eines Referenztyps, der mit einer Unteransicht geteilt wird, übergeben Sie die Abhängigkeit an den Konstruktor der Unteransicht.
- Für den Status eines Wertes, der mit einer Unteransicht geteilt wird, verwenden Sie SwiftUI Bindings, wenn die Unteransicht Schreibzugriff erfordert, oder übergeben Sie den Wert, wenn er nur Lesezugriff erfordert.
- Verwenden Sie `@Environment` für Zustände, die von der gesamten oder einem Großteil der Anwendung geteilt werden müssen.
- Verwenden Sie `@State` nur für lokale Zustände, die von der Ansicht selbst verwaltet werden.
## 2. Leistungsoptimierung
- Verwenden Sie `LazyVStack`, `LazyHStack` oder `LazyVGrid` für das träge Laden von großen Listen oder Gittern.
- Optimieren Sie ForEach-Schleifen mit stabilen Bezeichnern.
## 3. wiederverwendbare Komponenten
- Implementierung benutzerdefinierter Ansichtsmodifikatoren zur gemeinsamen Nutzung von Stilen und Verhalten.
- Verwenden Sie Erweiterungen, um wiederverwendbare Funktionen zu bestehenden Typen hinzuzufügen.
## 4) Zugänglichkeit
- Hinzufügen von Modifikatoren für Barrierefreiheit zu allen UI-Elementen.
- Unterstützung dynamischer Schriftarten für die Textskalierung.
- Klare Kennzeichnung der Zugänglichkeit und Aufforderungen.
## 5. SwiftUI Lebenszyklus
- Verwendung der Protokolle `@main` und `App` als Einstiegspunkte in die Anwendung.
- Verwenden Sie `Scene`, um die Anwendungsstruktur zu verwalten.
- Verwenden Sie geeignete Methoden für den Lebenszyklus der Ansicht, wie `onAppear` und `onDisappear`.
## 6. Datenfluss
- Verwendung des Observation-Frameworks (`@Observable`, `@State` und `@Binding`) zur Erstellung von responsiven Views.
- Implementierung einer geeigneten Fehlerbehandlung und -weiterleitung.
## 7. Testen
- Schreiben Sie Unit-Tests für das View-Modell und die Geschäftslogik im Ordner UnitTests.
- Implementieren Sie UI-Tests für wichtige Benutzerprozesse im Ordner UITests.
- Verwenden Sie den Preview-Anbieter für schnelle UI-Iterationen und -Tests.
## 8. SwiftUI-spezifische Patterns
- Implementieren Sie einen bidirektionalen Datenfluss zwischen Parent- und Child-Views mit `@Binding`.
- Implementieren Sie einen benutzerdefinierten `PreferenceKey` für die Kind-zu-Eltern-Kommunikation.
- Implementierung von Dependency Injection mit `@Environment`.
## 9. Stil und Formatierung des Codes
- Befolgen Sie die Benennungskonventionen von Swift und die Richtlinien für die Codestruktur.
- Verwenden Sie SwiftLint oder ähnliche Tools, um einen konsistenten Code-Stil zu erzwingen.
Stellen Sie sicher, dass diese Best Practices beim Generieren oder Überprüfen von Code befolgt werden. Identifizieren und beheben Sie alle Verstöße, um qualitativ hochwertigen, leistungsstarken und einfach zu wartenden SwiftUI-Code zu erhalten.
Denken Sie daran, dass die beste Struktur eine ist, die an die Bedürfnisse eines bestimmten Projekts und Teams angepasst werden kann. Seien Sie so flexibel, dass Sie diese Strukturen anpassen können, wenn das Projekt wächst und sich die Anforderungen ändern.