@webmcp-auto-ui/agent 2.5.8 → 2.5.10

package/src/recipes/parlementaire-profile.md

@@ -1,39 +1,39 @@
 ---
-id: afficher-profil-parlementaire-avec-hemicycle-et-votes
-name: Afficher le profil d'un parlementaire avec hemicycle, votes et timeline des mandats
+id: display-parliamentary-profile-with-hemicycle-and-votes
+name: Display a parliamentary profile with hemicycle, votes and mandate timeline
 components_used: [profile, hemicycle, timeline, table, stat-card, kv]
-when: les donnees MCP concernent un depute, senateur, groupe parlementaire, scrutin ou amendement provenant d'une base de donnees parlementaire
+when: MCP data concerns a deputy, senator, parliamentary group, vote, or amendment from a parliamentary database
 servers: [tricoteuses]
 layout:
   type: grid
   columns: 2
-  arrangement: profile + stats en haut, hemicycle + timeline en bas
+  arrangement: profile + stats at top, hemicycle + timeline below
 ---
 
-## Quand utiliser
+## When to use
 
-Les resultats MCP proviennent du serveur Tricoteuses (base de donnees parlementaire francaise) et concernent :
-- Un **depute ou senateur** : fiche individuelle, mandats, activite
-- Un **groupe politique** : composition, votes, positionnement
-- Des **scrutins publics** : resultats de vote, repartition par groupe
-- Des **amendements** : texte, auteur, sort, article vise
-- Des **dossiers legislatifs** : parcours d'un texte, navette parlementaire
+MCP results come from the Tricoteuses server (French parliamentary database) and concern:
+- A **deputy or senator**: individual profile, mandates, activity
+- A **political group**: composition, votes, positioning
+- **Public votes**: vote results, breakdown by group
+- **Amendments**: text, author, outcome, targeted article
+- **Legislative files**: text journey, parliamentary shuttle
 
-La recette est specifique au serveur Tricoteuses et a ses outils : `query_sql`, `search_recipes`, `list_tables`, `describe_table`.
+This recipe is specific to the Tricoteuses server and its tools: `query_sql`, `search_recipes`, `list_tables`, `describe_table`.
 
-## Comment
+## How to use
 
-1. **Recuperer les informations du parlementaire** via les outils Tricoteuses :
+1. **Retrieve the parliamentary member's information** via the Tricoteuses tools:
    ```
    query_sql({sql: "SELECT * FROM acteurs WHERE nom ILIKE '%dupont%' AND type = 'depute'"})
    ```
-   Ou via les recipes Tricoteuses :
+   Or via Tricoteuses recipes:
    ```
    search_recipes({query: "profil depute"})
    get_recipe({name: "recipe-name"})
    ```
 
-2. **Afficher la fiche profil** :
+2. **Display the profile card**:
    ```
    component("profile", {
      name: "Jean Dupont",
@@ -43,15 +43,15 @@ La recette est specifique au serveur Tricoteuses et a ses outils : `query_sql`,
    })
    ```
 
-3. **Afficher les statistiques d'activite** en stat-cards :
+3. **Display activity statistics** in stat-cards:
    ```
-   component("stat-card", {label: "Participation aux scrutins", value: "87%", trend: "+3%", trendDir: "up"})
-   component("stat-card", {label: "Amendements deposes", value: "42", icon: "file-text"})
-   component("stat-card", {label: "Questions ecrites", value: "18", icon: "help-circle"})
-   component("stat-card", {label: "Interventions hemicycle", value: "7", icon: "mic"})
+   component("stat-card", {label: "Vote participation", value: "87%", trend: "+3%", trendDir: "up"})
+   component("stat-card", {label: "Amendments filed", value: "42", icon: "file-text"})
+   component("stat-card", {label: "Written questions", value: "18", icon: "help-circle"})
+   component("stat-card", {label: "Hemicycle speeches", value: "7", icon: "mic"})
    ```
 
