What problem does it solve? Building React views without clear architectural rules leads to re-render cascades from React Context, duplicated domain types that diverge from the backend, hardcoded colors that break dark mode, and untyped HTTP calls that fail at runtime. This Skill enforces a consistent architecture for the ZenTrack webApp/ frontend. ## Core Features & Use Cases - Zustand Selector Pattern: Prevents unnecessary re-renders by subscribing components to precise store slices with useShallow, replacing React Context for dynamic state. - OpenAPI-Generated Types: Keeps frontend domain models synchronized with the Ktor backend by regenerating src/types/api.ts with openapi-typescript instead of hand-writing interfaces. - Typed Fetch Services: Wraps native fetch in a typed apiFetch<T>() helper with JWT injection from useAuthStore and ApiError encapsulation, with Axios explicitly prohibited. - Use Case: When asked to create a new Kanban board screen, the Skill walks through regenerating API types, creating task.types.ts adapters, writing task.service.ts, defining useTaskStore with optimistic updates, and building BoardScreen plus reusable TaskColumn components. ## Quick Start Create a new React screen in webApp/ that displays tasks from the workspace endpoint using a Zustand store and MUI components.
