sg-visual-fix

Analyze annotated screenshots, trace issues to source code, and apply fixes.

7|2|Updated Mar 24, 2026

Search Tags:#traceability #annotation #regression-testing #visual-debugging #llm-driven #review-page

Ready to run

npx skills add https://github.com/bacoco/ShipGuard --skill sg-visual-fix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sg-visual-fix
Source: https://github.com/bacoco/ShipGuard/tree/main/plugins/shipguard/skills/sg-visual-fix
Command: npx skills add https://github.com/bacoco/ShipGuard --skill sg-visual-fix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Process human-annotated Visual screenshots from review pages to identify issues, trace them to the source code, implement fixes, and regenerate a before/after review with a comparison tab.

Core Features & Use Cases

Analyze human-annotated screenshots to locate problem regions and annotate actionable targets.
Trace issues to the corresponding component, CSS, or data mapping in the codebase.
Implement minimal, verifiable fixes and rebuild the app to generate updated before/after visual comparisons.
Regenerate the review page with a Comparison tab showing side-by-side results.

Quick Start

Process the latest fix manifest with /sg-visual-fix to apply annotated fixes and update the review page.

Frequently Asked Questions about sg-visual-fix

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

FAQPage Schema

How do I automate visual regression fixes from annotated screenshots?▼

Automating visual regression fixes involves analyzing human-annotated screenshots to locate problem regions, tracing issues to source code, applying fixes, and regenerating before/after visual comparisons. This Skill handles that end-to-end process automatically using LLM-driven analysis.

What is LLM-driven visual debugging and how does it trace UI issues to code?▼

LLM-driven visual debugging analyzes annotated screenshots to identify problem regions and traces them directly to the corresponding component, CSS, or data mapping in the codebase. It ensures traceability by linking visual defects to specific code locations for minimal, verifiable fixes.

How do I generate before/after visual comparisons for E2E testing?▼

To generate before/after visual comparisons, you apply code fixes to resolve identified issues and rebuild the application. This Skill regenerates a review page with a Comparison tab displaying side-by-side before and after captures to verify the visual regression fixes.

Can I trace annotated visual bugs directly to specific CSS or components?▼

Yes, you can trace annotated visual bugs directly to specific components, CSS, or data mappings in your codebase. This Skill processes human-annotated screenshots to locate problem regions and maps them to the exact source code responsible for the visual defect.

Do I need a fix manifest to start applying visual regression fixes?▼

Yes, you need a fix manifest to start applying visual regression fixes. This Skill processes the latest fix manifest to apply annotated fixes, implement code changes, and update the review page with side-by-side visual comparison results.