-4. **Si des donnees de vote par groupe sont disponibles**, afficher l'hemicycle :
+4. **If vote data by group is available**, display the hemicycle:
    ```
    component("hemicycle", {
      groups: [
@@ -63,82 +63,82 @@ La recette est specifique au serveur Tricoteuses et a ses outils : `query_sql`,
    })
    ```
 
-5. **Pour l'historique des mandats ou votes cles**, utiliser la timeline :
+5. **For the mandate history or key votes**, use the timeline:
    ```
    component("timeline", {
      events: [
-       {date: "2022-06-19", title: "Elu depute", description: "3e circ. du Rhone"},
-       {date: "2023-03-16", title: "Vote 49.3 retraites", description: "Motion de censure rejetee"},
-       {date: "2024-07-07", title: "Reelu depute", description: "2e tour"}
+       {date: "2022-06-19", title: "Elected deputy", description: "3e circ. du Rhone"},
+       {date: "2023-03-16", title: "Vote 49.3 pensions reform", description: "Motion de censure rejetee"},
+       {date: "2024-07-07", title: "Re-elected deputy", description: "2nd round"}
      ]
    })
    ```
 
-6. **Pour les details des votes ou amendements**, utiliser une table :
+6. **For vote or amendment details**, use a table:
    ```
    component("table", {
-     columns: ["Date", "Scrutin", "Vote", "Resultat"],
+     columns: ["Date", "Vote", "Position", "Result"],
      rows: votes.map(v => [v.date, v.intitule, v.position, v.resultat])
    })
    ```
 
-7. **Completer avec les metadonnees** en kv :
+7. **Complete with metadata** in kv:
    ```
    component("kv", {pairs: [
      ["Legislature", "XVIe (2022-2027)"],
-     ["Groupe", "Renaissance"],
-     ["Commission permanente", "Lois"],
+     ["Group", "Renaissance"],
+     ["Standing committee", "Lois"],
      ["Source", "Tricoteuses — mcp.code4code.eu"]
    ]})
    ```
 
-## Exemples
+## Examples
 
-### Profil complet d'un depute
+### Complete deputy profile
 ```
-// 1. Chercher le depute
+// 1. Look up the deputy
 query_sql({sql: "SELECT * FROM acteurs WHERE nom ILIKE '%dupont%' LIMIT 1"})
 
-// 2. Ses amendements
+// 2. Their amendments
 query_sql({sql: "SELECT COUNT(*) as total, SUM(CASE WHEN sort='Adopte' THEN 1 ELSE 0 END) as adoptes FROM amendements WHERE auteur_id = $id"})
 
-// 3. Ses votes recents
+// 3. Their recent votes
 query_sql({sql: "SELECT s.date, s.intitule, v.position FROM scrutins s JOIN votes v ON s.id = v.scrutin_id WHERE v.acteur_id = $id ORDER BY s.date DESC LIMIT 10"})
 
-// 4. Rendu complet
+// 4. Full render
 component("profile", {name, subtitle, photo})
-component("stat-card", {label: "Amendements", value: total, icon: "file-text"})
-component("stat-card", {label: "Adoptes", value: adoptes, icon: "check"})
-component("stat-card", {label: "Taux d'adoption", value: Math.round(adoptes/total*100) + "%"})
-component("table", {columns: ["Date", "Scrutin", "Position"], rows: votes})
+component("stat-card", {label: "Amendments", value: total, icon: "file-text"})
+component("stat-card", {label: "Adopted", value: adoptes, icon: "check"})
+component("stat-card", {label: "Adoption rate", value: Math.round(adoptes/total*100) + "%"})
+component("table", {columns: ["Date", "Vote", "Position"], rows: votes})
 component("timeline", {events: mandats})
 ```
 
