Processes screenshot-based UI/UX feedback to systematically identify and resolve visual styling and layout issues.
This skill transforms Claude into a specialized frontend engineer capable of interpreting visual evidence from screenshots to fix complex UI/UX bugs. It follows a rigorous five-phase workflow—Visual Analysis, Code Investigation, Root Cause Analysis, Implementation, and Verification—to ensure that visual discrepancies are not just patched, but resolved at the source. Whether dealing with inconsistent button styles, layout shifts, or design system deviations, this skill helps developers maintain visual integrity by mapping user-provided images directly to the underlying code implementation.
主な機能
01Deep codebase scanning to locate relevant UI components and design system tokens
02Structured verification checklist for responsive design and interactive element states
03Support for multiple styling frameworks such as Tailwind CSS, Styled Components, and CSS Modules
042,702 GitHub stars
05Root cause analysis to identify systemic issues like specificity wars or missing tokens
06Automated visual issue categorization including styling, layout, components, and states
ユースケース
01Implementing UI refinements from design mockups by comparing them against the current implementation
02Debugging complex layout misalignments and responsive behavior issues reported via screenshots
03Standardizing inconsistent UI components across an entire application based on a single reference image
