# Clawbox UI I18N

> Use when changing ClawBox React components, dialogs, settings pages, sidebar flows, or any user-facing copy that must stay aligned with react-i18next and the project's bilingual locale files.

- Skill: `commonstackai/clawbox-ui-i18n` (Agent Skill)
- Install (CLI): `npx skillmds@latest add commonstackai/clawbox-ui-i18n`
- Raw SKILL.md: https://api.skillmd.com/api/skills/commonstackai/clawbox-ui-i18n/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: CommonstackAI (https://skillmd.com/u/commonstackai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/commonstackai/clawbox-ui-i18n

---


# ClawBox UI i18n

Use this skill for ClawBox frontend UI work, copy changes, settings screens, onboarding screens, dialogs, and general React component changes.

## Read first

- The target component under `src/components/`
- Any matching Zustand store under `src/store/`
- `src/services/api.ts` if the component loads or mutates backend data
- `src/locales/en/translation.json`
- `src/locales/zh/translation.json`

## Workflow

1. Add or update translation keys before wiring UI text.
2. Keep translation keys nested by feature instead of flattening unrelated labels into generic buckets.
3. Prefer existing store actions and selectors over adding duplicate component-local copies of remote state.
4. If a component opens dialogs or renders chat blocks, inspect the sibling components in the same feature folder before changing layout or behavior.

## Verification

- Update both locale files in the same diff.
- Run `npm run build:frontend`.

## Guardrails

- Do not leave hard-coded user-facing strings in JSX.
- Preserve existing Radix UI and Tailwind patterns unless the task explicitly redesigns the feature.
- Keep frontend API usage centralized in service modules where possible.