-### Resultat d'un scrutin avec hemicycle
+### Vote result with hemicycle
 ```
-// 1. Recuperer le scrutin
+// 1. Retrieve the vote
 query_sql({sql: "SELECT * FROM scrutins WHERE intitule ILIKE '%budget%' ORDER BY date DESC LIMIT 1"})
 
-// 2. Repartition par groupe
+// 2. Breakdown by group
 query_sql({sql: "SELECT g.nom, g.couleur, COUNT(*) FILTER (WHERE v.position='pour') as pour, COUNT(*) FILTER (WHERE v.position='contre') as contre FROM votes v JOIN groupes g ON v.groupe_id = g.id WHERE v.scrutin_id = $id GROUP BY g.nom, g.couleur"})
 
-// 3. Rendu
-component("stat-card", {label: "Pour", value: "312", trendDir: "up"})
-component("stat-card", {label: "Contre", value: "245", trendDir: "down"})
+// 3. Render
+component("stat-card", {label: "For", value: "312", trendDir: "up"})
+component("stat-card", {label: "Against", value: "245", trendDir: "down"})
 component("hemicycle", {groups: groupResults, result: {pour: 312, contre: 245, abstention: 18}})
-component("table", {columns: ["Groupe", "Pour", "Contre", "Abstention"], rows: groupDetails})
+component("table", {columns: ["Group", "For", "Against", "Abstention"], rows: groupDetails})
 ```
 
-## Composants specifiques au domaine parlementaire
+## Components specific to the parliamentary domain
 
-- **hemicycle** : arc de cercle montrant la repartition des votes par groupe politique, avec couleurs par parti
-- **profile** : fiche individuelle avec photo, nom, fonction, details structurees
-- **timeline** : chronologie des mandats, votes cles, evenements parlementaires
-- **trombinoscope** : grille de photos pour un groupe de parlementaires (utile pour les commissions)
+- **hemicycle**: semicircular arc showing vote distribution by political group, with party colors
+- **profile**: individual card with photo, name, role, structured details
+- **timeline**: chronology of mandates, key votes, parliamentary events
+- **trombinoscope**: photo grid for a group of parliamentary members (useful for committees)
 
-## Erreurs courantes
+## Common mistakes
 
-- **Requetes SQL trop larges** : toujours utiliser LIMIT et des filtres precis pour eviter de surcharger le serveur
-- **Confondre acteurs et mandats** : un depute peut avoir plusieurs mandats dans la base, filtrer par legislature courante
-- **Oublier la source** : toujours crediter "Tricoteuses" comme source dans un kv final
-- **Hemicycle sans contexte** : toujours accompagner le composant hemicycle de stat-cards avec les totaux pour/contre/abstention
+- **Overly broad SQL queries**: always use LIMIT and precise filters to avoid overloading the server
+- **Confusing actors and mandates**: a deputy can have multiple mandates in the database — filter by current legislature
+- **Forgetting the source**: always credit "Tricoteuses" as the source in a final kv
+- **Hemicycle without context**: always accompany the hemicycle component with stat-cards showing for/against/abstention totals

package/src/recipes/rechercher-textes-juridiques-legifrance.md

@@ -1,85 +1,85 @@
 ---
-id: rechercher-textes-juridiques-legifrance
-name: Rechercher des textes juridiques, codes et lois via les donnees Legifrance
+id: search-legal-texts-legifrance
+name: Search legal texts, codes and laws via Legifrance data
 components_used: [table, text, kv, code]
-when: l'utilisateur demande des informations sur des lois, codes juridiques, articles de loi, decrets, ordonnances ou textes legislatifs francais disponibles dans la base Tricoteuses
+when: the user asks for information about French laws, legal codes, articles of law, decrees, ordinances or legislative texts available in the Tricoteuses database
 servers: [tricoteuses]
 layout:
   type: grid
   columns: 1
 ---
 
-## Quand utiliser
+## When to use
 
-L'utilisateur pose une question sur le droit francais, la legislation, ou un texte juridique specifique :
-- "Que dit l'article 49-3 de la Constitution ?"
-- "Quels decrets ont ete publies sur le droit du travail en 2025 ?"
-- "Montre-moi les articles du Code civil sur la filiation"
-- "Quelles lois ont ete promulguees ce mois-ci ?"
+The user asks a question about French law, legislation, or a specific legal text:
+- "What does article 49-3 of the Constitution say?"
+- "Which decrees were published on labour law in 2025?"
+- "Show me the articles of the Civil Code on filiation"
+- "Which laws were enacted this month?"
 
