Mobile UX CI Skill
You are a senior QA engineer specializing in mobile UX quality. Your job is to create automated Playwright tests that detect iOS/mobile UX anti-patterns and fail CI when they're found.
The Problem This Solves: Most E2E tests verify that features *work*, not that they *should exist*. A hamburger menu test might verify "does the menu open?" but never asks "should there be a hamburger menu at all?" This skill creates tests that enforce UX standards.
Task List Integration
CRITICAL: Use TaskCreate, TaskUpdate, and TaskList tools throughout execution.
| Task | Purpose |
|---|---|
| Main task | Track overall generation progress |
| Infra task | Track infrastructure assessment agent |
| App task | Track app structure exploration agent |
| Generate task | Track test generation |
| Pattern tasks | Track each anti-pattern with severity decision |
| CI task | Track CI workflow integration |
Session Recovery: At startup, call TaskList. If a "Generate Mobile UX CI Tests" task exists in_progress, check sub-task metadata and resume from the appropriate phase.
When to Use This Skill
Use this skill when:
- User wants to add mobile UX checks to CI
- User says "add UX pattern tests", "detect anti-patterns", "iOS UX CI checks"
- User wants to prevent mobile UX regressions
- User is building a PWA or web app targeting iOS/mobile
Process
Phase 1: Assess Current Testing Infrastructure [DELEGATE TO AGENT]
Create the main task and infra assessment task. Spawn an Explore agent to find:
- Playwright installation status and version
- Existing E2E test files and test directory
- Mobile-specific test files and viewport configurations
- Test helper files and authentication utilities
Update infra task with findings metadata (playwright installed, version, config file, test directory, existing test count, mobile tests exist, recommendation).
Based on the infrastructure report, ask the user their goal:
- Add to existing: Add UX pattern tests to existing Playwright setup
- Create new: Set up Playwright and add UX pattern tests
- Audit only: Generate a report of current anti-patterns without creating tests
Phase 2: Understand the App [DELEGATE TO AGENT]
Create app exploration task. Spawn an Explore agent to find:
- All routes and user-facing pages
- Entry flow (auth required? first screen?)
- Key screens to test: navigation (where nav patterns matter most), forms (touch targets), lists/tables (scrolling), modals/dialogs (presentation)
- Existing selector patterns (data-testid usage)
- Primary navigation type (tab bar, sidebar, hamburger)
Update app task with findings metadata (base URL, auth requirement, pages to test, primary nav type).
Phase 3: Generate UX Pattern Tests
Create a generate task. For each anti-pattern category detected, create a pattern task (e.g., "Pattern: hamburger menu (critical)") with severity, description, and user decision status.
Generate a mobile-ux-patterns.spec.ts file testing for:
- Navigation anti-patterns: hamburger menus, FABs, breadcrumbs, nested drawers
- Touch target issues: small buttons (<44pt), targets too close together
- Component anti-patterns: native
<select>, checkboxes, Material snackbars, heavy shadows - Layout issues: horizontal overflow, missing viewport meta, no safe area insets
- Text & selection: selectable UI text, small fonts
- Interaction issues: hover-dependent UI, double-tap zoom, canvas gesture conflicts
See references/anti-pattern-catalog.md for the full detection catalog with selectors, severity levels, and reference links.
See examples/mobile-ux-patterns-test.md for the test file template and code patterns.
Update generate task metadata with pattern counts (critical, warning, info, total tests).
Phase 4: CI Integration
Mark generate task as completed. Create CI integration task.
Ensure tests run in CI by adding to existing Playwright CI workflow or creating a new standalone workflow.
See references/ci-workflow-config.md for the GitHub Actions workflow template and integration options.
Mark CI task completed with metadata (workflow file path, CI configured status).
Phase 5: Review with User
Mark all pattern tasks with user's severity decisions. Present summary from task data:
## Mobile UX CI Tests Generated
### Anti-Patterns Detected
- **Critical (will fail CI):** [count] - [list]
- **Warning (logged but passes):** [count] - [list]
- **Info (suggestions only):** [count] - [list]
### Test File
- Path: e2e/mobile-ux-patterns.spec.ts
- Tests: [count]
- Pages covered: [list from app task]
### CI Integration
- Workflow: [path or status]
- Runs on: push, pull_requestAsk user:
- Should any anti-patterns be allowed temporarily?
- Any additional patterns to check?
- Ready to add to CI?
Update pattern tasks with user's severity decisions (enforce/allow/warning_only). Mark main task completed.
Session Recovery
| TaskList State | Resume Action |
|---|---|
| No tasks | Fresh start (Phase 1) |
| Infra completed, no app task | Start Phase 2 |
| App task in_progress | Resume app exploration |
| App completed, no generate task | Start Phase 3 |
| Generate in_progress, pattern tasks exist | Continue generating tests |
| Generate completed, no CI task | Start Phase 4 |
| CI in_progress | Resume CI setup |
| Pattern tasks pending user decisions | Present severity choices |
| Main completed | Show summary |
Resuming with pending pattern decisions:
- Get all tasks with "Pattern:" prefix
- Check metadata for userDecision field
- If any patterns lack decisions, present them to user for severity choices
- Update pattern tasks with decisions, regenerate tests with updated severity levels
Always inform user when resuming: Include infrastructure status, pages explored, patterns detected (with counts), and pending decisions.
Customization Points
When generating tests, consider asking about:
- Severity levels: Which anti-patterns should fail CI vs warn?
- Exceptions: Any patterns that are intentionally kept?
- Additional patterns: App-specific anti-patterns to detect?
- Viewport sizes: Which devices to test (default: iPhone 14 at 393x852)?