# Skill: Frontend MapLibre Workbench

Use this skill when building React/TypeScript UI, MapLibre maps, layer controls, workbench pages, state hooks and API clients.

## Read first

- `docs/UI_PAGE_SPECIFICATIONS.md`
- `docs/DESIGN_SYSTEM.md`
- `docs/GEOINTEL_STYLE_GUIDE.md`
- `docs/FRONTEND_STATE_AND_API_CLIENT.md`
- `docs/FRONTEND_STATE_CONTRACTS.md`

## Frontend rules

- UI supports analysis; it is not the product itself.
- Every data panel needs empty, loading, error and success states.
- API calls go through a typed client layer.
- Do not hardcode fake backend responses into production components.
- Map layers must have stable IDs and documented styles.
- Keep components modular and testable.

## Page checklist

- [ ] Route exists.
- [ ] Data fetching state handled.
- [ ] Empty state useful.
- [ ] Error state actionable.
- [ ] Success state shows real data shape.
- [ ] Layer toggling works for available data.
- [ ] Accessibility basics respected.

## Completion report fields

- Pages/components changed.
- API client methods used.
- UI states covered.
- Visual limitations.
- Tests/build commands run.