visual-ui-test
CommunityVisual UI QA with Playwright screenshots
Authorbiztechprogramming
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Visually verify UI/CSS/layout changes using Playwright screenshots. Use when making any frontend change that affects layout, styling, scrolling, overflow, or visual appearance. Triggers on UI fixes, CSS changes, component layout work, "verify the UI", "take a screenshot", "check how it looks". Required before committing any visual change.
Core Features & Use Cases
- Take screenshots of the Bond frontend to verify UI/CSS/layout changes work correctly.
- Workflow includes starting the dev environment, capturing before/after screenshots, and optionally comparing diffs to validate changes.
- Use case: verify responsive layouts and visual regressions in frontend after changes.
Quick Start
Start the visual UI test by running scripts/start-dev-env.sh and then capture before/after screenshots to compare changes.
Dependency Matrix
Required Modules
playwrightPillow
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: visual-ui-test Download link: https://github.com/biztechprogramming/bond/archive/main.zip#visual-ui-test Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.