← Cowork UI Kit

Mobile Layer

Touch-first patterns + tokens cho archetype F (PWA). Mỗi pattern là HTML standalone — fork cho project mới hoặc reference khi build.

8 Patterns reusable

Modal slide từ dưới + drag-to-dismiss + safe-area

6-digit auto-advance + paste + error shake + iOS no-zoom

CSS scroll-snap swipe-to-delete (pure CSS no JS)

Pull to Refresh

Drag-down indicator + spinner + snap-back animation

Bottom button respects keyboard + home indicator

Segmented Control

2-4 option switch iOS-style, sliding indicator

Horizontal 7-day picker + scroll-snap + today highlight

Bottom nav 5-item + active dot + notif badge + safe-area

Mobile tokens — tokens-mobile.css

--touch-min 44px (Apple HIG min)

--touch-comfy 48px (Material)

--touch-large 56px (tab bar)

--sa-top / --sa-bottom env(safe-area-inset-*)

--m-font-input-min 16px (iOS no-zoom)

--phone-sm / md / lg 360 / 390 / 430

--vh-full 100dvh (iOS Safari URL bar safe)

Utility classes

.sa-all / .sa-bottom Safe-area padding

.touch / .touch.comfy / .touch.large Min touch target

.sticky-bottom / .tab-bar-fixed Bottom containers with safe-area

.scroll-smooth-touch iOS momentum scroll

.snap-x Horizontal scroll-snap rail

.h-screen-safe 100dvh with iOS Safari fix

.no-select Disable text select on UI chrome

PWA starters

App router + manifest + iOS install meta + layout safe-area

Lighter alternative + vite-plugin-pwa + faster dev

QC mobile

Chạy /kry-qc ui mobile trước khi báo done PWA. 12 checks: viewport meta · touch ≥44px · safe-area · iOS no-zoom · contrast · momentum scroll · sticky CTA · PWA manifest. Full detail trong checklist-mobile.md.

App flow examples (4 brand)

An Nhien — Shop

5 screens · Home → Detail → Cart → Checkout → Success

KHI Wellness — Pilates

5 screens · Home → Class → Schedule → Booking → Done

Lucky8 — Restaurant

5 screens · Home → Menu → Dish → Reservation → Confirm

A-Kryphan — Blog

5 screens · Home → Article → Series → Library → Search