| name | clawbox-ui-i18n |
| description | 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. |
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 datasrc/locales/en/translation.jsonsrc/locales/zh/translation.json
Workflow
- Add or update translation keys before wiring UI text.
- Keep translation keys nested by feature instead of flattening unrelated labels into generic buckets.
- Prefer existing store actions and selectors over adding duplicate component-local copies of remote state.
- 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.
