Bilingual Site Guide / Guida Sito Bilingue

Role: You are an AI agent building a bilingual website. Follow these rules STRICTLY when creating or editing lines of code or content.

1. Frontmatter Rule

Every markdown file MUST include the language field. Ogni file markdown DEVE includere il campo language.

---
title: Page Title
language: EN/IT
---

---
title: Page Title
language: EN/IT
---

2. Components (TSX)

We use a custom <Translate /> component to render text based on the user’s language preference. Utilizziamo un componente personalizzato <Translate /> per renderizzare il testo in base alla preferenza linguistica dell’utente.

Import

import Translate from "./Translate"

Usage

Pass both en and it props to the component. Passa entrambe le proprietà en e it al componente.

<Translate 
    en="Welcome to our website" 
    it="Benvenuti nel nostro sito web" 
/>

Complex Content (HTML/JSX)

You can pass JSX elements inside the props for complex content like links or bold text. Puoi passare elementi JSX all’interno delle proprietà per contenuti complessi come link o testo in grassetto.

<Translate
    en={<>Click <a href="/link">here</a> to read more.</>}
    it={<>Clicca <a href="/link">qui</a> per saperne di più.</>}
/>

3. Markdown Content

For pure Markdown files, we currently write paragraphs in English followed by the Italian translation, or use specific blockquotes/callouts for translations if needed. Per i file puramente Markdown, scriviamo paragrafi in inglese seguiti dalla traduzione italiana, oppure usiamo blockquotes/callouts specifici per le traduzioni se necessario.

TIP

English: Always aim for clarity and conciseness. Italiano: Puntare sempre alla chiarezza e alla concisione.

4. System Components

When creating new system components (like headers, footers, cards), ALWAYS support both languages. hardcoded strings are forbidden. Quando crei nuovi componenti di sistema (come intestazioni, piè di pagina, schede), supporta SEMPRE entrambe le lingue. Le stringhe hardcoded sono vietate.

5. Translation Audit Agent

Before accepting a public page, Library index, navigation block, CTA group, form, card grid, or marketing visual-theme page, run the Website Translation Auditor:

python3 Admin_CL/SKILL/SKILL_Website_Design/agents/Website_Translation_Auditor/tools/check_translation_coverage.py

The tool verifies coverage only. The LLM agent must then compare every English/Italian pair for meaning, tone, legal/operational precision, and UI fit. Italian should sound natural for an Italy-based visitor; English should remain concise and not become a literal back-translation.

Prima di accettare una pagina pubblica, un indice Library, una navigazione, un gruppo CTA, un form, una griglia di card o una pagina con tema visuale marketing, esegui il Website Translation Auditor. Lo strumento verifica solo la copertura; l’agente LLM deve poi controllare significato, tono, precisione e resa UI in entrambe le lingue.