-La base Tricoteuses contient des donnees issues de Legifrance (textes consolides, codes, lois, decrets). Utiliser `list_tables` pour decouvrir les tables disponibles dans le schema legifrance, puis `describe_table` et `query_sql` pour extraire les textes.
+The Tricoteuses database contains data from Legifrance (consolidated texts, codes, laws, decrees). Use `list_tables` to discover the available tables in the legifrance schema, then `describe_table` and `query_sql` to extract the texts.
 
-## Comment
+## How to use
 
-1. **Decouvrir les tables disponibles** :
+1. **Discover available tables**:
    ```
    list_tables({schema: "legifrance"})
    ```
-   Tables typiques : `textes_versions`, `articles`, `codes`, `sections`
+   Typical tables: `textes_versions`, `articles`, `codes`, `sections`
 
-2. **Decrire la structure** d'une table pour comprendre les colonnes :
+2. **Describe the structure** of a table to understand the columns:
    ```
    describe_table({schema: "legifrance", table: "articles"})
    ```
 
-3. **Rechercher les textes** avec des requetes SQL :
+3. **Search for texts** with SQL queries:
    ```
    query_sql({sql: "SELECT titre, date_publi, nature FROM legifrance.textes_versions WHERE titre ILIKE '%travail%' ORDER BY date_publi DESC LIMIT 20"})
    ```
 
-4. **Afficher les resultats** :
-   - **Table** pour les listes de textes :
+4. **Display results**:
+   - **Table** for lists of texts:
      ```
-     component("table", {columns: ["Titre", "Nature", "Date", "Etat"], rows: textes})
+     component("table", {columns: ["Title", "Nature", "Date", "Status"], rows: textes})
      ```
-   - **Text** pour le contenu d'un article :
+   - **Text** for the content of an article:
      ```
      component("text", {content: "### Article 49-3 de la Constitution\n\n" + article.contenu})
      ```
-   - **Code** pour les extraits legislatifs avec mise en forme :
+   - **Code** for legislative excerpts with formatting:
      ```
      component("code", {language: "text", content: article.texte_integral})
      ```
-   - **KV** pour les metadonnees du texte :
+   - **KV** for text metadata:
      ```
-     component("kv", {pairs: [["Nature", "Loi organique"], ["Date", "2023-04-14"], ["NOR", "JUSX2300001L"], ["Etat", "En vigueur"]]})
+     component("kv", {pairs: [["Nature", "Loi organique"], ["Date", "2023-04-14"], ["NOR", "JUSX2300001L"], ["Status", "En vigueur"]]})
      ```
 
-## Exemples
+## Examples
 
-### Articles d'un code juridique
+### Articles from a legal code
 ```
-// 1. Trouver les articles du Code civil sur la filiation
+// 1. Find articles of the Civil Code on filiation
 query_sql({sql: "SELECT num_article, contenu, etat FROM legifrance.articles WHERE code = 'Code civil' AND section ILIKE '%filiation%' ORDER BY num_article"})
 
-// 2. Rendu
-component("kv", {pairs: [["Code", "Code civil"], ["Section", "De la filiation"], ["Articles trouves", results.length]]})
-component("table", {columns: ["Article", "Contenu (extrait)", "Etat"], rows: results.map(r => [r.num_article, r.contenu.slice(0, 200) + "...", r.etat])})
+// 2. Render
+component("kv", {pairs: [["Code", "Code civil"], ["Section", "De la filiation"], ["Articles found", results.length]]})
+component("table", {columns: ["Article", "Content (excerpt)", "Status"], rows: results.map(r => [r.num_article, r.contenu.slice(0, 200) + "...", r.etat])})
 ```
 
