Initial commit

skills/testing/playwright-e2e-automation/workflow/phase-7-fixes.md

@@ -0,0 +1,72 @@
+# Phase 7: Fix Recommendation Generation
+
+**Purpose**: Map visual issues to source code and generate actionable fixes
+
+## Steps
+
+### 1. Correlate issues with source code
+
+- Use test file metadata to identify component under test
+- Search codebase for relevant files (component, styles, layout)
+- Match visual issues to likely code locations
+
+### 2. Generate fix recommendations
+
+For each issue, provide:
+- **Issue description**: Natural language explanation
+- **File location**: `src/components/Button.tsx:45`
+- **Current code**: Snippet showing problematic code
+- **Recommended fix**: Specific code change
+- **Reasoning**: Why this fix addresses the issue
+
+### 3. Prioritize fixes
+
+- Sort by severity (critical → low)
+- Group related fixes (same component, same file)
+- Estimate complexity (simple CSS tweak vs. complex refactor)
+
+### 4. Format as actionable report
+
+```markdown
+# Visual Bug Fix Recommendations
+
+## Critical Issues (2)
+
+### 1. Button text cut off on mobile viewport
+**Location**: `src/components/Button.tsx:45`
+**Screenshot**: `screenshots/current/button-mobile-1234.png`
+
+**Current Code**:
+```tsx
+<button className="px-4 py-2 text-lg">
+  {children}
+</button>
+```
+
+**Recommended Fix**:
+```tsx
+<button className="px-4 py-2 text-sm sm:text-lg truncate max-w-full">
+  {children}
+</button>
+```
+
+**Reasoning**: Fixed width and font size cause overflow on narrow viewports. Added responsive text sizing and truncation.
+```
+
+## Output
+
+fix-recommendations.md with prioritized, actionable fixes
+
+## Common Issues
+
+**Can't find source file**
+- Ask user for component location
+- Search by component name patterns
+
+**Multiple possible fixes**
+- Present options with trade-offs
+- Recommend simplest solution
+
+## Transition
+
+Proceed to Phase 8 (Test Suite Export)