qa-mobilelisted

Check responsive layout and mobile-viewport regressions in the browser (web page, not a device). Use when a web page looks broken on small/mobile screen sizes. Triggers on: responsivo, layout no celular, quebrou no mobile, tela pequena, layout responsivo no navegador, responsive, mobile viewport.
parisgroup-ai/imersao-ia-setup · ★ 1 · Web & Frontend · score 74

Install: claude install-skill parisgroup-ai/imersao-ia-setup

# Mobile QA Skill Systematic responsive QA using browser automation. ## Viewports | Device | Width | Height | |--------|-------|--------| | iPhone SE | 375 | 667 | | iPhone 14 Pro Max | 430 | 932 | | iPad Mini | 768 | 1024 | | iPad Pro | 1024 | 1366 | | Desktop | 1440 | 900 | ## QA Checklist For each viewport, check: ### Layout - [ ] No horizontal overflow (no horizontal scrollbar) - [ ] Content doesn't overflow containers - [ ] Text is readable (min 12px on mobile) - [ ] Touch targets are at least 44x44px - [ ] No overlapping elements ### Navigation - [ ] Mobile nav is functional (hamburger/tabs) - [ ] Links are tappable - [ ] Sticky headers don't cover content ### Components - [ ] Cards display correctly - [ ] Modals/dialogs fit viewport - [ ] Forms are usable (inputs not too small) - [ ] Carousels/sliders work with touch ### Design System - [ ] Semantic tokens used (no hardcoded colors) - [ ] Spacing is proportional to viewport - [ ] Typography scales properly (sm/md/lg breakpoints) ## Browser Tool Selection Use **Playwright MCP** as the primary browser tool. Fall back to `claude-in-chrome` only if Playwright MCP is unavailable. For **visual tests** (screenshots, visual comparison, pixel-level checks), always use **Playwright MCP** — it provides headless screenshots with consistent rendering, which is essential for reliable visual validation. ### Chromium for Testing (REQUIRED) Before starting browser interactions, ensure the **new Chromium headless mode** is