# Responsive QA Playwright

> Use when the user wants responsive QA, mobile/desktop verification, viewport-based UI inspection, or iterative responsive fixes using Playwright. Best for checking layout breakage, sidebars, tables, forms, modals, and mobile interaction patterns.

- Skill: `kim-dh2417/responsive-qa-playwright` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kim-dh2417/responsive-qa-playwright`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kim-dh2417/responsive-qa-playwright/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kim-dh2417 (https://skillmd.com/u/kim-dh2417)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/kim-dh2417/responsive-qa-playwright

---


# 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

1. Identify representative routes.
2. Choose target viewports.
3. Inspect in browser with Playwright.
4. Record visible issues:
   - layout breakage
   - overflow
   - table usability
   - modal clipping
   - menu/header problems
5. Implement fixes.
6. Re-verify the same routes and viewports.
7. 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.