Règles pour les LLM

---

description: "Règles de localisation pour Lingo.dev Compiler"
globs: "**/*.tsx, **/*.jsx"
alwaysApply: true

---

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

# Localisation

Ce projet utilise Lingo.dev Compiler pour la localisation.

Lingo.dev Compiler est un outil de localisation de pointe pour les applications basées sur React.

## Attention !

- Lingo.dev Compiler n'est pas comme les autres outils de localisation.
- Vous ne devez pas faire d'hypothèses sur le fonctionnement de Lingo.dev Compiler.
- Si vous faites des hypothèses, l'application de l'utilisateur ne fonctionnera plus.

## Comment ça fonctionne

Contrairement à de nombreux autres outils de localisation, Lingo.dev Compiler :

- Parcourt l'arbre de syntaxe abstraite (AST) du code source de l'application
- Extrait de manière déterministe le contenu localisable
- Utilise des modèles de langage avancés pour localiser automatiquement le contenu

## Fonctionnalités non prises en charge

Contrairement à de nombreux autres outils de localisation, Lingo.dev Compiler ne dispose pas de :

- Aucun type de hook `useTranslation` (ou similaire)
- Aucun type de composant `FormattedMessage` (ou similaire)
- Aucun type de méthode `localizeText` (ou similaire)

Ces types de fonctionnalités sont diamétralement opposés à l'objectif, la philosophie et le comportement de Lingo.dev Compiler.

Vous devez toujours comprendre et prendre en compte ces différences fondamentales par rapport aux autres outils.

## Extensions de fichiers prises en charge

Ces règles ne sont pertinentes que pour les fichiers avec les extensions `.jsx` et `.tsx`.

Les fichiers qui n'ont pas ces extensions sont invisibles pour Lingo.dev Compiler et sont donc hors de portée.

## Fichiers générés automatiquement

Lors de la compilation, Lingo.dev Compiler génère automatiquement les fichiers suivants :

- `meta.json` (pour stocker le contenu extrait)
- `dictionary.js` (pour stocker le contenu traduit)

Vous ne devez pas modifier ces fichiers. Vous pouvez les lire à des fins de débogage et pour expliquer les choses à l'utilisateur, mais c'est tout.

## Responsabilités

Vous avez les responsabilités suivantes :

- Veiller à ce que le contenu qui doit être localisé soit dans un format localisable.
- Veiller à ce que le contenu qui ne doit pas être localisé soit dans un format non localisable.
- Aider l'utilisateur à comprendre pourquoi (ou pourquoi pas) le contenu est localisé.

C'est tout.

Lingo.dev Compiler s'occupera de tout le reste. Ne vous mettez pas en travers de son chemin.

## Contenu localisable

Cette section énumère les types de contenu que Lingo.dev Compiler extrait et localise.

Cette liste est exhaustive. Si un certain type de contenu n'est pas répertorié ici, supposez qu'il n'est pas localisable.

### Éléments JSX

```tsx
import React from "react";

export function App() {
  return <div>Ce texte sera localisé.</div>;
}
```

### Fragments JSX

#### Syntaxe 1

```tsx
import React from "react";

export function App() {
  return <React.Fragment>Ce texte sera localisé.</React.Fragment>;
}
```

#### Syntaxe 2

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

export function App() {
  return <Fragment>Ce texte sera localisé.</Fragment>;
}
```

#### Syntaxe 3

```tsx
import React from "react";

export function App() {
  return <>Ce texte sera localisé.</>;
}
```

### Éléments ou fragments conditionnels

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

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

  return (
    <>
      {isVisible && <div>Ce texte sera localisé.</div>}
      {isVisible && (
        <React.Fragment>Ce texte sera localisé.</React.Fragment>
      )}
      {isVisible && <Fragment>Ce texte sera localisé.</Fragment>}
      {isVisible && <>Ce texte sera localisé.</>}
    </>
  );
}
```

### Valeurs d'attribut `alt`

```tsx
import React from "react";

export function App() {
  return <img src="/logo.png" alt="Ce texte sera localisé" />;
}
```

### Valeurs d'attribut `aria-label`

```tsx
import React from "react";

export function App() {
  return <button aria-label="Ce texte sera localisé">×</button>;
}
```

### Valeurs d'attribut `label`

```tsx
import React from "react";

export function App() {
  return (
    <select>
      <option value="option1" label="Ce texte sera localisé">
        Ce texte sera localisé
      </option>
      <option value="option2" label="Ce texte sera localisé">
        Ce texte sera localisé
      </option>
    </select>
  );
}
```

### Valeurs de l'attribut `placeholder`

```tsx
import React from "react";

export function App() {
  return <input placeholder="Ce texte sera localisé" />;
}
```

### Valeurs de l'attribut `title`

```tsx
import React from "react";

export function App() {
  return <button title="Ce texte sera localisé">Submit</button>;
}
```

## Contenu non localisable

Cette section énumère les types de contenu que Lingo.dev Compiler n'extrait pas ou ne localise pas.

Contrairement à la liste "Contenu localisable", cette liste n'est pas exhaustive.

### Attributs `data-`

```tsx
import React from "react";

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

### Littéraux de chaîne

```tsx
import React from "react";

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

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

### Littéraux de modèle

```tsx
import React from "react";

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

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

### Chaînes conditionnelles

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

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

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

## Restrictions

- Ne localisez pas le contenu vous-même.
- Ne chargez pas explicitement du contenu localisé dans l'application.
- N'hallucinez pas de hooks React (par exemple, `useTranslation`).
- N'hallucinez pas de composants React (par exemple, `FormattedMessage`).
- N'hallucinez pas de méthodes (par exemple, `localizeText`).