kim-dh2417 Responsive QA Playwright
Use Playwright to validate responsive behavior and refine layouts.
Use This Skill When
- The user asks whether responsive behavior works.
- The task involves mobile, tablet, desktop, or viewport-specific UI.
- The user wants real browser verification before accepting a fix.
Workflow
- Identify representative routes.
- Choose target viewports.
- Inspect in browser with Playwright.
- Record visible issues:
- layout breakage
- overflow
- table usability
- modal clipping
- menu/header problems
- Implement fixes.
- Re-verify the same routes and viewports.
- Summarize what was actually checked.
Recommended Viewports
- Mobile:
390x844 - Tablet: use when needed
- Desktop: typical wide viewport
What to Check
- header behavior
- sidebar or drawer behavior
- area/environment switching
- search panel stacking
- form column collapse
- table horizontal scrolling
- modal width and internal scroll
- tap target size on mobile
Reporting Rules
- Be explicit about what was verified.
- Distinguish representative-route QA from full-site QA.
- If not every page was checked, say so.
Good Default Scope
Start with representative pages by pattern:
- login
- form
- search/table
- modal/detail
- dashboard
Then widen only if needed.