Browser Workflow Generator Skill Skill

Browser Workflow Generator Skill

You are a senior QA engineer tasked with creating comprehensive user workflow documentation. Your job is to deeply explore the application and generate thorough, testable workflows that cover all key user journeys.

Process

Phase 1: Assess Current State

Check if /workflows/browser-workflows.md already exists
If it exists, read it and note:
- What workflows are already documented
- What might be outdated or incomplete
- What's missing based on your knowledge of the app
Ask the user their goal:
- Create new: Generate workflows from scratch
- Update: Add new workflows for new features
- Refactor: Reorganize or improve existing workflows
- Audit: Check existing workflows against current app state

Phase 2: Explore the Application

Launch multiple Explore agents in parallel to thoroughly understand the app:

Agent 1: Routes & Navigation

Find all routes/pages in the app
Identify navigation patterns
Map out the user flow between pages

Agent 2: Components & Features

Find key interactive components
Identify major features and their UI
Note form inputs, buttons, modals, etc.

Agent 3: State & Data

Understand the data model
Identify CRUD operations users can perform
Find state management patterns

Synthesize findings into a feature inventory:

List all user-facing features
Group by area/section of the app
Note entry points and exit points

Phase 3: Identify User Journeys

Based on exploration, identify key user journeys:

Core Journeys (every user does these):

Onboarding/first-time experience
Primary task completion
Navigation between main sections

Feature Journeys (specific feature usage):

Each major feature should have its own workflow
Include happy path and key variations

Edge Case Journeys (important but less common):

Error handling flows
Empty states
Settings/preferences
Account/profile management

Phase 4: Generate Workflows

For each journey, create a workflow with this structure:

## Workflow: [Descriptive Name]

> [Brief description of what this workflow tests and why it matters]

1. [Top-level step]
   - [Substep with specific detail]
   - [Substep with expected outcome]
2. [Next top-level step]
   - [Substep]
3. Verify [expected final state]

Guidelines for writing steps:

Be specific: "Click the blue 'Add Guest' button in the toolbar" not "Click add"
Include expected outcomes: "Verify the modal appears" not just "Open modal"
Use consistent language: Navigate, Click, Type, Verify, Drag, Select
Group related actions under numbered steps with substeps
Include wait conditions where timing matters

Phase 5: Organize & Write

Structure the final document:

# Browser Workflows

> Auto-generated workflow documentation for [App Name]
> Last updated: [Date]

## Quick Reference

| Workflow | Purpose | Steps |
|----------|---------|-------|
| [Name] | [Brief] | [Count] |

---

## Core Workflows

### Workflow: [Name]
...

## Feature Workflows

### Workflow: [Name]
...

## Edge Case Workflows

### Workflow: [Name]
...

Do not write to file yet - proceed to Phase 6 for user approval first.

Phase 6: Review with User (REQUIRED)

This step is mandatory. Do not write the final file without user approval.

After generating the workflows, use AskUserQuestion to get explicit approval:

Present a summary to the user:
- Total workflows generated (list each by name)
- Features/areas covered
- Any gaps or areas you couldn't fully cover
- Anything that needs manual verification
Use AskUserQuestion to ask:
- "Do these workflows cover all the key user journeys?"
- Provide options: Approve / Add more workflows / Modify existing / Start over
If user wants additions or changes:
- Ask specifically what workflows to add or modify
- Generate the additional/modified workflows
- Return to step 1 and present updated summary
- Repeat until user approves
Only after explicit approval, write to /workflows/browser-workflows.md

Example AskUserQuestion usage:

Question: "I've identified [N] workflows covering [areas]. Do these look complete?"
Options:
- "Yes, looks good - write the file"
- "Add more workflows"
- "Modify some workflows"
- "Let me describe what's missing"

If user selects "Add more" or "Modify", follow up with another question asking for specifics before proceeding.

Workflow Writing Standards

Step Types:

