doncheli-visual-test

The doncheli-visual-test skill is a specialized engineering utility designed for developers and QA engineers who require rigorous UI verification within the Don Cheli SDD framework. It serves as a quality gate for frontend interfaces, ensuring that visual elements remain consistent across deployment cycles. By capturing snapshots of current UI states and comparing them against verified baselines, the tool automatically detects pixel-level deviations that manual testing often misses. This agent is particularly effective in identifying issues such as layout shifts, font rendering anomalies, color theme mismatches, and broken element positioning, which are common when working with complex component-based architectures like React or Vue.

• Automatically detects and configures testing tools including Playwright, Cypress, Percy, Chromatic, and Storybook.

• Generates comprehensive visual diff reports that quantify changes by percentage and severity (Blocker, Warning, Info).

• Features a secure baseline approval workflow requiring explicit human confirmation before new snapshots are accepted into the repository.

• Performs localized pixel-level analysis to distinguish between significant regressions and minor anti-aliasing artifacts.

• Integrates directly with the Don Cheli runtime to save status reports into the .dc/visual-test-report directory for CI/CD audit trails.

• Trigger this skill by using natural language commands mentioning 'visual test', 'screenshot', 'UI regression', 'pixel diff', or 'visual snapshot'.

• The system requires baseline images to be present in the storage directory; if missing, it will generate them upon first successful run.

• Always review the generated markdown report in .dc/ directory to confirm that reported layout shifts or color changes are intentional updates before manual approval.

• The agent classifies errors based on a predefined threshold system: >5% diff is treated as a blocker, while minor variances are logged as info, allowing teams to prioritize actual regressions over noise.

• The tool is designed to prevent auto-approval of new designs; maintain consistency by ensuring your team reviews these changes as part of the SDD review phase.