Mobile Friendly
Audit and fix mobile-first indexing issues—viewport, responsive layout, touch targets, content parity, and interstitials—so Google can rank your mobile experience.
Overview
Mobile-Friendly is an agent skill for the Launch phase that optimizes mobile-first indexing and mobile usability across viewport, responsive design, content parity, and interstitials.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill mobile-friendlyWhat is this skill?
- Covers mobile-first indexing, responsive breakpoints, viewport meta, and content parity vs desktop
- Checks mobile usability: font sizes, touch targets, and intrusive interstitial avoidance
- Explains AMP status and when Accelerated Mobile Pages are worth considering
- Reads .claude/project-context.md or .cursor/project-context.md for site URL when present
- Version 1.1.2 skill—defers dedicated viewport meta depth to the page-metadata companion skill
- Skill metadata version 1.1.2
Adoption & trust: 732 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your site may fail Google’s mobile crawl or usability expectations even though desktop looks acceptable, hurting indexing and rankings.
Who is it for?
Indie makers launching or refactoring marketing sites and SaaS pages who need a checklist-driven mobile SEO pass before scaling content or paid acquisition.
Skip if: Native iOS/Android app store optimization (use ASO skills) or deep Core Web Vitals-only tuning without a mobile UX or indexing lens.
When should I use this skill?
User wants mobile-friendly optimization, mobile-first indexing, mobile SEO, responsive design fixes, viewport or touch target issues, or AMP decisions.
What do I get? / Deliverables
You get a structured mobile SEO assessment and prioritized fixes for responsive behavior, usability, and content parity aligned to mobile-first indexing.
- Mobile-first indexing and usability assessment for the site type
- Prioritized remediation list for viewport, typography, touch targets, parity, and interstitials
Recommended Skills
Journey fit
How it compares
Technical SEO mobile checklist skill—pair with page-metadata for viewport meta detail, not a visual design system generator.
Common Questions / FAQ
Who is mobile-friendly for?
Solo builders and small marketing teams responsible for their own site’s organic visibility who need Google-aligned mobile indexing and usability guidance without hiring an agency.
When should I use mobile-friendly?
At Launch during SEO hardening before a big content or ads push; after redesigns that change breakpoints; when Search Console flags mobile usability or indexing issues.
Is mobile-friendly safe to install?
It is guidance and audit-oriented—no inherent credential access—but follow recommendations in a staging environment first. Review the Security Audits panel on this Prism page like any third-party skill.
SKILL.md
READMESKILL.md - Mobile Friendly
# SEO Technical: Mobile-Friendly Guides mobile-first indexing optimization and mobile usability. Google uses the mobile version of pages for indexing and ranking; mobile-friendliness is a ranking factor. **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Scope (Technical SEO) - **Mobile-first indexing**: Google primarily crawls and indexes mobile version - **Mobile adaptation**: Responsive design, viewport, breakpoints - **Content parity**: Mobile and desktop content should match (or mobile preferred) - **Mobile usability**: Viewport, font size, touch targets, no intrusive interstitials - **AMP**: Accelerated Mobile Pages—status and when to consider ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for site URL. Identify: 1. **Site type**: Responsive, separate AMP, dynamic serving 2. **Content parity**: Does mobile show same content as desktop? 3. **Tools**: GSC Mobile Usability report; [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) ## Mobile-First Indexing Requirements | Requirement | Action | |-------------|--------| | **Content parity** | Mobile version must include same primary content as desktop; avoid hiding key content on mobile | | **Structured data** | Same schema on mobile and desktop; ensure mobile URLs in schema | | **Metadata** | Same title, meta description on mobile | | **Media** | Images should be crawlable; avoid lazy-loading above-fold images | ## Responsive Design & Mobile Adaptation **Responsive design** = Single HTML; CSS media queries adapt layout to screen size. **Preferred** for SEO: one URL, no duplicate content. | Principle | Practice | |-----------|----------| | **Mobile-first** | Design for mobile first; enhance for desktop | | **Fluid layout** | Use `%`, `vw`, `flex`, `grid`; avoid fixed pixel widths | | **Breakpoints** | Common: 320px, 768px, 1024px, 1280px; match device widths | | **Images** | Responsive images (`srcset`, `sizes`); see **image-optimization** | ## Viewport The viewport meta tag tells browsers how to scale and size the page on mobile. **Required** for mobile-friendly pages. ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` | Attribute | Purpose | |-----------|---------| | `width=device-width` | Match viewport to device screen width | | `initial-scale=1` | 1:1 scale on load; prevents zoom | | `maximum-scale` | Avoid disabling zoom (accessibility) | | `user-scalable=no` | **Avoid**—hurts accessibility | **Without viewport**: Desktop layout shrunk; horizontal scroll; fails Mobile-Friendly Test. See **page-metadata**. ## Mobile Usability Checklist | Element | Guideline | |---------|-----------| | **Viewport** | See above; required for mobile-friendly | | **Font size** | 16px minimum for body text; avoid zooming to read | | **Touch targets** | Buttons/links ≥48×48px; adequate spacing between taps | | **Content width** | No horizontal scrolling; content fits viewport | | **Intrusive interstitials** | Avoid popups that block main content on mobile | ## Common Issues | Issue | Fix | |-------|-----| | **Content hidden on mobile** | Show critical content; avoid accordion/tabs for primary content | | **Flash / unsupported** | Replace with HTML5 alternatives | | **Text too small** | Use base font ≥16px; avoid `font-size` i