skills.rest
jedmamosto
jedmamostoCOMMUNITY
Explore all skills by this author →
GitHub

mobile-responsive

Enforce mobile-first UX rules for Lovable, Framer, and GHL funnel pages.

Updated May 21, 2026
Search Tags:#responsive design#mobile-first#breakpoints#touch targets#form usability#sticky CTA#funnel UX
One-click install
npx skills add https://github.com/jedmamosto/m-and-ms --skill mobile-responsive-jedmamosto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-responsive
Source: https://github.com/jedmamosto/m-and-ms/tree/main/.agents/skills/mobile-responsive
Command: npx skills add https://github.com/jedmamosto/m-and-ms --skill mobile-responsive-jedmamosto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It fixes poor mobile funnel experiences caused by missing viewport setup, desktop-first layouts, undersized touch targets, and non-thumb-friendly CTAs that hurt conversions.

Core Features & Use Cases

  • Mobile-first layout checklist: Ensures single-column stacking on small screens and grid behavior only after 768px.
  • Sticky CTA bar pattern: Adds a fixed bottom CTA on pages longer than one viewport so the primary action never scrolls away.
  • Mobile usability guardrails: Enforces 44px+ (CTA/button/link/input) touch targets, 16px minimum body/type sizing to prevent iOS focus zoom, and form rules that prevent side-by-side fields on mobile.
  • Breakpoint and type scale standards: Provides a consistent mobile base plus tablet/desktop scale steps and a max-width container cap.
  • Required meta and testing protocol: Requires viewport meta, prevents horizontal scroll at 375px, and specifies a testing matrix for real-device portrait and landscape.

Quick Start

Apply the mobile-responsive checklist to your funnel page build and adjust breakpoints, touch targets, and the sticky bottom CTA until it passes the 375, 414, 768, 1024, and 1280 mobile testing checks.

Frequently Asked Questions about mobile-responsive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix horizontal scroll issues on mobile funnel pages at 375px?▼

To prevent iOS input focus zoom on mobile pages, enforce a 16px minimum body typography size. This baseline text sizing standard stops the automatic zoom behavior triggered when users tap form fields on smaller screens.

What size should touch targets be for mobile-first responsive design?▼

Touch targets for mobile-first responsive design should be 44px or larger for CTAs, buttons, links, and inputs. This thumb-friendly spacing standard ensures clickable elements are accessible and prevents accidental taps on small screens.

How do I add a sticky CTA bar to funnel pages longer than one viewport?▼

To add a sticky CTA bar to long funnel pages, apply a fixed bottom CTA pattern that keeps the primary action visible as users scroll. This ensures the main conversion button never scrolls out of view on mobile devices.

What are the standard breakpoints for mobile-first responsive layout scaling?▼

Standard mobile-first responsive breakpoints for layout scaling are 768px, 1024px, and 1280px. This progression applies grid behavior only after the 768px tablet breakpoint, maintaining a single-column mobile base below that width.

Can I use this mobile-first responsive checklist with Framer and GHL funnel pages?▼

You can apply this mobile-first responsive checklist to Lovable, Framer, and GHL funnel pages. It corrects mobile UX issues by enforcing viewport configuration, thumb-friendly spacing, and responsive layout rules specific to these platforms.

Related Skills

Explore More Design & Creative Skills→
jaredlanderjaredlander

html

Write semantic, accessible, and performant HTML following modern web standards.

Community
Basic
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
jedmamostojedmamosto

conversion-ux

Design funnel page layouts with CTA placement and conversion patterns.

Community
Advanced
Asymmetric-alAsymmetric-al
1

responsive-design

Build mobile-first CSS layouts with Grid, Flexbox, and media queries.

Official
Intermediate