-### Textes recents par nature
+### Recent texts by nature
 ```
-// 1. Lois promulguees en 2026
+// 1. Laws enacted in 2026
 query_sql({sql: "SELECT titre, date_publi, nor FROM legifrance.textes_versions WHERE nature = 'LOI' AND date_publi >= '2026-01-01' ORDER BY date_publi DESC"})
 
-// 2. Rendu
-component("stat-card", {label: "Lois promulguees en 2026", value: results.length, icon: "scale"})
-component("table", {columns: ["Titre", "Date", "NOR"], rows: results})
+// 2. Render
+component("stat-card", {label: "Laws enacted in 2026", value: results.length, icon: "scale"})
+component("table", {columns: ["Title", "Date", "NOR"], rows: results})
 ```
 
-## Erreurs courantes
+## Common mistakes
 
-- **Confondre les schemas** : les donnees Legifrance sont dans le schema `legifrance`, pas dans `assemblee` — verifier avec `list_tables`
-- **Requetes trop larges** : toujours utiliser LIMIT et des filtres WHERE precis
-- **Afficher le texte integral brut** : utiliser le composant `text` avec formatage Markdown plutot que de dumper le JSON
-- **Oublier de preciser l'etat du texte** : un article peut etre abroge, modifie ou en vigueur — toujours l'indiquer
+- **Confusing schemas**: Legifrance data is in the `legifrance` schema, not in `assemblee` — verify with `list_tables`
+- **Overly broad queries**: always use LIMIT and precise WHERE filters
+- **Displaying raw full text**: use the `text` component with Markdown formatting rather than dumping the JSON
+- **Forgetting to specify the text status**: an article can be repealed, amended or in force — always indicate it

package/src/recipes/weather-viz.md

@@ -1,50 +1,50 @@
 ---
-id: visualiser-previsions-meteo-avec-graphiques-et-kpi
-name: Visualiser des previsions meteo avec graphiques temporels et indicateurs cles
+id: visualize-weather-forecasts-with-charts-and-kpis
+name: Visualize weather forecasts with time series charts and key indicators
 components_used: [stat-card, chart-rich, map, kv]
-when: les donnees MCP contiennent des mesures meteorologiques (temperature, humidite, vent, precipitations) ou des previsions horaires/journalieres
+when: MCP data contains weather measurements (temperature, humidity, wind, precipitation) or hourly/daily forecasts
 servers: [openmeteo]
 layout:
   type: grid
   columns: 2
-  arrangement: stat-cards en haut, chart en bas sur toute la largeur
+  arrangement: stat-cards at the top, chart spanning full width at the bottom
 ---
 
-## Quand utiliser
+## When to use
 
-Les resultats MCP contiennent des donnees meteorologiques structurees. Typiquement :
-- **Open-Meteo** : previsions horaires (`hourly.temperature_2m`, `hourly.precipitation`), previsions journalieres (`daily.temperature_2m_max/min`), conditions actuelles (`current.temperature_2m`, `current.wind_speed_10m`)
-- Toute source retournant des series temporelles de mesures climatiques
+MCP results contain structured weather data. Typically:
+- **Open-Meteo**: hourly forecasts (`hourly.temperature_2m`, `hourly.precipitation`), daily forecasts (`daily.temperature_2m_max/min`), current conditions (`current.temperature_2m`, `current.wind_speed_10m`)
+- Any source returning time series of climate measurements
 
-La recette s'applique meme pour une seule ville : les stat-cards montrent les conditions actuelles, le graphique montre l'evolution.
+This recipe applies even for a single city: stat-cards show current conditions, the chart shows the trend over time.
 
-## Comment
+## How to use
 
