visual-verification_skill

Overview

This skill helps you visually verify implemented features work correctly in a real browser before marking tasks complete. It emphasizes manual interaction, evidence capture, and checking edge cases beyond automated tests. Use it to reduce regressions and ensure user-facing behavior matches acceptance criteria.

How this skill works

I guide you through a quick manual verification workflow: start the dev server or production build, interact with the feature in a browser, and confirm rendering, interactions, and edge states. I prompt for console error checks, layout and overlap inspections, and capture screenshots as evidence. The process complements automated tests and is lightweight enough to run on every UI change.

When to use it

• After implementing any UI feature or change
• Before marking an issue or pull request as complete
• When acceptance criteria include user-visible behavior
• After fixing UI or layout bugs
• When testing complex user flows or interactions

Best practices

• Run the app in both dev (hot-reload) and a production build to catch build-time issues
• Open the browser console and fix any errors or warnings before signing off
• Test multiple viewports and screen sizes to catch responsive issues
• Exercise edge states: empty data, slow network, error responses, and third-party failures
• Capture and store screenshots or short recordings as verification evidence

Example use cases

• Verify a new form validates, submits, and shows success/error states in the browser
• Confirm a responsive navigation menu renders and interacts correctly across screen sizes
• Check that a fixed visual bug (overlap, missing icon, broken layout) is resolved in build and dev modes
• Walk through a user flow (signup, checkout, settings) to confirm step-by-step behavior
• Validate third-party widget rendering and error handling in the UI