What problem does it solve?
This Skill helps teams catch visual design drift and implementation gaps in web pages by automatically checking typography, spacing, components, dark mode, accessibility, and responsive behavior against the DotMac Industrial Modern design system.
Core Features & Use Cases
- Playwright-based visual QA: Navigates to a target URL, captures accessibility snapshots, and collects light-mode and dark-mode screenshots for comparison.
- Design system compliance checklist: Verifies typography rules, border radius standards, domain color expectations, and component macro usage.
- Frontend quality gates: Checks console errors/warnings, validates accessibility details (e.g., aria-labels, heading hierarchy, focus rings), and ensures responsive patterns and dark-mode variants are present.
Quick Start
Run visual-qa against your page URL by passing page_url as the path you want audited, ensuring the test environment is reachable at http://localhost:8000 and any required login uses environment-provided test credentials.