Regeln für LLMs

---

description: "Lokalisierungsregeln für Lingo.dev Compiler"
globs: "**/*.tsx, **/*.jsx"
alwaysApply: true

---

{
  "$schema": "https://opencode.ai/config.json",
  "instructions": ["./rules/lingo.md"]
}

# Lokalisierung

Dieses Projekt verwendet Lingo.dev Compiler für die Lokalisierung.

Lingo.dev Compiler ist ein hochmodernes Lokalisierungstool für React-basierte Anwendungen.

## Warnung!

- Lingo.dev Compiler ist nicht wie andere Lokalisierungstools.
- Sie dürfen keine Annahmen darüber treffen, wie Lingo.dev Compiler funktioniert.
- Wenn Sie Annahmen treffen, wird die Anwendung des Nutzers nicht mehr funktionieren.

## Funktionsweise

Im Gegensatz zu vielen anderen Lokalisierungstools, Lingo.dev Compiler:

- Durchläuft den Abstract Syntax Tree (AST) des Quellcodes der Anwendung
- Extrahiert deterministisch lokalisierbare Inhalte
- Verwendet große Sprachmodelle zur automatischen Lokalisierung von Inhalten

## Nicht unterstützte Funktionen

Im Gegensatz zu vielen anderen Lokalisierungstools verfügt Lingo.dev Compiler nicht über:

- Jegliche Art von `useTranslation`-Hook (oder ähnliches)
- Jegliche Art von `FormattedMessage`-Komponente (oder ähnliches)
- Jegliche Art von `localizeText`-Methode (oder ähnliches)

Diese Arten von Funktionen stehen in direktem Widerspruch zum gesamten Zweck, der Philosophie und dem Verhalten des Lingo.dev Compilers.

Sie müssen diese grundlegenden Unterschiede zu anderen Tools immer sorgfältig verstehen und berücksichtigen.

## Unterstützte Dateierweiterungen

Diese Regeln sind nur relevant für Dateien mit den Erweiterungen `.jsx` und `.tsx`.

Dateien ohne diese Erweiterungen sind für den Lingo.dev Compiler unsichtbar und daher außerhalb des Geltungsbereichs.

## Automatisch generierte Dateien

Zur Build-Zeit generiert Lingo.dev Compiler automatisch die folgenden Dateien:

- `meta.json` (zum Speichern extrahierter Inhalte)
- `dictionary.js` (zum Speichern übersetzter Inhalte)

Sie dürfen diese Dateien nicht bearbeiten. Sie können sie zu Debugging-Zwecken lesen und um dem Nutzer Dinge zu erklären, aber das war's auch schon.

## Verantwortlichkeiten

Sie haben folgende Verantwortlichkeiten:

- Sicherstellen, dass Inhalte, die lokalisiert werden sollen, in einem lokalisierbaren Format vorliegen.
- Sicherstellen, dass Inhalte, die nicht lokalisiert werden sollen, in einem nicht-lokalisierbaren Format vorliegen.
- Dem Nutzer helfen zu verstehen, warum (oder warum nicht) Inhalte lokalisiert werden.

Das ist alles.

Lingo.dev Compiler kümmert sich um alles andere. Stehen Sie ihm nicht im Weg.

## Lokalisierbare Inhalte

Dieser Abschnitt listet die Arten von Inhalten auf, die der Lingo.dev Compiler extrahiert und lokalisiert.

Diese Liste ist vollständig. Wenn eine bestimmte Art von Inhalt hier nicht aufgeführt ist, gehen Sie davon aus, dass sie nicht lokalisierbar ist.

### JSX-Elemente

```tsx
import React from "react";

export function App() {
  return <div>Dieser Text wird lokalisiert.</div>;
}
```

### JSX-Fragmente

#### Syntax 1

```tsx
import React from "react";

export function App() {
  return <React.Fragment>Dieser Text wird lokalisiert.</React.Fragment>;
}
```

#### Syntax 2

```tsx
import { Fragment } from "react";

export function App() {
  return <Fragment>Dieser Text wird lokalisiert.</Fragment>;
}
```

#### Syntax 3

```tsx
import React from "react";

export function App() {
  return <>Dieser Text wird lokalisiert.</>;
}
```

### Bedingte Elemente oder Fragmente

```tsx
import React, { Fragment, useState } from "react";

export function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      {isVisible && <div>Dieser Text wird lokalisiert.</div>}
      {isVisible && (
        <React.Fragment>Dieser Text wird lokalisiert.</React.Fragment>
      )}
      {isVisible && <Fragment>Dieser Text wird lokalisiert.</Fragment>}
      {isVisible && <>Dieser Text wird lokalisiert.</>}
    </>
  );
}
```

### `alt`-Attributwerte

```tsx
import React from "react";

export function App() {
  return <img src="/logo.png" alt="Dieser Text wird lokalisiert" />;
}
```

### `aria-label`-Attributwerte

```tsx
import React from "react";

export function App() {
  return <button aria-label="Dieser Text wird lokalisiert">×</button>;
}
```

### `label`-Attributwerte

```tsx
import React from "react";

export function App() {
  return (
    <select>
      <option value="option1" label="Dieser Text wird lokalisiert">
        Dieser Text wird lokalisiert
      </option>
      <option value="option2" label="Dieser Text wird lokalisiert">
        Dieser Text wird lokalisiert
      </option>
    </select>
  );
}
```

### Werte des `placeholder`-Attributs

```tsx
import React from "react";

export function App() {
  return <input placeholder="This text will be localized" />;
}
```

### Werte des `title`-Attributs

```tsx
import React from "react";

export function App() {
  return <button title="This text will be localized">Submit</button>;
}
```

## Nicht lokalisierbare Inhalte

Dieser Abschnitt listet die Arten von Inhalten auf, die der Lingo.dev Compiler nicht extrahiert oder lokalisiert.

Im Gegensatz zur Liste "Lokalisierbare Inhalte" ist diese Liste nicht vollständig.

### `data-`-Attribute

```tsx
import React from "react";

export function App() {
  return <div data-testid="This text will not be localized">Content</div>;
}
```

### String-Literale

```tsx
import React from "react";

const exampleText = "This text will not be localized.";

export function App() {
  return <div>{exampleText}</div>;
}
```

### Template-Literale

```tsx
import React from "react";

const exampleText = `This text will not be localized.`;

export function App() {
  return <div>{exampleText}</div>;
}
```

### Bedingte Strings

```tsx
import { Fragment, useState } from "react";

export function App() {
  const [isVisible, setIsVisible] = useState(false);

  return <>{isVisible && "This text will not be localized."}</>;
}
```

## Einschränkungen

- Lokalisieren Sie Inhalte nicht selbst.
- Laden Sie keine lokalisierten Inhalte explizit in die App.
- Halluzinieren Sie keine React-Hooks (z.B. `useTranslation`).
- Halluzinieren Sie keine React-Komponenten (z.B. `FormattedMessage`).
- Halluzinieren Sie keine Methoden (z.B. `localizeText`).