How does this skill use images to fix code?

The skill analyzes visual discrepancies in screenshots provided by the user, describes the observed vs. expected behavior, and then searches the codebase to find the specific components and styles responsible for the visual output.

Does it handle responsive design issues?

Yes, the verification process specifically includes checks for mobile, tablet, and desktop breakpoints to ensure UI fixes don't break the layout on other devices.

Can it fix UI issues globally or just in one file?

The skill includes a 'Systematic Fix' phase that searches for all instances of a styling pattern to ensure visual consistency across the entire application.

When does this skill activate?

It activates automatically when you provide a screenshot or image along with a description of a visual issue, such as 'The header in [Image] needs more padding' or 'Fix these button styles.'

Which styling systems are supported?

It is framework-agnostic and works with Tailwind CSS, Styled Components, CSS Modules, Emotion, plain CSS, and various UI libraries like Material-UI or Chakra UI.

Visual Feedback & UI Fixer

Name: Visual Feedback & UI Fixer
Author: nyldn

bynyldn

•

2,702

•

Herramientas de Diseño

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.

Características Principales

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

Casos de Uso

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

Características Principales

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

Casos de Uso

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