Dorian
c28e6dd811
Foundation for the next-generation AI content surface UI: - 16 Cursor rules files covering philosophy, Vue conventions, design system, content surfaces, plugin system, AI integration, renderers, security, Bitcoin-only policy, dev/prod modes, accessibility, performance, animation, mobile UX, and git workflow - pnpm workspaces + Turborepo monorepo (@aiui/core, @aiui/app) - Vue 3 + Vite + TypeScript + Tailwind CSS 4 - Core type system: plugins, renderers, messages, content blocks - Plugin registry with renderer registration - 50 mock film fixtures with search/filter utilities - App shell with chat page layout - Environment config templates Made-with: Cursor
74 lines
2.3 KiB
Plaintext
74 lines
2.3 KiB
Plaintext
---
|
|
description: Mobile UX patterns - touch targets, gestures, safe areas, viewport
|
|
globs: "**/*.vue,**/*.css"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Mobile UX
|
|
|
|
## Philosophy
|
|
Design for mobile first, enhance for desktop. Mobile constraints force focus on essential features.
|
|
|
|
## Touch Targets
|
|
- Minimum: 44x44px (Apple HIG)
|
|
- Optimal: 48x48px (Material Design)
|
|
- Minimum gap between targets: 8px
|
|
- Icon buttons: use padding to reach target size (`p-3` for 20px icon = 44px total)
|
|
|
|
## Thumb-Friendly Zones
|
|
```
|
|
Top 20%: Hard to reach — header, info
|
|
Middle 60%: Easy reach — main content
|
|
Bottom 20%: Natural thumb zone — primary actions
|
|
```
|
|
Place primary actions (send, approve, play) in the bottom zone. Use FABs at bottom-center on mobile, bottom-right on desktop.
|
|
|
|
## Gestures
|
|
- Swipe left/right: gallery navigation, dismiss
|
|
- Swipe down: close overlay/bottom sheet, pull-to-refresh
|
|
- Long press: context menu, selection
|
|
- Pinch: zoom on images
|
|
- Minimum swipe distance: 50px before triggering
|
|
|
|
## Viewport & Safe Areas
|
|
```css
|
|
/* Dynamic viewport height (avoids iOS address bar issue) */
|
|
height: 100dvh;
|
|
|
|
/* Safe area insets for notched devices */
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
```
|
|
|
|
## Scroll Behavior
|
|
- Lock body scroll when modal/drawer is open
|
|
- `overscroll-behavior: contain` on modal content
|
|
- `touch-action: manipulation` to prevent zoom on double-tap
|
|
- `-webkit-overflow-scrolling: touch` for smooth iOS scroll
|
|
|
|
## Form Inputs
|
|
- Font size minimum 16px on inputs (prevents iOS zoom on focus)
|
|
- Use appropriate `inputmode` (numeric, email, tel, url)
|
|
- Use `autocomplete` attributes
|
|
- Auto-focus next input on completion (OTP pattern)
|
|
|
|
## Content Panel on Mobile
|
|
- No side-by-side layout (chat + panel)
|
|
- Panel opens as full-screen overlay or bottom sheet
|
|
- Bottom sheet: drag handle at top, swipe down to dismiss
|
|
- Back gesture or button returns to chat
|
|
- Maintain scroll position when returning
|
|
|
|
## Orientation
|
|
Support both portrait and landscape. Adjust layout with:
|
|
```css
|
|
@media (orientation: landscape) { /* landscape overrides */ }
|
|
```
|
|
|
|
## Performance on Mobile
|
|
- Test on real devices, not just emulators
|
|
- Test on 3G/4G connections
|
|
- Debounce scroll handlers
|
|
- Lazy load images with `loading="lazy"`
|
|
- Critical CSS inlined, rest loaded async
|