# Mobile Web Domain Knowledge

> Understand mobile and web application patterns including architecture, UX, performance, and platform-specific requirements

- Skill: `danhvb/mobile-web-domain-knowledge` (Agent Skill)
- Install (CLI): `npx skillmds@latest add danhvb/mobile-web-domain-knowledge`
- Raw SKILL.md: https://api.skillmd.com/api/skills/danhvb/mobile-web-domain-knowledge/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: danhvb (https://skillmd.com/u/danhvb)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/danhvb/mobile-web-domain-knowledge

---


# Mobile/Web Domain Knowledge Skill

## Purpose
Provide comprehensive knowledge for analyzing requirements in mobile and web application projects, covering platform differences, UX patterns, and technical considerations.

## Application Types

### Web Applications

**Static Website**: HTML/CSS, no server logic
**Single Page App (SPA)**: Client-side rendering (React, Vue, Angular)
**Server-Side Rendering (SSR)**: Server renders HTML (Next.js, Nuxt)
**Progressive Web App (PWA)**: Web app with native-like features

### Mobile Applications

**Native**: Platform-specific (Swift/iOS, Kotlin/Android)
**Cross-Platform**: Single codebase (React Native, Flutter)
**Hybrid**: Web in native container (Ionic, Cordova)
**PWA**: Web app installable on mobile

### Comparison

| Aspect | Native | Cross-Platform | PWA |
|--------|--------|----------------|-----|
| Performance | Best | Good | Good |
| Device Access | Full | Most | Limited |
| Development Cost | High (2 codebases) | Medium | Low |
| App Store | Required | Required | Optional |
| Update Speed | App store review | App store review | Instant |
| Offline | Full | Full | Limited |

## Platform Requirements

### iOS Considerations
- Swift/Objective-C or React Native/Flutter
- iOS 15+ support (recommended)
- App Store guidelines compliance
- Apple Sign-In required if social login
- Face ID/Touch ID for authentication
- Push notifications via APNs
- In-app purchases via Apple (30% fee)
- Privacy nutrition labels

### Android Considerations
- Kotlin/Java or React Native/Flutter
- Android 12+ support (recommended)
- Google Play Store guidelines
- Material Design principles
- Fingerprint/biometric authentication
- Push notifications via FCM
- Multiple screen sizes/densities
- Permissions model

### Web Considerations
- Browser compatibility (Chrome, Safari, Firefox, Edge)
- Responsive design (mobile-first)
- Accessibility (WCAG 2.1 AA)
- SEO requirements
- Performance (Core Web Vitals)
- Progressive enhancement

## Common Requirements Patterns

### Authentication

**Requirements**:
```
REQ-AUTH-001: User shall login with email and password
REQ-AUTH-002: User shall login with social accounts (Google, Facebook, Apple)
REQ-AUTH-003: User shall use biometric authentication (Face ID, Touch ID, Fingerprint)
REQ-AUTH-004: Session shall expire after 30 minutes of inactivity
REQ-AUTH-005: User shall reset password via email link
```

**Security Considerations**:
- Secure token storage (Keychain/Keystore)
- Certificate pinning
- HTTPS only
- OAuth 2.0/OIDC standards
- Rate limiting

### Offline Functionality

**Levels of Offline Support**:

**Level 1: Read-only Cache**
- View previously loaded data
- No modifications offline
- Simple implementation

**Level 2: Optimistic Updates**
- View cached data
- Make changes offline
- Sync when online
- Conflict resolution needed

**Level 3: Full Offline**
- Complete feature set offline
- Queue all actions
- Complex sync logic
- Background sync

**Requirements Example**:
```
REQ-OFFLINE-001: App shall cache last 50 orders for offline viewing
REQ-OFFLINE-002: App shall indicate offline status to user
REQ-OFFLINE-003: App shall queue actions when offline
REQ-OFFLINE-004: App shall auto-sync when connection restored
REQ-OFFLINE-005: App shall notify user of sync conflicts
```

### Push Notifications

