# Platform Contract — H5 (Mobile Web)

Primary shipping client: `apps/user-h5` (Vue 3 + Vite).  
Design language: [../design-system.md](../design-system.md) · Components: [../component-catalog.md](../component-catalog.md)

---

## MUST

- Mobile-first; content column `max-width: var(--layout-max-user)` (430px), centered on large screens.
- Touch targets ≥ 44×44px.
- Prefer bottom actions (TabBar, AskInputBar, sticky CTA).
- Safe area: `env(safe-area-inset-bottom)` on TabBar / fixed footers.
- `user-scalable` / viewport per existing app shell; no desktop-only hover for essentials.
- Import tokens from `@yuxingu/ui` / `packages/ui` — no page-local brand hex.
- Data via `src/api` → `@yuxingu/sdk` only (no raw `fetch` in pages).
- Structure: `pages/` · `components/` · `layouts/` · `stores/` · `router/`.
- Loading / empty / error on every network view.
- Report / Decode / Ask: compliance disclaimer.

---

## MUST NOT

- Rely on hover tooltips for critical info.
- Use `window` APIs that break iOS WeChat/browser without fallback.
- Invent a second tab IA; tabs = Home / Explore / Ask / Companion / Mine.
- Grow Legacy root HTML (`yuxingu.html`, `pages/`) for new UI.

---

## Layout notes

- HomeWash: peach gradient body + Decode form + white ContentSheet.
- Secondary: TopBar + padded content.
- Keyboard: inputs must not hide primary CTA (scroll / visualViewport aware when needed).

---

## Checklist before Done

- [ ] Tokens only
- [ ] Catalog component reused or catalog updated
- [ ] 44px touch
- [ ] Safe area
- [ ] States + compliance if needed
- [ ] `npm run build:h5`