What problem does it solve? Users often report UI bugs through screenshots rather than precise technical descriptions, leaving developers to guess which components, styles, or states are broken. This Skill turns image-based feedback into a systematic workflow: analyze the screenshot, categorize the visual issues, locate the responsible code, fix it consistently, and verify the result. ## Core Features & Use Cases - Structured Visual Analysis: Categorizes observed problems into styling, layout, component, state, and consistency issues before touching any code. - Systematic Code Investigation: Uses Glob and Grep patterns to locate affected components, detect the styling system in use (Tailwind, CSS Modules, styled-components, design systems), and identify root causes. - Scoped Fix Planning: Offers targeted, systematic, or design-system-level fix options so "fix this everywhere" requests are handled across all instances, not just one. - Use Case: A user shares a screenshot saying "these button styles need to be fixed everywhere." The Skill identifies the inconsistency, finds every button instance across the codebase, updates them to the correct design-system variant, and produces a verification checklist covering responsive breakpoints and interaction states. ## Quick Start Share a screenshot of the UI problem with a short description, for example: this screenshot shows the settings page using text inputs where dropdowns should appear, please fix it.