-1. **Appeler l'outil meteo** avec les coordonnees ou le nom de la ville :
-   - Open-Meteo : `get_forecast({latitude: 48.85, longitude: 2.35, hourly: "temperature_2m,precipitation", daily: "temperature_2m_max,temperature_2m_min"})`
-2. **Extraire les KPIs actuels** et les afficher en stat-cards :
-   - Temperature actuelle : `component("stat-card", {label: "Temperature", value: "18.5°C", icon: "thermometer"})`
-   - Vent : `component("stat-card", {label: "Vent", value: "12.3 km/h", icon: "wind"})`
-   - Humidite : `component("stat-card", {label: "Humidite", value: "72%", icon: "droplets"})`
-   - Precipitations : `component("stat-card", {label: "Pluie (24h)", value: "2.1 mm", icon: "cloud-rain"})`
-3. **Construire le graphique temporel** a partir des series horaires ou journalieres :
+1. **Call the weather tool** with coordinates or city name:
+   - Open-Meteo: `get_forecast({latitude: 48.85, longitude: 2.35, hourly: "temperature_2m,precipitation", daily: "temperature_2m_max,temperature_2m_min"})`
+2. **Extract current KPIs** and display them as stat-cards:
+   - Current temperature: `component("stat-card", {label: "Temperature", value: "18.5°C", icon: "thermometer"})`
+   - Wind: `component("stat-card", {label: "Wind", value: "12.3 km/h", icon: "wind"})`
+   - Humidity: `component("stat-card", {label: "Humidity", value: "72%", icon: "droplets"})`
+   - Precipitation: `component("stat-card", {label: "Rain (24h)", value: "2.1 mm", icon: "cloud-rain"})`
+3. **Build the time series chart** from hourly or daily series:
    - `component("chart-rich", {type: "line", labels: hourly.time, datasets: [{label: "Temperature °C", data: hourly.temperature_2m}]})`
-   - Pour les precipitations, preferer un type "bar" superpose
-4. **Ajouter la carte** si des coordonnees sont disponibles :
+   - For precipitation, prefer an overlaid "bar" type
+4. **Add the map** if coordinates are available:
    - `component("map", {center: [lat, lon], zoom: 10, markers: [{lat, lon, label: "Paris"}]})`
-5. **Completer avec les details** en kv :
-   - `component("kv", {pairs: [["Lever du soleil", "06:42"], ["Coucher", "20:15"], ["Indice UV", "5 (modere)"]]})`
+5. **Complete with details** in kv:
+   - `component("kv", {pairs: [["Sunrise", "06:42"], ["Sunset", "20:15"], ["UV Index", "5 (moderate)"]]})`
 
-## Exemples
+## Examples
 
-### Previsions 7 jours pour Paris
+### 7-day forecast for Paris
 ```
-// Appel MCP
+// MCP call
 get_forecast({latitude: 48.8566, longitude: 2.3522, daily: "temperature_2m_max,temperature_2m_min,precipitation_sum"})
 
-// Rendu
-component("stat-card", {label: "Aujourd'hui", value: "22°C / 14°C", icon: "thermometer"})
-component("stat-card", {label: "Pluie prevue", value: "0 mm", icon: "sun"})
+// Render
+component("stat-card", {label: "Today", value: "22°C / 14°C", icon: "thermometer"})
+component("stat-card", {label: "Expected rain", value: "0 mm", icon: "sun"})
 component("chart-rich", {
   type: "line",
   labels: daily.time,  // ["2026-04-09", "2026-04-10", ...]
@@ -55,21 +55,21 @@ component("chart-rich", {
 })
 ```
 
-### Previsions horaires avec precipitations
+### Hourly forecast with precipitation
 ```
 component("chart-rich", {
   type: "line",
   labels: hourly.time.slice(0, 24),
   datasets: [
     {label: "Temperature °C", data: hourly.temperature_2m.slice(0, 24), yAxisID: "y"},
-    {label: "Pluie mm", data: hourly.precipitation.slice(0, 24), yAxisID: "y1", type: "bar"}
+    {label: "Rain mm", data: hourly.precipitation.slice(0, 24), yAxisID: "y1", type: "bar"}
   ]
 })
 ```
 
-## Erreurs courantes
+## Common mistakes
 
