JubaKitiashvili/debug-visual
.claude/skills/debug-visual/SKILL.md
Screenshot-based visual debugging using the visual-debugger agent
$ install --global
skillsauthnpx skillsauth add JubaKitiashvili/everything-react-native-expo debug-visualInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 3:28 PM4.1s1 file scanned
SKILL.md
- name:
- debug-visual
- description:
- Screenshot-based visual debugging using the visual-debugger agent
/debug-visual — Visual Debugging
You are executing the /debug-visual command. Use the visual-debugger agent for screenshot-based UI analysis and fixing.
Arguments
/debug-visual — auto-capture screenshot from running simulator/emulator via agent-device
/debug-visual <file> — analyze a specific screenshot file
/debug-visual --compare <figma-file> — compare app screenshot with Figma export
/debug-visual --screen <ScreenName> — navigate to and capture a specific screen
Process
Step 1: Capture Screenshot
- No args: auto-capture from running simulator/emulator via agent-device
<file>provided: read the specified screenshot file directly--compare: capture live app screenshot AND read the Figma export file--screen: navigate to the named screen first, then capture
Step 2: Analyze
- Apply multimodal vision to the screenshot(s)
- Read the relevant component source files
- Identify all visual issues
- Present a numbered list — each item includes category and severity:
| Category | Examples | |----------|---------| | Layout | overflow, misalignment, wrong spacing | | Typography | wrong font, size, weight, truncation | | Color | wrong token, contrast failure, dark mode | | Spacing | padding/margin off-spec | | Responsive | breaks on small/large screen | | Figma Delta | deviation from design (--compare only) |
Severity: critical · major · minor
Step 3: Interactive Fix
- User picks issue numbers to fix
- Locate the responsible component in source
- Apply the fix (minimal change, match project style)
- Hot reload — allow ~2s for changes to reflect
- Re-capture screenshot
- Show before/after comparison
- Ask: "Does this look correct? Any remaining issues?"
Step 4: Summary
- Issues detected (count by severity)
- Fixes applied with before/after diff per issue
- Remaining issues (if any deferred by user)
- Save findings to memory for future reference
Output
## Visual Debug Report
### Screenshot
[File path or auto-captured timestamp]
### Issues Found
1. [Category · Severity] Description
2. [Category · Severity] Description
...
### Fixes Applied
**Issue 1** — [ComponentName.tsx]
Before: [brief description]
After: [brief description]
### Remaining Issues
[None | list of deferred items]
Related Skills
JubaKitiashvili/upgrade-workflow
development
VerifiedTrustedCommunity
Guided version migration for React Native and Expo SDK upgrades
31SKILL.mdUpdated Apr 16, 2026
JubaKitiashvili/tdd-workflow
development
VerifiedTrustedCommunity
Test-driven development workflow for React Native — Jest, React Native Testing Library, and Detox
31SKILL.mdUpdated Apr 16, 2026
JubaKitiashvili/security-review
development
VerifiedTrustedCommunity
Mobile security audit for React Native applications
31SKILL.mdUpdated Apr 16, 2026
JubaKitiashvili/performance-optimization
development
VerifiedTrustedCommunity
Step-by-step performance diagnosis and optimization for React Native apps
31SKILL.mdUpdated Apr 16, 2026