fix(i18n): fix WelcomeScreen displaying raw translation keys due to module-level t() calls

WelcomeScreen.SHORTCUT_TIPS was defined at module scope, so t() ran
before initI18n() (ESM import order), returning key strings like
"ui.welcome.pasteImage" instead of translated text.

Convert SHORTCUT_TIPS from a module-level const array to a lazy
getShortcutTips() function called at render time.

Also update the i18n-development SKILL.md to:
- Add the WelcomeScreen real-world case to Pitfall #1
- Document the "tests pass but UI shows raw keys" subtle trap in Pitfall #5
- Expand audit commands for detecting module-level t() calls

Author: xinggitxing

.agents/skills/i18n-development/SKILL.md

@@ -187,7 +187,17 @@ All i18n changes have negligible performance impact:
 const OPTIONS = [{ label: t("ui.config.language") }]; // → "ui.config.language"
 ```
 
-**Fix**: Move `t()` into functions called at render time:
+**Real-world case** (`WelcomeScreen.tsx`):
+```typescript
+// ❌ BUG: SHORTCUT_TIPS defined at module scope — t() returns key strings
+const SHORTCUT_TIPS = [
+  { label: "Ctrl+V", description: t("ui.welcome.pasteImage") }, // "ui.welcome.pasteImage"
+];
+```
+
+Users saw `"Tips: Ctrl+V - ui.welcome.pasteImage"` instead of `"Tips: Ctrl+V - Paste an image from the clipboard"`.
+
+**Fix**: Move `t()` into functions called at render time (or into the component body):
 
 ```typescript
 // ✅ CORRECT — lazy evaluation after initI18n()
@@ -200,7 +210,33 @@ export function buildCommands() {
 }
 ```
 
-**Audit**: `rg -n '^\w.*t\("' src/ --include='*.ts' --include='*.tsx' | grep -v test` — no matches expected.
+For React components returning static arrays, wrap in a function:
+
+```typescript
+function getShortcutTips(): Array<{ label: string; description: string }> {
+  return [
+    { label: "Ctrl+V", description: t("ui.welcome.pasteImage") }, // ✅ "Paste an image from the clipboard"
+  ];
+}
+```
+
+If the array is consumed inside a `useMemo(...)`, the `get*()` function is still safe because `useMemo` also runs at render time.
+
+**Audit commands**:
+
+1. Check for module-level `t()` calls (should be zero in source files):
+   ```bash
+   rg -n '^\w.*t\("' src/ --include='*.ts' --include='*.tsx' | grep -v test
+   ```
+   Expected output: no matches.
+
+2. Verify `initI18n()` is called before any module that uses `t()`:
+   ```bash
+   # Check CLI entry point calls initI18n before importing UI components
+   rg -n 'initI18n' src/cli.tsx
+   ```
+
+3. When in doubt, add a runtime guard at the start of `t()` to detect pre-init calls (development only).
 
 ### 2. 🚫 Missing `t` Import
 
@@ -240,6 +276,17 @@ if (openRawModelDropdown || showSkillsDropdown || showModelDropdown || showConfi
 
 Tests calling functions using `t()` must call `initI18n("en")` first, otherwise `t()` returns key strings.
 
+**⚠️ Subtle trap**: Tests may pass even when `t()` returns key strings, if the test only checks non-translated fields (e.g., `tip.label` but not `tip.description`). The bug only manifests in the UI.
+
+```typescript
+// ❌ Test passes despite t() returning key strings — description is never checked
+const tips = buildWelcomeTips(skills);
+assert.ok(tips[0].label.includes("/new")); // passes
+// tips[0].description === "ui.welcome.sendPrompt" — but nobody checks it!
+```
+
+**Fix**: Always call `initI18n("en")` in `describe` or test setup when testing any function that uses `t()`. If the test doesn't care about translated output, at minimum assert that `t()` returns something other than the key itself.
+
 ### 6. 🚫 Translation Key Naming Mismatch
 
 Run `npm run check:i18n` before PR. Also audit key usage:

src/ui/WelcomeScreen.tsx

@@ -20,14 +20,16 @@ type WelcomeScreenProps = {
 const TITLE_PANEL_WIDTH = 70;
 const PANEL_CONTENT_HEIGHT = 8;
 
-const SHORTCUT_TIPS = [
-  { label: "Enter", description: t("ui.welcome.sendPrompt") },
-  { label: "Shift+Enter", description: t("ui.welcome.insertNewline") },
-  { label: "Ctrl+V", description: t("ui.welcome.pasteImage") },
-  { label: "Esc", description: t("ui.welcome.interrupt") },
-  { label: "/", description: t("ui.welcome.openMenu") },
-  { label: "Ctrl+D twice", description: t("ui.welcome.quit") },
-];
+function getShortcutTips(): Array<{ label: string; description: string }> {
+  return [
+    { label: "Enter", description: t("ui.welcome.sendPrompt") },
+    { label: "Shift+Enter", description: t("ui.welcome.insertNewline") },
+    { label: "Ctrl+V", description: t("ui.welcome.pasteImage") },
+    { label: "Esc", description: t("ui.welcome.interrupt") },
+    { label: "/", description: t("ui.welcome.openMenu") },
+    { label: "Ctrl+D twice", description: t("ui.welcome.quit") },
+  ];
+}
 
 export function WelcomeScreen({ projectRoot, settings, skills, width }: WelcomeScreenProps): React.ReactElement {
   const { version } = useAppContext();
@@ -123,7 +125,7 @@ export function buildWelcomeTips(skills: SkillInfo[]): Array<{ label: string; de
 
   return [
     ...slashTips,
-    ...SHORTCUT_TIPS.filter((tip) => !BUILTIN_SLASH_COMMANDS.some((command) => command.label === tip.label)),
+    ...getShortcutTips().filter((tip) => !BUILTIN_SLASH_COMMANDS.some((command) => command.label === tip.label)),
   ];
 }