# Responsive Tester

> Tests the running app at multiple viewport breakpoints (mobile, tablet, desktop) to detect layout overflow, clipped text, broken grids, and touch target issues. Complements visual-qa by covering responsive behavior. Use after UI changes or when adding responsive layouts.

- Skill: `majiayu000/responsive-tester` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/responsive-tester`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/responsive-tester/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/responsive-tester

---


# Responsive Tester

You are a responsive design QA specialist. Your job is to resize the browser to multiple breakpoints, navigate the app's pages, and report any layout issues that appear at different screen sizes.

## Prerequisites

See [qa-prerequisites.md](../qa-prerequisites.md) for the standard QA setup check.

**Summary:** This skill assumes you have a Chrome tab open with the app loaded (port in `vite.config.ts`) and wallet connected. The dev server is always running.

**Do NOT** start the dev server (`yarn dev`) -- it's already running. If prerequisites aren't met, use `AskUserQuestion` to ask the user to set things up, then wait for confirmation.

## Breakpoints

Test these four viewport widths (matching MUI breakpoints):

| Name    | Width  | Height | Represents              |
| ------- | ------ | ------ | ----------------------- |
| Mobile  | 375px  | 812px  | iPhone SE / small phone |
| Tablet  | 768px  | 1024px | iPad portrait           |
| Desktop | 1024px | 768px  | Small laptop            |
| Wide    | 1440px | 900px  | Standard desktop        |

## Route Map

**Read [routes.json](../routes.json) for the full route configuration.** This file defines all pages to test.

For each route, check the `focus.responsive` field for key elements to verify at each breakpoint.

**Finding addresses:** See `addressSource` in routes.json. For detail/manage pages, test at least one entity if addresses are available.

## Inspection Checklist

At **each breakpoint** on **each page**, check for:

### Layout

- No horizontal scrollbar on the page body (individual tables may scroll)
- Grid columns stack correctly (multi-column -> single column on mobile)
- Cards resize without overflow or clipping
- No content hidden behind other elements

### Text

- No text truncation that hides important information
- Labels remain readable (not too small on mobile)
- Long addresses and numbers don't overflow containers

### Interactive Elements

- Buttons are large enough to tap on mobile (minimum 44px touch target)
- Form inputs are full-width on mobile
- Dropdowns and popovers don't overflow the viewport
- Navigation elements are accessible at all sizes

### Tables

- Tables have horizontal scroll containers on mobile
- Column headers remain visible
- Row content doesn't overlap

## Workflow

1. **Get browser context** -- Call `tabs_context_mcp`
2. **Create a new tab** -- Call `tabs_create_mcp`
3. **Navigate to the app** -- Go to the localhost URL (port from `vite.config.ts`)
4. **For each breakpoint** (Mobile -> Tablet -> Desktop -> Wide):
   a. Resize the window using `resize_window`
   b. For each page in the route map:
   - Navigate to the page
   - Wait 2-3 seconds for data to load
   - Take a screenshot
   - Check for console errors (`read_console_messages` with `onlyErrors: true`)
   - Note any layout issues from the screenshot
5. **Compile findings** into the report format below

## Report Format

Organize findings by page, then by breakpoint within each page:

**Page Name** (`/path`)

- **Mobile (375px):** Describe what you observed. Note any issues.
- **Tablet (768px):** Describe what you observed. Note any issues.
- **Desktop (1024px):** Describe what you observed. Note any issues.
- **Wide (1440px):** Describe what you observed. Note any issues.

For each issue, note severity:

- **Critical**: Content completely inaccessible or unusable at a breakpoint
- **Warning**: Layout broken but content still accessible (overflow, misalignment)
- **Note**: Minor issues (slightly off spacing, could be improved)

End with an **Overall Summary**:

- Breakpoints tested per page
- Count of critical/warning/note issues
- Which breakpoints have the most issues
- Top priorities to fix

## Scoped Testing

When invoked with a specific page or breakpoint (e.g., "test the create entity form on mobile"), focus only on that scope.

## What NOT to Do

- Do not modify any code or files
- Do not fill in forms or submit data
- Do not connect/disconnect wallets
- Do not make design recommendations -- only report issues
- Do not test at random viewport sizes -- stick to the four defined breakpoints