Use this skill when the user provides a screenshot and wants a visual diagnosis or UI improvement plan.
Goal
Turn a screenshot into a concrete UI/debug report that identifies:
- layout structure
- component roles
- visual hierarchy
- spacing and alignment issues
- typography problems
- responsive risks
- likely root causes in code
Workflow
- Read the screenshot as a product artifact, not just an image.
- Identify the major regions, then the smaller components inside each region.
- Compare the screenshot against the intended UI state or the current code structure when available.
- Call out what looks broken, what looks weak, and what looks intentional.
- Convert visual findings into actionable fixes.
Debug Focus
- clipping, overflow, and scroll issues
- broken flex/grid alignment
- incorrect spacing tokens or padding