source-command-e2e-audit

Use this skill when the user asks to run the migrated source command e2e-audit.

Command Template

E2E Audit: Browser-Based Product Validation

Open a browser, walk through the product, find business logic and UX issues.

This is NOT about code correctness — code can be "correct" but business logic can be WRONG.

Why E2E Audit?

Static code analysis can't catch:

User selects "Hong Kong" but sees China's "Five Insurances and Three Funds"
Calendar showing Monday as week start for US users
Currency conversion using stale rates
Tax calculations wrong for specific regions
Permissions that make no business sense
Data inconsistency across related features

Process

1. Launch Browser

mcp__playwright__browser_navigate - Go to product URL
mcp__playwright__browser_snapshot - Get current page state

2. Walk Through User Journeys

Authentication:

Signup flow (all fields, validations, error messages)
Login flow (remember me, forgot password)
Logout and session handling

Core Features:

Primary user workflow end-to-end
Secondary features
Settings and configuration
Profile management

Edge Cases:

Empty states
Error states
Boundary values (min/max)
Invalid inputs

Public-Facing Pages:

Landing/home page — value prop clear? CTA works?
Pricing page — accurate? Links work?
Docs/help — accessible? Search works?
Social sharing — OG previews correct? Links work?

3. Test Business Logic

Region/Locale Consistency:

Change user region → verify ALL related data updates
Currency, date format, language, legal requirements
Region-specific features show/hide correctly

Data Consistency:

Related fields stay in sync
Calculations produce business-correct results
Aggregates match detail records

Business Rules:

Permissions enforced correctly
Workflow states valid
Business constraints respected

4. Document Issues

For each issue found:

mcp__playwright__browser_take_screenshot  # Capture evidence

Issue Categories

Business Logic Errors

Data doesn't match business expectations
Rules applied incorrectly for context
Cross-feature data inconsistency

UX Issues

Confusing user flows
Missing feedback
Unclear error messages
Accessibility problems

Visual Issues

Layout broken
Responsive issues
Inconsistent styling

Modern UI Patterns (Test for)

Can you edit inline or must open modal/page?
Can you drag & drop to reorder?
Is there undo after destructive actions?
Does it auto-save or require manual save?
Do keyboard shortcuts work (⌘K, ⌘S, etc.)?
Are loading states smooth (skeleton) or jarring (spinner)?
Are transitions animated or instant jumps?
Do inputs have search/autocomplete where useful?

Browser Tools Reference

mcp__playwright__browser_navigate    - Go to URL
mcp__playwright__browser_snapshot    - Get page state (use this frequently)
mcp__playwright__browser_click       - Click elements
mcp__playwright__browser_fill_form   - Fill forms
mcp__playwright__browser_type        - Type text
mcp__playwright__browser_select_option - Select dropdown
mcp__playwright__browser_take_screenshot - Capture evidence
mcp__playwright__browser_press_key   - Keyboard input

Output

Issues Found

#	Type	Description	Severity	Screenshot
1	Business Logic	HK user sees CN insurance	High	screenshot_1.png
2	UX	No loading state on submit	Medium	screenshot_2.png

Open GitHub Issues

gh issue create --title "[E2E] Brief description" --body "..." --label "e2e-audit"

Mindset

Code-correct ≠ Business-correct — always verify business logic
Think like a real user, not a developer
Test the unhappy paths
Question every assumption
If something feels wrong, it probably is