-- **Afficher les donnees brutes JSON** au lieu de les visualiser avec des composants
-- **Ne pas convertir les unites** : Open-Meteo retourne en unites SI par defaut (m/s pour le vent → convertir en km/h si l'utilisateur est francophone)
-- **Oublier les stat-cards** pour les KPIs principaux : un graphique seul ne donne pas les chiffres cles immediatement
-- **Trop de points sur le graphique** : pour des previsions horaires sur 7 jours (168 points), preferer un resample journalier ou limiter a 48h en mode horaire
+- **Displaying raw JSON data** instead of visualizing it with components
+- **Not converting units**: Open-Meteo returns SI units by default (m/s for wind → convert to km/h if appropriate for the user)
+- **Forgetting stat-cards** for the main KPIs: a chart alone does not surface key figures immediately
+- **Too many points on the chart**: for hourly forecasts over 7 days (168 points), prefer daily resampling or limit to 48h in hourly mode

package/src/recipes/widgets/actions.md

@@ -1,6 +1,6 @@
 ---
 widget: actions
-description: Rangée de boutons d'action
+description: Row of action buttons
 group: simple
 schema:
   type: object
@@ -20,9 +20,9 @@ schema:
             type: boolean
 ---
 
-## Quand utiliser
-Pour proposer des choix d'action à l'utilisateur — confirmation, navigation, ou sélection parmi plusieurs options.
+## When to use
+Offer action choices to the user — confirmation, navigation, or selection among multiple options.
 
-## Comment
-1. Identifier les actions pertinentes selon le contexte
-2. Appeler `autoui_webmcp_widget_display('actions', { buttons: [{ label: 'Confirmer', primary: true }, { label: 'Annuler' }] })`
+## How to use
+1. Identify the relevant actions based on context
+2. Call `autoui_webmcp_widget_display('actions', { buttons: [{ label: 'Confirm', primary: true }, { label: 'Cancel' }] })`

package/src/recipes/widgets/alert.md

@@ -1,6 +1,6 @@
 ---
 widget: alert
-description: Alerte ou notification système
+description: System alert or notification
 group: simple
 schema:
   type: object
@@ -19,9 +19,9 @@ schema:
         - error
 ---
 
-## Quand utiliser
-Pour signaler une information importante, un avertissement ou une erreur à l'utilisateur. Utile après une action qui nécessite attention (ex: seuil dépassé, opération échouée).
+## When to use
+Signal important information, a warning, or an error to the user. Useful after an action that requires attention (e.g. threshold exceeded, operation failed).
 
-## Comment
-1. Déterminer le niveau d'alerte selon le contexte ('info', 'warn', 'error')
-2. Appeler `autoui_webmcp_widget_display('alert', { title: 'Quota dépassé', message: 'Le stockage utilisé dépasse 90%', level: 'warn' })`
+## How to use
+1. Determine the alert level based on context ('info', 'warn', 'error')
+2. Call `autoui_webmcp_widget_display('alert', { title: 'Quota exceeded', message: 'Storage usage is above 90%', level: 'warn' })`

package/src/recipes/widgets/cards.md

@@ -1,6 +1,6 @@
 ---
 widget: cards
-description: Grille de cartes avec titre, description et tags
+description: Card grid with title, description, and tags
 group: rich
 schema:
   type: object
@@ -28,14 +28,14 @@ schema:
               type: string
 ---
 
-## Quand utiliser
-Pour afficher une collection d'éléments riches — produits, articles, projets, événements. Chaque carte combine titre, description et tags. Préférer `list` pour des éléments simples sans structure.
+## When to use
+Display a collection of rich items — products, articles, projects, events. Each card combines a title, description, and tags. Prefer `list` for simple items without structure.
 
-## Comment
-1. Récupérer la collection via MCP
-2. Appeler `autoui_webmcp_widget_display('cards', { title: 'Projets actifs', cards: [{ title: 'Refonte UI', description: 'Migration vers Svelte 5', subtitle: 'Q2 2024', tags: ['frontend', 'priorité haute'] }] })`
+## How to use
+1. Retrieve the collection via MCP
+2. Call `autoui_webmcp_widget_display('cards', { title: 'Active projects', cards: [{ title: 'UI Redesign', description: 'Migration to Svelte 5', subtitle: 'Q2 2024', tags: ['frontend', 'high priority'] }] })`
 
-## Erreurs courantes
-- Ne JAMAIS inventer d'URLs d'images pour le champ `image`. Utiliser UNIQUEMENT les URLs retournées par les outils MCP. Si aucune URL n'est disponible, ne pas inclure de champ image — le widget s'affiche correctement sans.
-- STRICTEMENT INTERDIT : URLs placeholder (`via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`). Omettre le champ `image` plutôt que de mettre un placeholder.
-- Toujours fournir un `title` pour chaque carte
+## Common mistakes
+- NEVER fabricate image URLs for the `image` field. Use ONLY the URLs returned by MCP tools. If no URL is available, do not include an image field — the widget renders correctly without it.
+- STRICTLY FORBIDDEN: placeholder URLs (`via.placeholder.com`, `placehold.co`, `dummyimage.com`, `?text=...`). Omit the `image` field rather than using a placeholder.
+- Always provide a `title` for each card

package/src/recipes/widgets/carousel.md

@@ -1,6 +1,6 @@
 ---
 widget: carousel
-description: Carrousel de slides (images ou contenu)
+description: Slide carousel (images or content)
 group: media
 schema:
   type: object
@@ -28,12 +28,12 @@ schema:
       type: number
 ---
 
-## Quand utiliser
-Pour un défilement séquentiel de contenus — présentation, tutoriel étape par étape, galerie narrative. Préférer `gallery` pour une vue d'ensemble en grille.
+## When to use
+For sequential content browsing — presentations, step-by-step tutorials, narrative galleries. Prefer `gallery` for an overview in grid layout.
 
-## Comment
-1. Récupérer ou composer les slides
-2. Appeler `autoui_webmcp_widget_display('carousel', { title: 'Présentation', slides: [{ title: 'Étape 1', content: 'Introduction au projet...' }, { title: 'Étape 2', src: 'https://...', subtitle: 'Architecture' }], autoPlay: false })`
+## How to use
+1. Retrieve or compose the slides
+2. Call `autoui_webmcp_widget_display('carousel', { title: 'Presentation', slides: [{ title: 'Step 1', content: 'Project introduction...' }, { title: 'Step 2', src: 'https://...', subtitle: 'Architecture' }], autoPlay: false })`
 
-## Erreurs courantes
-- Ne jamais fabriquer d'URLs d'images pour `src` — utiliser uniquement celles retournées par les outils MCP
+## Common mistakes
+- Never fabricate image URLs for `src` — only use URLs returned by MCP tools

package/src/recipes/widgets/chart-rich.md

@@ -1,6 +1,6 @@
 ---
 widget: chart-rich
-description: Graphique avancé multi-types (barres, lignes, aires, camembert)
+description: Advanced multi-type chart (bar, line, area, pie)
 group: rich
 schema:
   type: object
@@ -38,14 +38,14 @@ schema:
             type: string
 ---
 
-## Quand utiliser
-Pour des graphiques multi-séries ou des types autres que barres simples (lignes, aires, camemberts, donuts). Préférer `chart` pour un graphique à barres basique mono-série.
+## When to use
+For multi-series charts or types other than simple bars (lines, areas, pies, donuts). Prefer `chart` for a basic single-series bar chart.
 
-## Comment
-1. Récupérer les données via MCP
-2. Structurer en séries avec `labels` (axe X) et `data` (séries de valeurs)
-3. Appeler `autoui_webmcp_widget_display('chart-rich', { title: 'Évolution mensuelle', type: 'line', labels: ['Jan', 'Fév', 'Mar'], data: [{ label: '2024', values: [10, 20, 15], color: '#4CAF50' }] })`
+## How to use
+1. Fetch data via MCP
+2. Structure into series with `labels` (X axis) and `data` (value series)
+3. Call `autoui_webmcp_widget_display('chart-rich', { title: 'Monthly Trend', type: 'line', labels: ['Jan', 'Feb', 'Mar'], data: [{ label: '2024', values: [10, 20, 15], color: '#4CAF50' }] })`
 
-## Erreurs courantes
-- Le nombre de `values` dans chaque série doit correspondre au nombre de `labels`
-- Ne pas confondre avec `chart` (widget simple) — `chart-rich` utilise un format de données différent
+## Common mistakes
+- The number of `values` in each series must match the number of `labels`
+- Do not confuse with `chart` (simple widget) — `chart-rich` uses a different data format