**Types**:
- Transactional: Order updates, password reset
- Marketing: Promotions, recommendations
- Re-engagement: Cart abandonment, inactive user

**Requirements**:
```
REQ-PUSH-001: User shall receive order status notifications
REQ-PUSH-002: User shall opt-in to marketing notifications
REQ-PUSH-003: Notification shall deep-link to relevant screen
REQ-PUSH-004: User shall manage notification preferences in settings
```

**Technical**:
- iOS: APNs (Apple Push Notification service)
- Android: FCM (Firebase Cloud Messaging)
- Web: Web Push API

### Performance Requirements

**Mobile Performance**:
```
REQ-PERF-001: App shall launch in < 2 seconds (cold start)
REQ-PERF-002: Screen transitions shall complete in < 300ms
REQ-PERF-003: API responses shall complete in < 2 seconds
REQ-PERF-004: App shall maintain 60 fps during scrolling
REQ-PERF-005: Crash rate shall be < 1%
```

**Web Performance (Core Web Vitals)**:
```
REQ-PERF-010: LCP (Largest Contentful Paint) < 2.5 seconds
REQ-PERF-011: FID (First Input Delay) < 100ms
REQ-PERF-012: CLS (Cumulative Layout Shift) < 0.1
REQ-PERF-013: TTI (Time to Interactive) < 3.8 seconds
```

### Responsive Design

**Breakpoints**:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

**Requirements**:
```
REQ-RESP-001: Layout shall adapt to screen sizes 320px to 2560px
REQ-RESP-002: Touch targets shall be minimum 44x44 pixels on mobile
REQ-RESP-003: Content shall be readable without horizontal scroll
REQ-RESP-004: Images shall use responsive sizing (srcset)
```

### Accessibility (WCAG 2.1)

**Requirements**:
```
REQ-A11Y-001: All images shall have alt text
REQ-A11Y-002: Color contrast ratio shall be 4.5:1 minimum
REQ-A11Y-003: All interactive elements shall be keyboard accessible
REQ-A11Y-004: Form fields shall have visible labels
REQ-A11Y-005: Error messages shall be associated with fields
REQ-A11Y-006: App shall support screen readers (VoiceOver, TalkBack)
```

## Key UX Patterns

### Navigation
- Tab bar (mobile): 3-5 main sections
- Hamburger menu: Secondary navigation
- Bottom sheets: Contextual actions
- Modal dialogs: Focused tasks

### Forms
- Single column layout (mobile)
- Keyboard type matching input
- Inline validation
- Clear error messages
- Progress indicators for multi-step

### Loading States
- Skeleton screens
- Pull to refresh
- Infinite scroll vs pagination
- Optimistic UI updates

### Gestures (Mobile)
- Tap: Primary action
- Long press: Secondary menu
- Swipe: List actions, navigation
- Pinch: Zoom

## App Store Considerations

### App Store (iOS)
- Review time: 24-48 hours
- Human review for initial submission
- Reject reasons: bugs, crashes, guideline violations
- Required: Privacy policy, age rating
- In-app purchases: 15-30% commission

### Google Play (Android)
- Review time: Few hours to days
- Automated + human review
- Required: Privacy policy, age rating
- In-app purchases: 15-30% commission

### Common Rejection Reasons
- Crashes or bugs
- Incomplete functionality
- Privacy issues
- Guideline violations
- Misleading metadata
- Broken links

## Analytics & Tracking

**Key Events**:
- App install/open
- Screen views
- Feature usage
- Conversion events
- Errors/crashes

**Tools**:
- Firebase Analytics
- Mixpanel
- Amplitude
- App Store Connect / Google Play Console

## Questions for Stakeholders

- Native vs cross-platform vs PWA?
- Which platforms and versions to support?
- Offline functionality needed?
- Push notification use cases?
- Performance expectations?
- Accessibility requirements?
- App store presence required?
- Analytics requirements?

## References

- Apple Human Interface Guidelines
- Material Design Guidelines
- Web Content Accessibility Guidelines (WCAG)
- Core Web Vitals Documentation