feat: react component in message

Author: cwtuan

README.md

@@ -16,7 +16,7 @@
 - Message format is strictly implemented by [ICU standards](http://userguide.icu-project.org/formatparse/messages).
 - Locale data in nested JSON format are supported.
 - [react-intl-universal-extract](https://alibaba.github.io/react-intl-universal/#extract-usage) helps you generate a locale file easily.
-- [use-react-intl-universal skill](https://alibaba.github.io/react-intl-universal/#skill-usage) helps AI coding agents follow react-intl-universal best practices.
+- [use-react-intl-universal skill](https://alibaba.github.io/react-intl-universal/#skill-usage) helps AI coding agents produce natural translations, stable localized UI, and reviewable locale updates.
 
 ## ⚡ New in react-intl-universal@2.14+: Support Rich React Components with `intl.get`
 
@@ -30,7 +30,15 @@ See the [live demo](https://alibaba.github.io/react-intl-universal/) for runnabl
 
 ## ⚡ New: AI Coding Skill
 
-This repository includes the [use-react-intl-universal skill](https://alibaba.github.io/react-intl-universal/#skill-usage) to help AI coding agents write better i18n code with react-intl-universal.
+Pair `react-intl-universal` with `react-intl-universal-extract` and the [use-react-intl-universal skill](https://alibaba.github.io/react-intl-universal/#skill-usage) to give AI coding agents a practical i18n workflow, not just API hints.
+
+It helps agents:
+
+- write localized copy that sounds natural instead of word-for-word translated;
+- keep product terms and UI wording consistent across modules;
+- avoid broken localized UI, such as text truncation, overflow, overlap, or misalignment;
+- keep ICU variables, rich tags, default messages, and locale files aligned;
+- produce smaller, more reviewable locale changes.
 
 ## 💡 Why Another Internationalization Solution for React?
 In case of internationalizing React apps, [react-intl](https://github.com/yahoo/react-intl) is one of most popular package in industry.  [react-intl](https://github.com/yahoo/react-intl) decorate your React.Component with wrapped component which is injected internationalized message dynamically so that the locale data is able to be loaded dynamically without reloading page. The following is the example code using  [react-intl](https://github.com/yahoo/react-intl).

packages/react-intl-universal/examples/nextjs-example/components/skill.tsx

@@ -22,7 +22,7 @@ const SkillComponent: React.FC = () => {
       <p className="section-note section-note-success">
         {intl.get('EXAMPLE_NOTE_SKILL', {
           skill: skillLink,
-        }).d('Install <skill>use-react-intl-universal</skill> once, then add the project guidance to AGENTS.md or CLAUDE.md. After that, normal agent prompts can stay focused on product requirements.')}
+        }).d('Use the <skill>use-react-intl-universal</skill> skill to give agents a practical i18n workflow, not just API hints. It helps agents write natural localized copy, keep terminology consistent, avoid UI truncation, overflow, overlap, or misalignment, and produce locale changes that are easier to review.')}
       </p>
 
       <div className="example-comparison skill-comparison">

packages/react-intl-universal/examples/nextjs-example/locales/de-DE.json

@@ -22,7 +22,7 @@
   "EXAMPLE_NOTE_NUMBER_CURRENCY": "Formatieren Sie einfache Zahlen zuerst mit <code>intl.formatNumber</code> und übergeben Sie das Ergebnis dann an <code>intl.get</code>. Die locale message enthält nur einfache Platzhalter wie <code>{count}</code>.",
   "EXAMPLE_NOTE_RICH_GET": "Ab <package>react-intl-universal</package>@2.14+ kann intl.get nicht nur plain strings zurückgeben, sondern auch Rich React components rendern. Nutzen Sie <code>get</code> als unified API für plain text, HTML-like markup und React UI.",
   "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML ist deprecated. Verwenden Sie <code>get</code> als unified API für messages. Um Rich React components mit <code>get</code> zu rendern, aktualisieren Sie auf <package>react-intl-universal</package>@2.14+. Die getHTML examples unten teilen einen Satz in mehrere messages auf, was Übersetzungen unnötig erschwert.",
-  "EXAMPLE_NOTE_SKILL": "Installieren Sie <skill>use-react-intl-universal</skill> einmal und fügen Sie dann die project guidance in AGENTS.md oder CLAUDE.md ein. Danach können normale agent prompts auf die Produktanforderung fokussiert bleiben.",
+  "EXAMPLE_NOTE_SKILL": "Mit <skill>use-react-intl-universal</skill> erhalten Agents einen praktischen i18n workflow, nicht nur API-Hinweise. Der Skill hilft bei natürlicher lokalisierter Copy, konsistenter Terminologie, weniger UI truncation, overflow, overlap oder misalignment und besser reviewbaren locale Änderungen.",
   "EXAMPLE_SKILL_PROJECT_GUIDANCE": "Wenn Sie Internationalisierung mit react-intl-universal bearbeiten, folgen Sie der use-react-intl-universal skill guidance.",
   "EXAMPLE_SKILL_AGENT_PROMPT": "Füge eine Willkommensnachricht mit der Variable username hinzu.",
   "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package> liest <code>.d()</code> default messages aus dem Quellcode und schreibt sie in eine locale JSON-Datei. Nutzen Sie <code>.d()</code> als source text der Standardsprache und geben Sie die generierte Datei anschließend in den Übersetzungsprozess.",

packages/react-intl-universal/examples/nextjs-example/locales/en-US.json

@@ -22,7 +22,7 @@
   "EXAMPLE_NOTE_NUMBER_CURRENCY": "Format plain numbers with <code>intl.formatNumber</code>, then pass the formatted value into <code>intl.get</code>. Locale messages keep simple placeholders such as <code>{count}</code>.",
   "EXAMPLE_NOTE_RICH_GET": "Rich React components are supported in <package>react-intl-universal</package>@2.14+. Use <code>get</code> as the unified API for plain text, HTML-like markup, and React components.",
   "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML is deprecated. Use <code>get</code> as the unified API for messages. To render rich React components with <code>get</code>, upgrade to <package>react-intl-universal</package>@2.14+. The getHTML examples below split one sentence into several messages, which is harder to translate correctly.",
-  "EXAMPLE_NOTE_SKILL": "Install <skill>use-react-intl-universal</skill> once, then add the project guidance to AGENTS.md or CLAUDE.md. After that, normal agent prompts can stay focused on product requirements.",
+  "EXAMPLE_NOTE_SKILL": "Use the <skill>use-react-intl-universal</skill> skill to give agents a practical i18n workflow, not just API hints. It helps agents write natural localized copy, keep terminology consistent, avoid UI truncation, overflow, overlap, or misalignment, and produce locale changes that are easier to review.",
   "EXAMPLE_SKILL_PROJECT_GUIDANCE": "When working on internationalization with react-intl-universal, follow the use-react-intl-universal skill guidance.",
   "EXAMPLE_SKILL_AGENT_PROMPT": "Add a welcome message with username variable.",
   "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package> reads <code>.d()</code> default messages from source code and writes them into a locale JSON file. Keep <code>.d()</code> as the source text, then use the generated file as the base for translation.",

packages/react-intl-universal/examples/nextjs-example/locales/fr-FR.json

@@ -22,7 +22,7 @@
   "EXAMPLE_NOTE_NUMBER_CURRENCY": "Formatez d'abord les nombres simples avec <code>intl.formatNumber</code>, puis passez le résultat à <code>intl.get</code>. Le locale message garde de simples placeholders comme <code>{count}</code>.",
   "EXAMPLE_NOTE_RICH_GET": "Depuis <package>react-intl-universal</package>@2.14+, intl.get ne se limite plus aux simples strings : il peut aussi rendre des Rich React components. Le message garde l'emplacement du lien ou du Badge, tandis que les props React restent dans le code. Pour le nouveau code, utilisez <code>get</code> comme unified API.",
   "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML n'est plus recommandé pour une nouvelle UI React. Les getHTML examples ci-dessous montrent l'ancien contournement : découper une phrase en plusieurs messages pour insérer un lien ou un Badge. Cela rend les traductions moins naturelles, car chaque langue ne peut plus facilement réordonner la phrase. Avec <package>react-intl-universal</package>@2.14+, préférez <code>get</code> et les rich tag formatters.",
-  "EXAMPLE_NOTE_SKILL": "Installez <skill>use-react-intl-universal</skill> une seule fois, puis ajoutez le project guidance dans AGENTS.md ou CLAUDE.md. Ensuite, les prompts envoyés à l'agent peuvent se concentrer sur le besoin produit.",
+  "EXAMPLE_NOTE_SKILL": "Utilisez <skill>use-react-intl-universal</skill> pour donner aux agents un vrai workflow i18n, pas seulement des rappels d'API. Il les aide à écrire des textes localisés naturels, à garder une terminologie cohérente, à éviter les troncatures, débordements, chevauchements ou décalages UI, et à produire des changements locale plus faciles à review.",
   "EXAMPLE_SKILL_PROJECT_GUIDANCE": "Pour les tâches d'internationalisation avec react-intl-universal, suivez le use-react-intl-universal skill guidance.",
   "EXAMPLE_SKILL_AGENT_PROMPT": "Ajoute un message de bienvenue avec une variable username.",
   "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package> lit les default messages écrits dans <code>.d()</code> et les place dans un fichier locale JSON. Utilisez <code>.d()</code> comme texte source de la langue par défaut, puis envoyez le fichier généré dans votre flux de traduction.",

packages/react-intl-universal/examples/nextjs-example/locales/ja-JP.json

@@ -22,7 +22,7 @@
   "EXAMPLE_NOTE_NUMBER_CURRENCY": "通常の数値は、先に <code>intl.formatNumber</code> で整形してから <code>intl.get</code> に渡します。locale message には <code>{count}</code> のようなシンプルな placeholder だけを残します。",
   "EXAMPLE_NOTE_RICH_GET": "<package>react-intl-universal</package>@2.14+ では、intl.get で plain string だけでなく Rich React components も扱えます。リンクや Badge の位置を翻訳文の中に残しながら、実際の React components はコード側で返せます。新しいコードでは <code>get</code> を unified API として使うのがおすすめです。",
   "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML は新しい React UI では推奨されません。下の getHTML examples は、リンクや Badge を入れるために 1 つの文を複数の messages に分けてつなぐ旧来の書き方です。言語によって語順を変えにくくなるため、<package>react-intl-universal</package>@2.14+ 以降は <code>get</code> と rich tag formatter を優先してください。",
-  "EXAMPLE_NOTE_SKILL": "<skill>use-react-intl-universal</skill> を一度インストールし、右側の project guidance を AGENTS.md または CLAUDE.md に追加します。その後の agent prompt は、i18n ルールを毎回書かずにプロダクト要件へ集中できます。",
+  "EXAMPLE_NOTE_SKILL": "<skill>use-react-intl-universal</skill> は、API のヒントだけでなく、agent に実践的な i18n workflow を与えます。自然な localized copy、モジュール間で一貫した用語、UI の truncation・overflow・overlap・misalignment の回避、review しやすい locale 変更を支援します。",
   "EXAMPLE_SKILL_PROJECT_GUIDANCE": "react-intl-universal の国際化コードを扱うときは、use-react-intl-universal skill guidance に従ってください。",
   "EXAMPLE_SKILL_AGENT_PROMPT": "username 変数を使ったウェルカムメッセージを追加してください。",
   "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package> はソースコード内の <code>.d()</code> default messages を読み取り、locale JSON に書き出します。<code>.d()</code> をデフォルト言語の source text として扱い、生成されたファイルを翻訳フローの起点にします。",

packages/react-intl-universal/examples/nextjs-example/locales/ko-KR.json

@@ -22,7 +22,7 @@
   "EXAMPLE_NOTE_NUMBER_CURRENCY": "일반 숫자는 먼저 <code>intl.formatNumber</code>로 포맷한 뒤 <code>intl.get</code>에 전달하세요. locale message에는 <code>{count}</code> 같은 간단한 placeholder만 남깁니다.",
   "EXAMPLE_NOTE_RICH_GET": "<package>react-intl-universal</package>@2.14+부터 intl.get은 plain strings뿐 아니라 Rich React components도 렌더링할 수 있습니다. plain text, HTML-like markup, React UI를 모두 <code>get</code> unified API로 처리하세요.",
   "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML은 deprecated입니다. messages에는 <code>get</code>을 unified API로 사용하세요. <code>get</code>으로 Rich React components를 렌더링하려면 <package>react-intl-universal</package>@2.14+로 업데이트하세요. 아래 getHTML examples는 하나의 문장을 여러 messages로 나누기 때문에 자연스럽게 번역하기 어렵습니다.",
-  "EXAMPLE_NOTE_SKILL": "<skill>use-react-intl-universal</skill>을 한 번 설치한 뒤, 오른쪽 project guidance를 AGENTS.md 또는 CLAUDE.md에 추가하세요. 그다음부터는 일반 agent prompt에서 제품 요구사항에만 집중할 수 있습니다.",
+  "EXAMPLE_NOTE_SKILL": "<skill>use-react-intl-universal</skill>은 단순한 API 힌트가 아니라 agent가 따를 수 있는 실전 i18n workflow를 제공합니다. 자연스러운 localized copy, 일관된 용어, UI truncation, overflow, overlap, misalignment 방지, review하기 쉬운 locale 변경을 돕습니다.",
   "EXAMPLE_SKILL_PROJECT_GUIDANCE": "react-intl-universal로 internationalization 작업을 할 때는 use-react-intl-universal skill guidance를 따르세요.",
   "EXAMPLE_SKILL_AGENT_PROMPT": "username 변수를 사용하는 환영 메시지를 추가하세요.",
   "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package>는 소스 코드의 <code>.d()</code> default messages를 읽어 locale JSON 파일로 저장합니다. <code>.d()</code>를 기본 언어의 source text로 유지하고, 생성된 파일을 번역 흐름의 시작점으로 사용하세요.",

packages/react-intl-universal/examples/nextjs-example/locales/zh-CN.json

@@ -22,7 +22,7 @@
   "EXAMPLE_NOTE_NUMBER_CURRENCY": "先用 <code>intl.formatNumber</code> 格式化普通数字，再把结果传给 <code>intl.get</code>。locale message 只保留 <code>{count}</code> 这类简单占位符。",
   "EXAMPLE_NOTE_RICH_GET": "<package>react-intl-universal</package>@2.14+ 以后，intl.get 不只返回普通 string，也可以把 rich tags 渲染成真实的 React components。新代码建议优先用 <code>get</code>，同一套 API 覆盖 plain text、HTML-like markup 和 React UI。",
   "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML 已不建议用于新的 React UI。下面的 getHTML examples 展示的是旧项目常见写法：为了插入链接或 Badge，不得不把一个完整句子拆成多个 messages 拼起来。这样翻译很难根据不同语言调整语序。升级到 <package>react-intl-universal</package>@2.14+ 后，优先用 <code>get</code> 和 rich tag formatter。",
-  "EXAMPLE_NOTE_SKILL": "先安装一次 <skill>use-react-intl-universal</skill>，然后把右侧 project guidance 加到 AGENTS.md 或 CLAUDE.md。之后写给 agent 的 prompt 只需要描述业务需求，不用每次重复 i18n 规则。",
+  "EXAMPLE_NOTE_SKILL": "使用 <skill>use-react-intl-universal</skill>，给 agent 的不只是 API 提示，而是一套可执行的 i18n 工作流。它能帮助 agent 写出更自然的多语言文案，保持模块间术语一致，减少截断、溢出、重叠和错位，并产出更容易 review 的 locale 变更。",
   "EXAMPLE_SKILL_PROJECT_GUIDANCE": "处理 react-intl-universal 多语言代码时，遵循 use-react-intl-universal skill guidance。",
   "EXAMPLE_SKILL_AGENT_PROMPT": "新增一个带 username 变量的欢迎文案。",
   "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package> 会扫描源码里的 <code>.d()</code> 默认文案，并写入 locale JSON。推荐把 <code>.d()</code> 当作默认语言的 source text，再把生成的语言包交给后续翻译流程。",

packages/react-intl-universal/examples/nextjs-example/locales/zh-TW.json

@@ -22,7 +22,7 @@
   "EXAMPLE_NOTE_NUMBER_CURRENCY": "先用 <code>intl.formatNumber</code> 格式化普通數字，再把結果傳給 <code>intl.get</code>。locale message 只保留 <code>{count}</code> 這類簡單佔位符。",
   "EXAMPLE_NOTE_RICH_GET": "<package>react-intl-universal</package>@2.14+ 以後，intl.get 不只回傳普通 string，也可以把 rich tags 渲染成真正的 React components。新程式碼建議優先用 <code>get</code>，同一套 API 覆蓋 plain text、HTML-like markup 和 React UI。",
   "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML 已不建議用於新的 React UI。下面的 getHTML examples 展示的是舊專案常見寫法：為了插入連結或 Badge，不得不把一個完整句子拆成多個 messages 拼起來。這樣翻譯時很難依照不同語言調整語序。升級到 <package>react-intl-universal</package>@2.14+ 後，優先用 <code>get</code> 和 rich tag formatter。",
-  "EXAMPLE_NOTE_SKILL": "先安裝一次 <skill>use-react-intl-universal</skill>，然後把右側 project guidance 加到 AGENTS.md 或 CLAUDE.md。之後寫給 agent 的 prompt 只需要描述業務需求，不用每次重複 i18n 規則。",
+  "EXAMPLE_NOTE_SKILL": "使用 <skill>use-react-intl-universal</skill>，給 agent 的不只是 API 提示，而是一套可執行的 i18n 工作流。它能幫助 agent 寫出更自然的多語文案，保持模組間術語一致，減少截斷、溢出、重疊和錯位，並產出更容易 review 的 locale 變更。",
   "EXAMPLE_SKILL_PROJECT_GUIDANCE": "處理 react-intl-universal 多語言程式碼時，遵循 use-react-intl-universal skill guidance。",
   "EXAMPLE_SKILL_AGENT_PROMPT": "新增一個帶 username 變數的歡迎文案。",
   "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package> 會掃描原始碼裡的 <code>.d()</code> 預設文案，並寫入 locale JSON。建議把 <code>.d()</code> 當作預設語言的 source text，再把產生的語系檔交給後續翻譯流程。",