| name | mlops-paas-frontend |
| description | Implement or review the React/Vite frontend, including feature-first boundaries, route coordinators, React Query, API clients, design tokens, responsive UI, accessibility, i18n, and runtime logs. Use for any change under web/ or any browser-facing workflow. |
MLOps PaaS frontend
Workflow
- Inspect the current route, page, feature API, query hook, shared component, and translations before editing.
- Read the relevant references: code-architecture.md, routing-and-state.md, api-and-server-state.md, design-system.md, and i18n-and-quality-gates.md.
- Preserve
app → features → shared; shared must not import a feature.
- Keep pages as coordinators/composition. Put HTTP in domain clients and server state in query hooks.
- Preserve routes, payloads, status semantics, dark mode, accessibility, and responsive behavior unless the request changes them.
- Inspect live backend serializers/endpoints when a frontend contract is uncertain.
- Preserve user changes and avoid unrelated visual refactors.
- If the change intentionally alters a frontend contract, update this skill.
Load $mlops-paas-overview for cross-service workflows and $mlops-paas-security for auth, tenancy, credentials, uploads, or public endpoints.
Treat code, tests, build configuration, and the live backend contract as more authoritative than README or architecture prose; reconcile conflicts explicitly. Never embed passwords, tokens, private keys, real environment values, or SSH credentials.
Required validation
From web/, run:
pnpm lint
pnpm build
Manually smoke-test the affected route, theme modes, keyboard focus, loading/empty/error states, and API recovery path.
