Comprehensive research on implementing Phase 1: Input UX for fitness app.
Documents standard stack (React 18 + CSS custom properties), architecture
patterns (stepper components with 44px touch targets, validation), common
pitfalls (iOS auto-zoom, negative values), and verified code examples.
Key findings:
- Mobile touch target minimum 44px (iOS HIG, Material Design, WCAG 2.1)
- iOS auto-zoom prevented with font-size >= 16px on inputs
- Negative value validation in onChange handlers (not just HTML min attr)
- Custom stepper buttons recommended over native browser spinners
- Plain React state sufficient for Phase 1 (no form libraries needed)
- Weight input: 2.5kg steps; Reps input: 1 rep steps
- Includes reusable StepperInput component, WeightInput, RepsInput
All patterns verified against official docs (MDN, Apple HIG, Material Design,
WCAG 2.1) and industry best practices (NN/G, Chakra UI, Material Design).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
clawd
055dc93c89