skill-visual-feedback

# Visual Feedback Processing ## Overview Systematic approach to processing image-based UI/UX feedback, identifying visual issues, and implementing fixes. **Core principle:** Analyze image → Identify issues → Locate code → Fix systematically → Verify visually. --- ## When to Use **Use this skill when user provides:** - Screenshots with UI/UX problems - "[Image]" prefix with description of visual issues - Complaints about "messy UI" or "hot mess UX" - Button styling or layout issues with visual examples - "This should look like X but shows as Y" with images **Do NOT use for:** - Pure code issues without visual context - Feature requests without UI mockups - Performance or functional bugs - Backend issues --- ## The Process ### Phase 1: Visual Analysis When user provides image feedback: #### Step 1: Acknowledge and Examine ```markdown I can see the screenshot showing [describe what you observe]. Let me analyze the visual issues: **Observed Problems:** 1. [Issue 1: e.g., Button styles inconsistent] 2. [Issue 2: e.g., Layout misaligned] 3. [Issue 3: e.g., Colors don't match design system] **Expected Behavior (from description):** - [What user said it should be] **Actual Behavior (from image):** - [What the image shows] ``` #### Step 2: Categorize Issues | Issue Type | Examples | |------------|----------| | **Styling** | Colors, fonts, spacing, borders | | **Layout** | Alignment, positioning, responsive behavior | | **Component** | Wrong component used, missing c...