OpenHands frontend-development

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.

install

source · Clone the upstream repo

git clone https://github.com/OpenHands/OpenHands

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/OpenHands/OpenHands "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.agents/skills/frontend-development" ~/.claude/skills/all-hands-ai-openhands-frontend-development && rm -rf "$T"

manifest: .agents/skills/frontend-development/SKILL.md

source content

Frontend Development

Apply Canvas-specific React, TypeScript, internationalization, state ownership, mock-mode, and bundle-performance conventions.

Workflow

Read
```
references/guide.md
```
before making broad or shared frontend changes.
Classify every new string as localized UI copy, a named program identifier, or a constrained union tag.
Give durable state one owner and avoid mirroring stores into component state.
Preserve lazy-loading boundaries and avoid internal imports through library barrels.
Keep MSW fixtures in production-build-visible locations and verify static mock mode with a mock-enabled build.
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.