Mobile Experience Report Skill for WordPress Sites

What is the mobile experience report skill?

It shows what mobile visitors see on a WordPress site: broken layouts, oversized text and stacking failures. It analyzes responsive breakpoint issues, text sizing, column stacking, element visibility across devices and navigation menu behavior on phones and tablets.

It triggers on phrases like my site looks bad on mobile, check mobile layout, responsive audit and site broken on phones. It does not trigger for general WordPress audits without mobile intent, requests to build responsive designs from scratch, or desktop only layout fixes.

Real mobile metrics

For the homepage and each priority page it calls respira_run_pagespeed_audit and respira_get_core_web_vitals with the mobile strategy. Real LCP, INP and CLS values feed the Performance band of the score and override the heuristic estimate.

The layout findings are inferred from structure, not from a pixel level render. If PageSpeed cannot reach the site, the report falls back to heuristics and says so.

The mobile score

• Layout and columns, 30 points: no column stacking failures and no horizontal scroll.
• Typography, 20 points: headings scale for mobile and body text is readable on small screens.
• Spacing, 15 points: padding and margins reduce on mobile and whitespace does not eat the viewport.
• Navigation, 15 points: a mobile menu is configured and tap targets are 44px or larger.
• Media, 10 points: images and videos are responsive.
• Performance, 10 points: mobile Core Web Vitals are in the good range.

The labels are 85 to 100 mobile friendly, 60 to 84 minor issues, 40 to 59 significant problems and 0 to 39 broken on mobile.

Device classes and builders

It assesses five device classes: small phone at 320 to 375 px, standard phone at 376 to 414 px, large phone at 415 to 480 px, tablet portrait at 481 to 768 px and a wide tablet class at 769 to 1024 px.

Builder specific patterns cover Elementor, Divi, WPBakery, Gutenberg with Full Site Editing, Beaver Builder and classic themes. For Elementor it checks column reversal, the mobile breakpoint, font size scaling and padding per device.

How fixes are applied

When you approve a fix, it takes a snapshot with respira_get_snapshot, locates the setting with respira_find_element and changes it with respira_update_element. It can apply one fix to many pages in a single pass with respira_batch_update.

A duplicate first workflow stays available through respira_create_page_duplicate and respira_create_post_duplicate, for a side by side draft before publishing. The snapshot is the safety net either way.

Who the mobile experience report skill is for

Best for

• Diagnosing a WordPress site that looks bad on phones, device by device.
• Finding column stacking failures, oversized headings, excess section padding and horizontal scroll.
• Reviewing mobile navigation, including menu configuration, touch dropdowns and tap targets.
• Sites built with Elementor, Divi, WPBakery, Gutenberg, Beaver Builder or a classic theme.

Not for

• Specifying a layout with 4, 8 and 12 column grids, gutter and margin sizes and named page patterns, which the layout-grid skill covers.
• A WCAG 2.2 audit workflow with Lighthouse evidence and a ranked list of common issues, which the web-accessibility skill covers.
• Seven design principles and seven page patterns with fluid type and accessible color, which the modern-web-design skill covers.
• Layout rules for the first screen, headlines, CTA buttons, section order and forms, which the landing page design skill covers.

How to install Mobile Experience Report Skill for WordPress Sites

npx skills add respira-press/agent-skills-wordpress -g -a claude-code -y

1. Run the install command

   Run the command above to install every skill in the repository globally for Claude Code. Drop -g to install into the current project only.

2. Set up the requirement

   The skill requires the Respira for WordPress plugin and its MCP server, which you can connect with npx -y @respira/wordpress-mcp-server --setup.

3. Swap the agent

   Replace -a claude-code with your agent, for example -a opencode.

4. Update later

   Run npx skills update -g to update the installed skills.

Check that it loaded

Ask your agent to audit the mobile experience of your site. Expect it to call respira_get_site_context first, and to stop with an install guide if Respira is missing.

Read the official instructions on GitHub

Key features

• Mobile scoreScores 0 to 100 across layout 30, typography 20, spacing 15, navigation 15, media 10 and performance 10 points.
• Real mobile metricsrespira_run_pagespeed_audit and respira_get_core_web_vitals run with strategy mobile and return Lighthouse scores, LCP, INP and CLS.
• Device breakpointsAssesses five device classes, from small phones at 320 to 375 px up to a wide tablet class at 769 to 1024 px.
• Builder aware checksCovers Elementor, Divi, WPBakery, Gutenberg with Full Site Editing, Beaver Builder and classic themes with their own mobile settings.
• Layout checksFlags multi column sections without responsive stack settings, fixed width elements, overflow hidden clipping and horizontal scroll.
• Typography checksFlags headings with the same pixel size on desktop and mobile, line height that causes overlap and letter spacing that is too wide.
• Navigation and tap targetsFlags hover dropdowns, a missing mobile menu, items too close together and tap targets under 44px.
• Top 10 pagesLimits deep analysis to the top 10 pages, starting with the homepage, top level navigation pages, multi column pages and conversion pages.
• Snapshot first fixesTakes a snapshot with respira_get_snapshot before any fix, so the whole pass reverts in one step through respira_restore_snapshot.
• Severity reportGroups findings as critical, high, medium and low, and ends with a safe fix roadmap spread over three weeks.

Frequently asked questions