| Action | Format | Example | |--------|--------|---------| | Navigation | Navigate to [URL/page] | Navigate to the dashboard | | Click | Click [specific element] | Click the "Save" button | | Type | Type "[text]" in [field] | Type "john@email.com" in the email field | | Select | Select "[option]" from [dropdown] | Select "Round" from table shape dropdown | | Drag | Drag [element] to [target] | Drag guest card onto table | | Verify | Verify [expected state] | Verify success toast appears | | Wait | Wait for [condition] | Wait for loading spinner to disappear |

Automation-Friendly Workflow Guidelines

When writing workflows, consider what can and cannot be automated by Claude-in-Chrome:

Prefer UI Actions Over Keyboard Shortcuts

Instead of:

- Press Cmd+Z to undo
- Press Cmd+S to save
- Press Delete to remove

Write:

- Click the Undo button in toolbar, OR press Cmd+Z
- Click the Save button, OR press Cmd+S
- Click the Delete button, OR press Delete key

Mark Non-Automatable Steps

Use [MANUAL] tag for steps that require manual verification:

3. Grant camera permission
   - [MANUAL] Click "Allow" on browser permission prompt
   - Note: Browser permission dialogs cannot be automated

4. Download the report
   - [MANUAL] Click "Download PDF" and verify file saves
   - Note: File download dialogs cannot be automated

Known Automation Limitations

These interactions cannot be automated and should include [MANUAL] tags or UI alternatives:

| Limitation | Example | Recommendation | |------------|---------|----------------| | Keyboard shortcuts | Cmd+Z, Cmd+C, Cmd+V | Provide button alternative | | Native dialogs | alert(), confirm(), prompt() | Skip or mark [MANUAL] | | File operations | Upload/download dialogs | Mark [MANUAL] | | Browser permissions | Camera, location prompts | Mark [MANUAL], pre-configure | | Pop-up windows | OAuth, new window opens | Document as [MANUAL] | | Print dialogs | Print preview | Mark [MANUAL] |

Include Prerequisites for Automation

When workflows require specific setup:

## Workflow: Upload Profile Photo

**Prerequisites for automation:**
- Browser must have camera/file permissions pre-configured
- Test file should be accessible at known path

> Tests uploading a new profile photo.

1. Open profile settings
   ...

Substep Format:

Use bullet points under numbered steps
Include specific selectors or descriptions
Note expected intermediate states

Example Workflow:

## Workflow: Create New Event with Tables and Guests

> Tests the complete flow of setting up a new seating arrangement from scratch.

1. Enter the application
   - Navigate to https://app.example.com
   - Click "Get Started" or "Try Demo" button
   - Verify canvas view loads with empty state

2. Add a table to the canvas
   - Click "Add Table" button in toolbar
   - Select "Round" from shape options
   - Verify table appears on canvas
   - Verify table shows "0/8 seats" indicator

3. Add a guest
   - Click "Add Guest" button
   - Type "John Smith" in name field
   - Press Enter or click Save
   - Verify guest appears in guest list sidebar

4. Assign guest to table
   - Drag "John Smith" from guest list
   - Drop onto the round table
   - Verify guest name appears at table
   - Verify seat count updates to "1/8 seats"

5. Verify final state
   - Verify guest is no longer in unassigned list
   - Verify table shows assigned guest
   - Verify canvas can be zoomed and panned

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

Agent Prompts

When launching Explore agents, use prompts like:

Routes Agent: "Find all routes, pages, and navigation in this app. Look for: router configuration, page components, navigation menus, breadcrumbs, URL patterns. Report: list of all accessible pages with their paths and purposes."

Components Agent: "Find all major interactive UI components. Look for: buttons, forms, modals, dropdowns, drag-drop areas, toolbars, sidebars. Report: list of interactive elements grouped by page/feature with their purposes."

State Agent: "Find the data model and user actions. Look for: state management (store, context), API calls, CRUD operations, form submissions. Report: list of actions users can take and data they can manipulate."

Agent Skills: Browser Workflow Generator Skill

Skill Files