skills.rest
ElvinOuyang
ElvinOuyangCOMMUNITY
Explore all skills by this author →
GitHub

web-mobile-workflow

Generate numbered Playwright workflow markdown files from codebase exploration and mobile walkthroughs.

Updated Aug 23, 2026
Search Tags:#playwright#ui verification#qa automation#touch UX#route discovery#mobile workflow#ios-hig
One-click install
npx skills add https://github.com/ElvinOuyang/claude-skill-collection --skill web-mobile-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-mobile-workflow
Source: https://github.com/ElvinOuyang/claude-skill-collection/tree/main/plugins/web-dev-toolkit/skills/web-mobile-workflow
Command: npx skills add https://github.com/ElvinOuyang/claude-skill-collection --skill web-mobile-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes guesswork from mobile-browser testing by turning an app’s codebase plus a live mobile walkthrough into step-by-step, executable workflow documentation for Playwright.

Core Features & Use Cases

  • Deep codebase exploration: Identifies routes, navigation patterns, interactive UI components, and state/data flows without using browser automation during analysis.
  • Mobile live walkthrough (393x852): Uses Playwright in a mobile viewport to co-author workflow steps with screenshots at each transition for verification.
  • Mobile UX guardrails: Flags iOS HIG and common mobile UX anti-patterns, including touch target sizing and viewport-related rendering concerns.
  • Workflow outputs for automation: Produces numbered markdown workflow files that can feed downstream mobile converters and Playwright runners.

Quick Start

Ask the skill to generate mobile workflows for your app, then provide the app URL so it can run the 393x852 Playwright walkthrough and capture screenshots for each step.

Frequently Asked Questions about web-mobile-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate mobile QA workflows from an existing codebase?▼

To generate mobile QA workflows, combine static codebase exploration to map routes and state flows with a live Playwright walkthrough in a 393x852 mobile viewport. This produces numbered markdown workflow files for testable user journeys.

Can I use Playwright to automate mobile browser testing with screenshot verification?▼

Yes, Playwright runs a live mobile walkthrough in a 393x852 viewport to co-author workflow steps, capturing screenshots at each interactive transition for visual verification of the mobile UX.

What's the best way to document core, feature, and edge-case user journeys for mobile testing?▼

The best way is mapping route sequences and component states through codebase analysis, then executing a live mobile viewport walkthrough to generate numbered, testable markdown files for core, feature, and edge-case journeys.

Does mobile workflow generation check for iOS HIG compliance and touch UX anti-patterns?▼

Yes, mobile workflow generation applies iOS HIG guidelines and mobile anti-pattern detection, actively flagging touch target sizing issues and viewport-related rendering concerns during the interactive step co-authoring process.

What format do the generated mobile workflow outputs use for downstream automation?▼

The generated workflow outputs use numbered markdown files documenting testable user journeys. These markdown files feed directly into downstream mobile converters and Playwright runners for QA automation.

How do I recover a mobile workflow generation session if it gets interrupted?▼

Recover an interrupted mobile workflow generation session via TaskList inspection, which restores the mobile-focused route, component, and state mapping required to continue interactive step co-authoring.

Related Skills

Explore More Software Engineering Skills→
neonwattyneonwatty
23

mobile-workflow-generator

Generate mobile browser workflow documentation using Playwright and codebase analysis.

Community
Advanced
tedtv1007-ctrltedtv1007-ctrl

playwright-testing

Automate browser-based end-to-end testing with Playwright.

Community
Advanced
neonwattyneonwatty
23

mobile-browser-workflow-generator

Generate mobile browser workflow documentation for Chrome QA testing.

Community
Advanced
neonwattyneonwatty
23

mobile-browser-workflow-to-playwright

Translate mobile browser workflow markdown into Playwright E2E tests for Chromium.

Community
Advanced