Skills
skills/neonwatty/claude-skills/mobile-browser-workflow-orchestrator

mobile-browser-workflow-orchestrator

SKILL.md

Mobile Browser Workflow Orchestrator

Purpose

Orchestrates the complete mobile browser workflow pipeline by chaining three specialized skills:

  1. mobile-browser-workflow-generator - Generates workflows
  2. mobile-browser-workflow-executor - Executes and audits workflows
  3. mobile-browser-workflow-to-playwright - Converts to Playwright tests

This is a thin orchestration layer that manages configuration, sequencing, and approval gates. It does NOT duplicate the logic of sub-skills.

When to Use

Use this skill when the user requests:

  • "Generate and execute mobile workflows"
  • "Run mobile workflow pipeline"
  • "Mobile browser test pipeline"
  • "Test mobile experience end-to-end"
  • "Full mobile workflow automation"

Pipeline Architecture

Phase 0: Configuration Management
         ↓
Phase 1: Generate Workflows (mobile-browser-workflow-generator)
         ↓ [approval gate]
Phase 2: Execute Workflows (mobile-browser-workflow-executor)
         ↓ [approval gate]
Phase 3: Convert to Playwright (mobile-browser-workflow-to-playwright)
         ↓
Phase 4: Summary Report

Task List Integration

The orchestrator creates a hierarchical task list:

- [ ] Mobile Browser Workflow Pipeline
  - [ ] Phase 0: Configuration Management
  - [ ] Phase 1: Generate Workflows
  - [ ] Phase 2: Execute Workflows
  - [ ] Phase 3: Convert to Playwright
  - [ ] Phase 4: Summary Report

Use the Task tool to:

  • Create the main pipeline task at start
  • Mark phases complete as they finish
  • Enable session recovery (resume from incomplete phase)

Session Recovery

If the conversation is interrupted:

  1. Read task list state
  2. Identify last completed phase
  3. Ask user if they want to resume from next incomplete phase
  4. Load configuration from /workflows/mobile-config.json
  5. Continue pipeline from recovery point

Phase 0: Configuration Management

Objective

Establish or confirm the configuration for all pipeline phases.

