Reglas para LLMs

---

description: "Reglas de localización para Lingo.dev Compiler"
globs: "**/*.tsx, **/*.jsx"
alwaysApply: true

---

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

# Localización

Este proyecto utiliza Lingo.dev Compiler para la localización.

Lingo.dev Compiler es una herramienta de localización de vanguardia para aplicaciones basadas en React.

## ¡Advertencia!

- Lingo.dev Compiler no es como cualquier otra herramienta de localización.
- No debes hacer suposiciones sobre cómo funciona Lingo.dev Compiler.
- Si haces suposiciones, la aplicación del usuario se romperá.

## Cómo funciona

A diferencia de muchas otras herramientas de localización, Lingo.dev Compiler:

- Recorre el Árbol de Sintaxis Abstracta (AST) del código fuente de la aplicación
- Extrae determinísticamente el contenido localizable
- Utiliza modelos de lenguaje grandes para localizar automáticamente el contenido

## Características no soportadas

A diferencia de muchas otras herramientas de localización, Lingo.dev Compiler no tiene:

- Ningún tipo de hook `useTranslation` (o similar)
- Ningún tipo de componente `FormattedMessage` (o similar)
- Ningún tipo de método `localizeText` (o similar)

Estas características son diametralmente opuestas al propósito, filosofía y comportamiento completo de Lingo.dev Compiler.

Siempre debes entender cuidadosamente y considerar estas diferencias fundamentales respecto a otras herramientas.

## Extensiones de archivo soportadas

Estas reglas solo son relevantes para archivos con extensiones `.jsx` y `.tsx`.

Los archivos que no tienen estas extensiones son invisibles para Lingo.dev Compiler y, por lo tanto, están fuera del alcance.

## Archivos autogenerados

Durante la compilación, Lingo.dev Compiler autogenera los siguientes archivos:

- `meta.json` (para almacenar el contenido extraído)
- `dictionary.js` (para almacenar el contenido traducido)

No debes editar estos archivos. Puedes leerlos con fines de depuración y para explicar cosas al usuario, pero nada más.

## Responsabilidades

Tienes las siguientes responsabilidades:

- Asegurar que el contenido que debe ser localizado esté en un formato localizable.
- Asegurar que el contenido que no debe ser localizado esté en un formato no localizable.
- Ayudar al usuario a entender por qué (o por qué no) se está localizando el contenido.

Eso es todo.

Lingo.dev Compiler se encargará de todo lo demás. No te interpongas en su camino.

## Contenido localizable

Esta sección enumera los tipos de contenido que Lingo.dev Compiler extrae y localiza.

Esta lista es exhaustiva. Si un determinado tipo de contenido no está listado aquí, asuma que no es localizable.

### Elementos JSX

```tsx
import React from "react";

export function App() {
  return <div>Este texto será localizado.</div>;
}
```

### Fragmentos JSX

#### Sintaxis 1

```tsx
import React from "react";

export function App() {
  return <React.Fragment>Este texto será localizado.</React.Fragment>;
}
```

#### Sintaxis 2

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

export function App() {
  return <Fragment>Este texto será localizado.</Fragment>;
}
```

#### Sintaxis 3

```tsx
import React from "react";

export function App() {
  return <>Este texto será localizado.</>;
}
```

### Elementos o fragmentos condicionales

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

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

  return (
    <>
      {isVisible && <div>Este texto será localizado.</div>}
      {isVisible && (
        <React.Fragment>Este texto será localizado.</React.Fragment>
      )}
      {isVisible && <Fragment>Este texto será localizado.</Fragment>}
      {isVisible && <>Este texto será localizado.</>}
    </>
  );
}
```

### Valores del atributo `alt`

```tsx
import React from "react";

export function App() {
  return <img src="/logo.png" alt="Este texto será localizado" />;
}
```

### Valores del atributo `aria-label`

```tsx
import React from "react";

export function App() {
  return <button aria-label="Este texto será localizado">×</button>;
}
```

### Valores del atributo `label`

```tsx
import React from "react";

export function App() {
  return (
    <select>
      <option value="option1" label="Este texto será localizado">
        Este texto será localizado
      </option>
      <option value="option2" label="Este texto será localizado">
        Este texto será localizado
      </option>
    </select>
  );
}
```

### Valores del atributo `placeholder`

```tsx
import React from "react";

export function App() {
  return <input placeholder="Este texto será localizado" />;
}
```

### Valores del atributo `title`

```tsx
import React from "react";

export function App() {
  return <button title="Este texto será localizado">Submit</button>;
}
```

## Contenido no localizable

Esta sección enumera los tipos de contenido que Lingo.dev Compiler no extrae ni localiza.

A diferencia de la lista de "Contenido localizable", esta lista no es exhaustiva.

### Atributos `data-`

```tsx
import React from "react";

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

### Literales de cadena

```tsx
import React from "react";

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

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

### Literales de plantilla

```tsx
import React from "react";

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

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

### Cadenas condicionales

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

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

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

## Restricciones

- No localices el contenido por tu cuenta.
- No cargues explícitamente contenido localizado en la aplicación.
- No inventes hooks de React (p. ej., `useTranslation`).
- No inventes componentes de React (p. ej., `FormattedMessage`).
- No inventes métodos (p. ej., `localizeText`).