**Version:** 1.2.0 **Updated:** 2026-06-30 **Freshly updated:** v1.2.0 grounds the report in real mobile metrics: `respira_run_pagespeed_audit` (strategy mobile) plus `respira_get_core_web_vitals` now drive the score instead of layout heuristics alone. It locates and adjusts
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/mobile-experience-report
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
**Version:** 1.2.0 **Updated:** 2026-06-30 **Freshly updated:** v1.2.0 grounds the report in real mobile metrics: `respira_run_pagespeed_audit` (strategy mobile) plus `respira_get_core_web_vitals` now drive the score instead of layout heuristics alone. It locates and adjusts
# Mobile Experience Report
**Version:** 1.2.0
**Updated:** 2026-06-30
**Freshly updated:** v1.2.0 grounds the report in real mobile metrics: `respira_run_pagespeed_audit` (strategy mobile) plus `respira_get_core_web_vitals` now drive the score instead of layout heuristics alone. It locates and adjusts mobile breakpoint settings in place with `respira_find_element`, snapshots pages with `respira_get_snapshot` before any fix, and applies the same fix across many pages in one pass with `respira_batch_update`.
**Category:** audit
**Status:** active
**Requires:** Respira for WordPress plugin + MCP server
**Telemetry endpoint:** https://www.respira.press/api/skills/track-usage
---## Description
See what mobile visitors actually see — broken layouts, oversized text, stacking failures.
Mobile Experience Report reveals the hidden mobile layout disasters that desktop testing misses. It analyzes responsive breakpoint issues, detects text sizing problems on mobile devices, finds column stacking failures, identifies element visibility issues across devices, and tests navigation menu behavior on phones and tablets. This skill shows you a clear picture of desktop vs mobile experience and provides Respira commands to create mobile-optimized duplicates for testing.
---## Trigger Phrases
This skill activates when the user says any of the following:
- "audit mobile experience"
- "check mobile layout"
- "mobile responsive issues"
**Do NOT trigger for:** general WordPress audits without mobile intent, requests to build responsive designs from scratch, non-WordPress site questions, or desktop-only layout fixes.
---
## Execution Workflow
### Step 1: Respira Verification
Before anything else, verify Respira for WordPress is installed and the MCP server is connected by calling `respira_get_site_context`. If it fails or returns an error, stop and show the installation guide.
**If Respira is NOT installed, output this and STOP:**
```markdown
## ⛔ Respira for WordPress Required
This skill requires the **Respira for WordPress** plugin to analyze your site safely.
### Install in 3 steps:
1. Go to **https://www.respira.press** and download the plugin
2. Install and activate on your WordPress site
3. Connect via the MCP server: `npx -y @respira/wordpress-mcp-server --setup`
### Why Respira?
- Read-only analysis — no changes to your live site
- Duplicate-first mobile fixes so nothing breaks for desktop visitors
- Full audit trail for every action
Once installed, come back and try again: *"audit mobile experience"*
```
**If MCP is connected but site unreachable:**
```markdown
## ⚠️ Cannot Connect to WordPress Site
Respira is installed but cannot reach your WordPress site.
### Troubleshooting:
1. Verify your WordPress site is online
2. Check the Respira plugin is active (not just installed)
3. Confirm MCP server configuration in Claude settings
4. Review API key in Respira → Settings → API Keys
Returns: WordPress version, PHP version, active theme, installed plugins,
detected page builder
```
Record: `respira_site_url`, `started_at = new Date().toISOString()`
```
Tool: respira_get_builder_info
Returns: Active builder name, version, responsive settings and breakpoints
```
**Builder-specific mobile issue patterns:**
- **Elementor:** Column reversal setting, mobile breakpoint (default 767px), font size scaling, padding settings per device
- **Divi:** Mobile breakpoints at 980px/767px, column gutter behavior, custom CSS per viewport
- **WPBakery:** Responsive column widths, custom responsive settings per section
- **Gutenberg/Full Site Editing:** Block spacing on mobile, column blocks, cover block height
- **Beaver Builder:** Responsive column behavior, mobile menu type, breakpoint settings
- **Classic themes (no builder):** Theme's responsive CSS approach, viewport meta tag
---
### Step 3: Page Inventory
```
Tool: respira_list_pages
Params: { status: "publish" }
Returns: All published pages with IDs, titles, content metadata
```
Identify high-priority pages to audit:
1. Homepage (always analyze)
2. Top-level navigation pages
3. Any page with complex multi-column layouts
4. Contact or conversion pages
Limit deep analysis to top 10 pages to keep report actionable.
---
### Step 4: Real Mobile Metrics
Do not rely on layout heuristics alone. Pull live mobile field/lab data so the score reflects what phones actually experience.
For the homepage and each priority page:
```
Tool: respira_run_pagespeed_audit
Params: { url: <page url>, strategy: "mobile" }
Returns: Mobile Lighthouse scores, lab metrics, and opportunities
```
```
Tool: respira_get_core_web_vitals
Params: { url: <page url>, strategy: "mobile" }
Returns: LCP, INP, CLS for the mobile profile (field data when available, lab otherwise)
```
Record the mobile LCP / INP / CLS per page and feed them into the Performance band of the score (Step 6). Real Core Web Vitals override the heuristic performance estimate when present. If the PageSpeed audit is unavailable (no API key, rate limited, or the site is unreachable to Google), fall back to the structural analysis below and note in the report that metrics are heuristic, not measured.
| Services | Grid | 3 columns | Not stacking ❌ | Unreadable on phones |
**What visitors see:** Two or three columns squished to tiny widths on a phone screen, text cut off, images invisible.
**Respira Fix Workflow:**
```
"Create duplicate versions of the homepage and services page,
then set mobile column width to 100% so they stack vertically"
```
### Horizontal Scroll
[If horizontal scroll detected:]
**Pages with horizontal scroll:** [list]
This means elements are wider than the viewport, causing the page to scroll sideways. Common causes: fixed-width containers, oversized images, or wide tables.
**Respira Fix Workflow:**
```
"Find elements causing horizontal scroll on [page] and create a duplicate
with max-width: 100% applied to fix the overflow"
```
---
## Typography Problems
[If typography issues found:]
### Oversized Headings on Mobile
| Page | Element | Desktop Size | Mobile Size | Verdict |
🟡 **Medium** ([count]) — noticeable but not blocking
[Issues]
⚪ **Low** ([count]) — polish and optimization
[Issues]
---
## Safe Fix Roadmap
**Week 1: Fix the Breaks**
1. Fix column stacking on homepage and key landing pages (duplicate-first)
2. Reduce oversized heading sizes for mobile viewports
3. Fix horizontal scroll issues
**Week 2: Improve the Experience**
1. Reduce section padding on mobile
2. Fix navigation tap targets
3. Add responsive wrappers to videos and maps
**Week 3: Polish**
1. Optimize images for mobile (size and format)
2. Test on real devices
3. Run another mobile audit to measure improvement
### How fixes are applied
When the user approves a fix, apply it precisely rather than rewriting pages:
1. Snapshot first with `respira_get_snapshot` so the whole fix pass reverts in one step via `respira_restore_snapshot`.
2. Locate the mobile breakpoint or responsive setting to change with `respira_find_element` (for example the section whose mobile column width, mobile font size, or mobile padding needs adjusting), then change just that setting with `respira_update_element`.
3. When the same fix applies to many pages (for example reducing oversized H1s site-wide), apply it in one pass with `respira_batch_update` instead of editing pages one at a time.
4. Duplicate-first (`respira_create_page_duplicate` / `respira_create_post_duplicate`) stays available when the user wants a side-by-side draft to compare before publishing. The snapshot is the safety net either way.
---
**Honest note:**
This skill combines real mobile metrics (Core Web Vitals and a mobile Lighthouse pass via `respira_run_pagespeed_audit` / `respira_get_core_web_vitals`) with structural analysis of your page builder configuration. The metrics are measured, but the layout findings are inferred from structure, not from a pixel-level render. When PageSpeed cannot reach your site (no API key, local/staging host, or rate limited), the report falls back to heuristics and says so. Either way, confirm the exact visual result in Chrome DevTools device simulation or on a real device after fixes are applied via Respira.
---
*Report generated by Mobile Experience Report · Powered by Respira for WordPress*
*Re-run anytime: "audit mobile experience"*
```
---
## MCP Tools Reference
All tools below are provided by the `respira-wordpress` MCP server. Never call tools that are not in this list.
