Bug Diagnosis Report
Auto-locate frontend bugs and generate visual diagnosis reports with annotated screenshots
Task
I'm a front-end developer. Users reported a bug when accessing my login page (login_en.html) on mobile devices. Please identify and fix the bug, then generate a bug report (bug_report.md) with before/after screenshots highlighting the issue.
Results
Left: The original login page showing mobile responsive issues — form elements overflow the viewport, buttons are misaligned, and text is clipped on smaller screens. Right: The fixed version with properly responsive layout — all elements fit within the viewport, buttons are correctly positioned, and the form adapts to mobile screen sizes.
The auto-generated bug diagnosis report in Markdown format. It includes: (1) Bug summary with severity level, (2) Root cause analysis pinpointing the CSS issues causing the mobile layout problems, (3) Annotated screenshots with red highlights marking the exact problematic areas, (4) Code diff showing the specific CSS fixes applied, and (5) Testing verification confirming the fix works across different device sizes.
Skill Workflow (DAG)
Skills automatically selected and orchestrated by AgentSkillOS