skills.rest
burgebj
burgebjCOMMUNITY
Explore all skills by this author →
GitHub

skill-visual-feedback

Analyze screenshot UI feedback and implement targeted frontend fixes.

Updated Jun 16, 2026
Search Tags:#ui#frontend#design system#ux#screenshot#visual feedback
One-click install
npx skills add https://github.com/burgebj/claudeoctopus --skill skill-visual-feedback-burgebj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-visual-feedback
Source: https://github.com/burgebj/claudeoctopus/tree/main/.claude/skills/skill-visual-feedback
Command: npx skills add https://github.com/burgebj/claudeoctopus --skill skill-visual-feedback-burgebj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams resolve screenshot-based UI and UX issues by turning visual feedback into a structured investigation and implementation workflow.

Core Features & Use Cases

  • Visual Issue Analysis: Identify styling, layout, component, state, and consistency problems from screenshots and user feedback.
  • Systematic UI Debugging: Trace visual problems to relevant components, styling systems, and root causes before applying fixes.
  • Use Case: When a user reports that buttons, layouts, or settings screens look wrong in screenshots, use this Skill to analyze the issue, locate the source code, implement consistent improvements, and verify the result.

Quick Start

Use the visual feedback skill to analyze the provided screenshot and fix the UI issues shown in it.

Frequently Asked Questions about skill-visual-feedback

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix broken UI layouts from a screenshot?▼

To fix broken UI layouts from a screenshot, you need systematic visual analysis to identify styling issues, trace them to relevant frontend components, and implement targeted code fixes. This approach resolves layout and consistency problems by addressing root causes rather than just symptoms.

What is the best way to debug inconsistent styling from visual feedback?▼

The best way to debug inconsistent styling from visual feedback is to systematically analyze the screenshot, investigate the design system components, and identify the root cause before applying fixes. This ensures style changes remain consistent across the interface.

Can I use a screenshot to resolve frontend component issues?▼

Yes, you can use a screenshot to resolve frontend component issues by applying a structured investigation workflow. The process involves analyzing the visual feedback, locating the source code, planning implementation, and verifying the interface changes.

Does visual UI debugging work for UX refinement requests?▼

Visual UI debugging works effectively for UX refinement requests by translating user feedback into structured code investigation. It analyzes state and consistency problems from screenshots to implement precise interface improvements and verify the results.

What are the limitations of fixing UI issues from screenshots?▼

A limitation of fixing UI issues from screenshots is that it requires clear visual feedback to accurately diagnose problems. If the screenshot lacks context or the styling issue is hidden behind specific application states, root cause identification becomes significantly harder.

Related Skills

Explore More Design & Creative Skills→
fcsonlinefcsonline
49

ui-screenshots

Coordinate before/after UI screenshot capture, annotation, and embedding for PRs.

Community
Intermediate
akourmazakourmaz

workflow-ui-build-order

Orchestrate a 9-phase UI build process from tokens to polish.

Community
Advanced
codebar-agcodebar-ag
3

design

Standardize Blade UI components and styling across Laravel views.

Official
Advanced
AlenryuichiAlenryuichi
20

visual-testing-loop

Automate the visual regression testing loop for frontend interfaces with Playwright.

Community
Advanced