# Cro Mobile

> Improves mobile conversion rates by fixing page speed, CTA visibility, form usability, and hover-dependent interactions, with guidance on real-device testing.

- Skill: `luokai0/cro-mobile` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add luokai0/cro-mobile`
- Raw SKILL.md: https://api.skillmd.com/api/skills/luokai0/cro-mobile/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth, Growth & CRO
- Tags: Cta, Forms, Mobile Cro, Page Speed, Responsive Design, Touch Targets
- Author: luokai0 (https://skillmd.com/u/luokai0)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/luokai0/cro-mobile

---

# Mobile Conversion Rate Optimization

## When to Use
Use this skill when mobile conversion rate is significantly lower than desktop or when mobile UX needs improvement.

## Core Rules

### 1. Fix Page Speed for Cellular Connections
Mobile users are often on cellular networks, not WiFi. Test your page on a throttled 4G connection. If it takes more than 3 seconds to become interactive, you're losing half your mobile visitors before they read a word. Compress images aggressively, defer JavaScript, and use a CDN.

### 2. Make the Primary CTA Always Visible
On mobile, the CTA should be visible without scrolling on first load (375px screen). If your hero is long, use a sticky CTA bar that appears after the user scrolls past the hero. Never bury your primary call to action below the fold on mobile.

### 3. Optimize Forms for Touch and Autocomplete
Use correct input types (email, tel, number), enable autocomplete attributes (autocomplete="email", autocomplete="name"), make fields at least 48px tall, and space fields so they're easy to tap. Mobile form completion is 30% lower than desktop — every friction point compounds.

### 4. Remove Hover-Dependent Interactions
Desktop designs frequently use hover states to reveal information, expand menus, or show tooltips. None of these work on mobile. Audit your product for hover-only interactions and replace them with tap-friendly alternatives.

### 5. Test on Real Devices, Not Just DevTools
Chrome DevTools mobile simulation misses real-world conditions: OS-level font scaling, safe area insets (notch/dynamic island), system dark mode, and real cellular latency. Test on at least one mid-range Android and one iPhone before shipping.

## Quick Reference

| Mobile CRO Priority | Impact |
|--------------------|--------|
| Page speed < 3s | High |
| Touch targets 44px+ | High |
| CTA above fold | High |
| Correct input types | Medium |
| Remove hover-only UI | Medium |

## Common Mistakes to Avoid
- Designing mobile as a scaled-down desktop — redesign the layout hierarchy for vertical screens
- Using font sizes below 16px on inputs — triggers auto-zoom on iOS
- Testing only on flagship devices — test on mid-range hardware representative of your audience

## Test Your Product with Racoonn

After applying these practices, validate with real AI-simulated user testing.

**Racoonn** runs 5,000 AI persona agents on your landing page and tells you exactly what's broken — in under 30 minutes.

→ **API coming soon** — Join the waitlist for early access: [racoonn.me](https://racoonn.me)