Process

  1. Check for existing configuration

    • Look for /workflows/mobile-config.json
    • If exists: read and display to user

  2. Configuration confirmation

    • Use AskUserQuestion to confirm existing config or request changes
    • Example: "I found existing configuration:\n- URL: https://linkparty.app\n- Environment: production\n- Username: testuser@example.com\n- Device: iPhone 15 Pro\n- Execution Engine: playwright\n\nDo you want to use this configuration or update it?"

  3. Collect missing configuration If no config exists or user wants to update, ask for:

    • App URL: Local (http://localhost:3000), staging, or production URL
    • Environment: production, staging, development
    • Test credentials: Username and password for login flows
    • Device: Recommend iPhone 15 Pro (393×852) or offer alternatives
    • Execution engine: Playwright (recommended) or Claude-in-Chrome

  4. Write configuration file

    • Save to /workflows/mobile-config.json
    • Validate all required fields are present

Configuration Schema

{
  "url": "https://example.com",
  "environment": "production",
  "credentials": {
    "username": "testuser@example.com",
    "password": "testpass123"
  },
  "device": {
    "name": "iPhone 15 Pro",
    "width": 393,
    "height": 852,
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1"
  },
  "executionEngine": "playwright"
}

Device Presets

iPhone 15 Pro (recommended):

  • Width: 393, Height: 852
  • User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15

iPhone SE:

  • Width: 375, Height: 667
  • User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15

Samsung Galaxy S24:

  • Width: 360, Height: 800
  • User Agent: Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36 Chrome/120.0.0.0 Mobile

Outputs

  • /workflows/mobile-config.json created/updated
  • Configuration values confirmed with user

Phase 1: Generate Workflows

Objective

Generate mobile-optimized workflows using the mobile-browser-workflow-generator skill.

Process

Follow the mobile-browser-workflow-generator skill's complete process:

  1. Exploration (Task tool delegates this phase)

    • Navigate to config URL in mobile viewport
    • Identify 5-8 critical user journeys
    • Map mobile-specific interactions (tap, swipe, touch)

  2. Workflow Generation

    • Create structured workflows with:
      • Title, priority, type (CRUD/Authentication/Navigation)
      • Step-by-step instructions
      • Success criteria
      • Edge cases

  3. User Review & Approval

    • Present generated workflows
    • User confirms workflows are comprehensive
    • Approval gate: Ask "Ready to proceed to execution phase?"

Outputs

  • /workflows/mobile-browser-workflows.md (5-8 workflows)
  • Task: Mark "Phase 1: Generate Workflows" complete

Approval Gate

Before proceeding to Phase 2, explicitly ask:

"I've generated [N] mobile workflows. Ready to proceed to the execution phase?"

Wait for user confirmation.

Phase 2: Execute Workflows

Objective

Execute workflows, audit for issues, optionally fix problems, generate visual report.

Process

Follow the mobile-browser-workflow-executor skill's complete process:

  1. Setup

    • Load config from /workflows/mobile-config.json
    • Use configured execution engine (Playwright or Claude-in-Chrome)
    • Set mobile viewport from config

  2. Authentication (if needed)

    • Login using credentials from config
    • Verify logged-in state before workflows

  3. Workflow Execution (Task tool delegates this phase)

    • Execute each workflow from /workflows/mobile-browser-workflows.md
    • Capture screenshots at key steps
    • Record success/failure for each workflow

  4. UX Audit (Task tool delegates this phase)

    • Analyze for mobile usability issues:
      • Touch target sizes (<44×44 pixels)
      • Text readability (<16px font)
      • Horizontal scrolling
      • Input field accessibility
      • Navigation clarity

  5. Present Findings

    • Summarize execution results
    • List UX issues by severity (Critical/High/Medium/Low)
    • Ask if user wants fixes applied

  6. Optional: Fix Issues (Task tool delegates this phase)

    • If user approves, apply fixes to codebase
    • Re-test affected workflows
    • Document fixes applied

  7. Generate Report

    • Create HTML report with device frames around screenshots
    • Include workflow results, audit findings, fixes (if applied)

Outputs

  • Screenshots: /workflows/screenshots/*.png
  • HTML Report: /workflows/mobile-workflow-report.html
  • Findings: Embedded in report
  • Task: Mark "Phase 2: Execute Workflows" complete

Approval Gate

Before proceeding to Phase 3, explicitly ask:

"Execution complete. Found [N] issues ([Critical/High/Medium/Low]). Ready to convert workflows to Playwright tests?"

Wait for user confirmation.

Phase 3: Convert to Playwright

Objective

Generate CI-ready Playwright mobile tests from executed workflows.

Process

Follow the mobile-browser-workflow-to-playwright skill's complete process:

  1. Analysis (Task tool delegates this phase)

    • Read /workflows/mobile-browser-workflows.md
    • Read /workflows/mobile-config.json
    • Map workflows to Playwright test structure

  2. Test Generation

    • Generate e2e/mobile-browser-workflows.spec.ts
    • Include:
      • Mobile device configuration
      • Fixtures for authentication
      • Test suite with all workflows
      • Mobile-specific assertions
      • Screenshot capture on failure

  3. Test Configuration

    • Update playwright.config.ts with mobile project
    • Add iPhone 15 Pro device preset
    • Configure CI-compatible settings

  4. Documentation

    • Generate e2e/README.md with:
      • Setup instructions
      • How to run tests
      • CI/CD integration guide
      • Troubleshooting

Outputs

  • /e2e/mobile-browser-workflows.spec.ts
  • /playwright.config.ts (updated or created)
  • /e2e/README.md
  • Task: Mark "Phase 3: Convert to Playwright" complete

Phase 4: Summary Report

Objective

Present a comprehensive summary of the entire pipeline.

Process

  1. Read task list state

    • Verify all phases completed
    • Collect metrics from each phase

  2. Generate summary

    • Workflows Generated: Count from Phase 1
    • Workflows Executed: Success/failure count from Phase 2
    • Issues Found: Categorized by severity from Phase 2
    • Issues Fixed: Count (if fixes applied in Phase 2)
    • Tests Created: Count from Phase 3

  3. List artifacts

    • /workflows/mobile-config.json - Configuration
    • /workflows/mobile-browser-workflows.md - Workflow definitions
    • /workflows/screenshots/*.png - Execution screenshots
    • /workflows/mobile-workflow-report.html - Visual report
    • /e2e/mobile-browser-workflows.spec.ts - Playwright tests
    • /e2e/README.md - Test documentation

  4. Next steps

    • Suggest running Playwright tests: npx playwright test --project=mobile
    • Recommend CI integration
    • Offer to re-run pipeline with different configuration

Output Format

Mobile Browser Workflow Pipeline - Complete

WORKFLOWS:
  Generated: 7 workflows
  Executed: 7/7 successful

AUDIT FINDINGS:
  Critical: 0
  High: 2 (touch targets too small)
  Medium: 3 (font size issues)
  Low: 1 (color contrast)

FIXES APPLIED:
  2 issues fixed in /src/components/MobileNav.tsx

PLAYWRIGHT TESTS:
  7 tests generated in /e2e/mobile-browser-workflows.spec.ts

ARTIFACTS:
  ✓ /workflows/mobile-config.json
  ✓ /workflows/mobile-browser-workflows.md
  ✓ /workflows/screenshots/*.png (14 screenshots)
  ✓ /workflows/mobile-workflow-report.html
  ✓ /e2e/mobile-browser-workflows.spec.ts
  ✓ /e2e/README.md

NEXT STEPS:
  1. Run tests: npx playwright test --project=mobile
  2. View report: open /workflows/mobile-workflow-report.html
  3. Add to CI: See /e2e/README.md for GitHub Actions setup

Error Handling

Configuration Errors

  • Missing required fields → Re-prompt user for values
  • Invalid URL format → Validate and ask for correction
  • Unreachable URL → Warn user, offer to continue with alternative

Phase Failures

  • Phase 1 fails: Cannot access URL or generate workflows

    • Report error to user
    • Offer to retry with different URL
    • Do NOT proceed to Phase 2

  • Phase 2 fails: Workflow execution errors

    • Complete as many workflows as possible
    • Report failures in audit
    • Ask user if they want to proceed to Phase 3 despite failures

  • Phase 3 fails: Test generation errors

    • Report error to user
    • Ensure Phases 1-2 artifacts are preserved
    • Offer to retry Phase 3 only

Recovery Strategy

  1. Mark failed phase in task list
  2. Preserve all artifacts from successful phases
  3. Ask user: "Phase [N] failed. Do you want to retry this phase or stop?"
  4. Allow selective re-execution of failed phase

Key Principles

  1. Thin Orchestration: This skill does NOT duplicate sub-skill logic. It invokes them.

  2. Configuration-Driven: All phases use shared config from Phase 0.

  3. Approval Gates: User explicitly approves before each major phase.

  4. Task Delegation: Use Task tool for exploration, execution, audit, and fix phases (heavy work).

  5. Session Recovery: Pipeline can resume from any phase using task list state.

  6. Artifact Preservation: Each phase produces artifacts that subsequent phases depend on.

  7. User Control: User decides whether to proceed at each gate, whether to apply fixes, and can modify configuration.

Example Invocation

User: "Generate and execute mobile workflows for https://myapp.com"

Orchestrator:

  1. Phase 0: Asks for credentials, device preference, execution engine
  2. Writes /workflows/mobile-config.json
  3. Phase 1: Invokes mobile-browser-workflow-generator
  4. [Approval gate] "5 workflows generated. Proceed to execution?"
  5. Phase 2: Invokes mobile-browser-workflow-executor
  6. [Approval gate] "Execution complete. 3 UX issues found. Convert to Playwright?"
  7. Phase 3: Invokes mobile-browser-workflow-to-playwright
  8. Phase 4: Presents summary with all artifacts

Sub-Skill References

This orchestrator chains these skills in sequence:

  1. mobile-browser-workflow-generator

    • Located: /skills/mobile-browser-workflow-generator/SKILL.md
    • Responsibility: Workflow exploration and generation

  2. mobile-browser-workflow-executor

    • Located: /skills/mobile-browser-workflow-executor/SKILL.md
    • Responsibility: Execution, audit, fixes, reporting

  3. mobile-browser-workflow-to-playwright

    • Located: /skills/mobile-browser-workflow-to-playwright/SKILL.md
    • Responsibility: Playwright test generation

Configuration Reference

The /workflows/mobile-config.json file is the single source of truth for:

  • URL: Where to run workflows
  • Environment: production/staging/development context
  • Credentials: For login/authentication workflows
  • Device: Viewport dimensions and user agent
  • Execution Engine: playwright (recommended) or claude-in-chrome

All three sub-skills read this configuration to ensure consistency across the pipeline.

Success Criteria

Pipeline succeeds when:

  • Configuration established and validated
  • 5-8 mobile workflows generated
  • All workflows executed (with audit findings)
  • Playwright tests generated with mobile configuration
  • All artifacts created in /workflows/ and /e2e/
  • Summary report presented to user

User can then run npx playwright test --project=mobile to execute the generated tests in CI/CD.

Weekly Installs
2
Repository
neonwatty/claude-skills
GitHub Stars
1
First Seen
Feb 26, 2026
Security Audits
Gen Agent Trust HubWarn
SocketWarn
SnykFail
Installed on
opencode2
gemini-cli2
antigravity2
claude-code2
github-copilot2
codex2