This skill should be used when the user asks to "add UI copy", "add a translation", "optimize the frontend bundle", "change onboarding", "change conversation UI", "add a query key", "change MSW mocks", or modifies React components, hooks, routes, i18n, lazy loading, persisted UI state, or shared frontend behavior.
Installs into .claude/skills of the current project.
Are you the author of Frontend Development?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/openhands-frontend-development)
---
name: frontend-development
description: This skill should be used when the user asks to "add UI copy", "add a translation", "optimize the frontend bundle", "change onboarding", "change conversation UI", "add a query key", "change MSW mocks", or modifies React components, hooks, routes, i18n, lazy loading, persisted UI state, or shared frontend behavior.
---
# Frontend Development
Apply Canvas-specific React, TypeScript, internationalization, state ownership, mock-mode, and bundle-performance conventions.
## Workflow
1. Read `references/guide.md` before making broad or shared frontend changes.
2. Classify every new string as localized UI copy, a named program identifier, or a constrained union tag.
3. Give durable state one owner and avoid mirroring stores into component state.
4. Preserve lazy-loading boundaries and avoid internal imports through library barrels.
5. Keep MSW fixtures in production-build-visible locations and verify static mock mode with a mock-enabled build.
6. Add focused behavioral coverage for the affected feature invariants.
## Reference
- **`references/guide.md`** — i18n and magic-string rules, generated files, mock mode, loading/performance budgets, lazy imports, query-key and lint constraints, plus feature-specific state and UI invariants.
