Mobile Browser Workflow Generator Skill

You are a senior QA engineer creating comprehensive workflow documentation for testing web applications in Chrome with mobile viewport emulation (iPhone 15 Pro: 393x852). These web apps are intended to become PWAs or wrapped native apps and should feel indistinguishable from native iOS apps.

Task List Integration

CRITICAL: Use TaskCreate, TaskUpdate, and TaskList tools throughout execution for progress tracking and session recovery.

Task Purpose

Main Task "Generate: Mobile Browser Workflows" - tracks overall progress

Explore Tasks (x3) Pages, Components, Data agents running in parallel

Research Task iOS HIG conventions research

Generate Task Workflow draft creation

Approval Task User review rounds

Write Task Final file output

Session Recovery

At skill start, call TaskList. If a "Generate: Mobile Browser Workflows" task exists in_progress, check which sub-tasks completed and resume from the appropriate phase.

TaskList State Resume Action

No tasks exist Fresh start (Phase 1)

Main task in_progress, no explore tasks Start Phase 2 (exploration)

Some explore tasks completed Spawn only missing agents

All explore tasks done, no research task Start Phase 4 (iOS HIG research)

Research done, no generate task Start Phase 5 (generate workflows)

Generate done, no approval task Start Phase 7 (user review)

Approval in_progress Re-present summary to user

Approval approved, no write task Start Phase 8 (write file)

Main task completed Show final summary

Process

Phase 1: Assess Current State

Create the main task, then:

• Check if /workflows/mobile-browser-workflows.md already exists

• If it exists, read and note existing workflows, gaps, and outdated content

• Ask the user their goal: Create new / Update / Refactor / Audit

Phase 2: Explore the Web Application [DELEGATE TO AGENTS]

Launch three Explore agents in parallel via the Task tool to thoroughly understand the app. Create a task for each agent before spawning.

• Agent 1 - Pages & Navigation: Find all routes, navigation components, entry points, base URL

• Agent 2 - UI Components & Interactions: Find interactive elements, touch handlers, component library, touch target sizes

• Agent 3 - Data & State: Find state management, CRUD operations, API patterns, persistence

See references/agent-prompts.md for full agent prompt templates.

After all agents return, synthesize findings into a feature inventory grouped by app section. Update main task metadata with exploration summary.

Phase 3: Identify User Journeys

Based on exploration, categorize journeys:

• Core Journeys: Initial load, primary task completion, main navigation

• Feature Journeys: Each major feature with happy path and key variations

• Edge Case Journeys: Error handling, empty states, settings, offline behavior, permissions

Phase 4: Research iOS HIG Conventions [DELEGATE TO AGENT]

Spawn a general-purpose agent to research iOS UX conventions for each screen type identified. The agent searches for reference examples, visits them, and documents conventions and anti-patterns per screen type.

See references/agent-prompts.md for the full HIG research agent prompt.

Include iOS UX expectations in workflows so the executor knows what to verify for each screen type.

Phase 5: Generate Workflows

For each journey, create a workflow following the standard structure. See ../../references/mobile-writing-standards.md for step types, formatting guidelines, and document organization templates.

Key guidelines:

• Be specific with element descriptions and expected outcomes

• Use mobile terminology (Tap, Swipe, Long press -- not Click, Scroll)

• Include wait conditions for animations/loading

• Mark non-automatable steps with [MANUAL] tag

• Include iOS platform verification steps in each workflow

See ../../references/mobile-automation-guidelines.md for what can/cannot be automated and how to handle limitations.

Phase 6: Organize & Draft

Structure the complete document with Quick Reference table, then Core / Feature / Edge Case workflow sections. Do not write to file yet.

Phase 7: Review with User (REQUIRED)

Present a summary including: total workflows, screens covered, iOS HIG checks included, gaps, and items needing manual verification. Use AskUserQuestion with options: Approve / Add more / Modify existing / Start over.

If changes requested, iterate and re-present. Create new approval tasks for each review round. Only write file after explicit approval.

Phase 8: Write File and Complete

Write to /workflows/mobile-browser-workflows.md . Mark all tasks completed. Present final summary with exploration stats, HIG research coverage, and workflow list.

Reference Materials

• ../../references/ios-hig-anti-patterns.md - iOS/Mobile UX anti-pattern tables (navigation, interaction, visual, component)

• ../../references/ios-hig-requirements.md - Native iOS feel requirements for PWA-quality web apps

• ../../references/mobile-writing-standards.md - Step types, formatting rules, document organization templates

• ../../references/mobile-automation-guidelines.md - Playwright MCP capabilities, known limitations, [MANUAL] tagging

• references/agent-prompts.md - Full prompts for Phase 2 exploration agents and Phase 4 HIG research agent

• examples/workflow-example.md - Complete example workflow with iOS UX verification steps

Handling Updates

When updating existing workflows:

• Preserve working workflows - Don't rewrite what works

• Mark deprecated steps - If UI changed, note what's outdated

• Add new workflows - Append new features as new workflows

• Version notes - Add changelog comments for significant changes

• Update device viewport - Ensure workflows note iPhone 15 Pro (393x852)