AgentSkillsCN

visual-verification

在标记完成前直观验证实现的功能是否正常工作。适用于测试UI变更、验证Web功能或检查用户流程在浏览器中是否正常工作时。

SKILL.md
--- frontmatter
name: visual-verification
description: Visually verify implemented features work correctly before marking complete. Use when testing UI changes, verifying web features, or checking user flows work in the browser.

Visual Verification

Verify implemented features work correctly through actual user interaction, not just automated tests.

When to Use

  • •After implementing any UI feature
  • •Before marking an issue as complete
  • •When acceptance criteria involve user-visible behavior
  • •After fixing UI bugs

Approaches

Web Applications: See browser-verification.md for Playwright MCP workflow.

Mobile Applications: See mobile-verification.md (Coming soon)

Verification Checklist

Before marking any UI task complete:

  • • Dev server is running and accessible
  • • Feature renders without console errors
  • • Elements render correctly and do not incorrectly overlap
  • • User interactions work as expected
  • • Edge cases handled (empty states, loading, errors)
  • • Screenshot captured as evidence

What NOT to Do

  • •Skip visual verification because "tests pass"
  • •Mark issues complete without browser testing
  • •Assume dev mode catches all errors (run npm run build too)
  • •Test only happy paths