Skip to content

SKILL.md

Latest commit

 

History

History
66 lines (45 loc) · 2.45 KB

SKILL.md

File metadata and controls

66 lines (45 loc) · 2.45 KB
name description license metadata
mobile-optimization
Validates viewport meta configuration, responsive design, font sizes, touch target sizes, and mobile-hostile patterns. Use when checking mobile-friendliness or fixing mobile rendering issues.
MIT

Mobile Optimization

Audit the page for mobile-friendliness.

1. Viewport meta tag

Check Status
Missing <meta name="viewport"> ❌ FAIL "Page will not render correctly on mobile"
Present but missing width=device-width ⚠️ WARN
Contains user-scalable=no or maximum-scale=1 ⚠️ WARN "Disabling zoom hurts accessibility"
Properly configured ✅ PASS

2. Fixed-width elements

Scan all elements with inline style="..." for width: Npx:

  • If any element has width > 500px → ⚠️ WARN "May cause horizontal scrolling on mobile"
  • Report the count of offending elements

3. Font sizes

Scan inline styles for font-size: Npx:

  • If any element has font-size < 12px → ⚠️ WARN "Difficult to read on mobile"
  • Report the count

4. Touch target sizes

Check interactive elements (<a>, <button>, <input type="submit">, <input type="button">) with inline height style:

  • If height < 48px → ⚠️ WARN "Too small for touch targets"
  • Minimum recommended: 48px × 48px (per Google's mobile-friendly guidelines)

5. Overflow detection

  • Elements with overflow-x: hidden or overflow: hidden → ⚠️ WARN "Verify content is not clipped on mobile"

6. Responsive stylesheets

  • <link rel="stylesheet" media="..."> found → ✅ PASS "Media-query-specific stylesheets found"

7. Tables

  • If > 2 <table> elements → ⚠️ WARN "Tables can be difficult to read on mobile. Consider responsive table patterns"

Edge cases

  • If no inline styles are present, skip fixed-width and font-size checks
  • CSS-in-JS frameworks (styled-components, Emotion) embed styles at runtime — these cannot be audited from static HTML alone; note this limitation
  • Elements with display: none or visibility: hidden should be excluded from touch target checks
  • AMP pages have their own viewport rules — flag but do not fail if AMP boilerplate is detected
  • PWA splash screens and app-shell patterns may intentionally use user-scalable=no — flag as ⚠️ WARN but note context