skills.rest
CES-Ltd
CES-LtdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

skill-visual-feedback

Analyze screenshot-based UI feedback to identify visual issues and plan fixes.

28|3|Updated May 10, 2026
Search Tags:#layout#frontend#UI#UX#style#visual analysis#UI fix
One-click install
npx skills add https://github.com/CES-Ltd/Lumi --skill skill-visual-feedback-ces-ltd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-visual-feedback
Source: https://github.com/CES-Ltd/Lumi/tree/main/resources/seed/octopus/skills/skill-visual-feedback
Command: npx skills add https://github.com/CES-Ltd/Lumi --skill skill-visual-feedback-ces-ltd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of analyzing screenshot-based UI/UX feedback, helping developers quickly identify visual inconsistencies and implement fixes.

Core Features & Use Cases

  • Visual Issue Identification: Analyze images to categorize style, layout, component, and state issues.
  • Code Investigation Guidance: Locate relevant components and styles in the codebase based on the visual feedback.
  • Systematic Fix Planning: Generate fix strategies for root causes and update code accordingly.
  • Verification Support: Provide checklists for visual and responsive verification before deployment.
  • Use Case: When screenshots show inconsistent button styles, this Skill assists in finding all instances and systematically updates them to match the design system.

Quick Start

Provide a screenshot illustrating the UI issue and ask the skill to analyze and suggest steps for fixing the visual problems.

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 visual UI issues from a frontend screenshot?▼

Visual UI issues from screenshots are fixed by categorizing style, layout, and component inconsistencies, then locating the relevant frontend code to apply systematic fixes and verify improvements before deployment.

Can I use a screenshot to locate UI components in my codebase?▼

Yes, screenshot analysis can locate UI components in your codebase by mapping visual inconsistencies directly to their corresponding frontend styles and components for targeted code investigation.

What is the best way to systematically update inconsistent button styles?▼

The best way to systematically update inconsistent button styles is to analyze a screenshot to find all instances, generate a root-cause fix strategy, and update the codebase to match the design system.

Do I need design system references to verify visual fixes?▼

Yes, design system references are needed to verify visual fixes, providing the baseline for structured visual and responsive verification checklists to ensure updated UI components match expected appearance before deployment.

Why does my frontend layout break visually when handling state changes?▼

Frontend layout breaks visually during state changes due to unhandled component state issues, requiring visual analysis of screenshot feedback to identify state inconsistencies and develop targeted fix strategies.

Related Skills

Explore More Design & Creative Skills→
adiomasadiomas

e2e-validator

Automate visual frontend verification with Playwright or Puppeteer and compare screenshots.

Community
Intermediate
wjyugutouwjyugutou

web-design-guidelines

Automate UI code review against Web Interface Guidelines for accessibility and consistency.

Community
Intermediate
lvhuanidlvhuanid

frontend-design

Transforms UI style requirements into production-ready frontend code with design tokens and accessibility.

Community
Advanced
aronpcaronpc
1

ui-ux

Identify and validate visual UI/UX inconsistencies across web applications.

Community
Intermediate