geointel/skills/frontend-maplibre-workbench/SKILL.md

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.