skills.rest
adamaltmejd
adamaltmejdCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

reg-webapp-design-reviewer

Capture and inspect rendered screenshots for visual and accessibility regression testing.

2|Updated Mar 20, 2026
Search Tags:#accessibility#web-development#ui-testing#design-system#visual-regression#pr-gate
One-click install
npx skills add https://github.com/adamaltmejd/registry-research-toolkit --skill reg-webapp-design-reviewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reg-webapp-design-reviewer
Source: https://github.com/adamaltmejd/registry-research-toolkit/tree/main/.agents/skills/reg-webapp-design-reviewer
Command: npx skills add https://github.com/adamaltmejd/registry-research-toolkit --skill reg-webapp-design-reviewer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of maintaining visual and accessibility consistency in the Registry Research Toolkit web application by providing a standardized, automated post-implementation review process for pull requests.

Core Features & Use Cases

  • Visual PR Gate: Ensures all UI changes meet the project's visual and accessibility contract before merging.
  • Automated Testing: Coordinates screenshot capture across multiple viewports to detect layout regressions, overflow, or styling inconsistencies.
  • Design System Enforcement: Validates component reuse and token discipline against the project's established design system.
  • Use Case: After implementing a new catalog feature, use this skill to generate a comprehensive visual report, verify responsiveness across mobile and desktop, and confirm that all UI components adhere to the project's semantic token contract.

Quick Start

Invoke the reg-webapp-design-reviewer skill to perform a full visual regression check on the current branch and generate a report for the PR merge gate.

Frequently Asked Questions about reg-webapp-design-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing for web app pull requests?▼

Automated visual regression for pull requests works by capturing and inspecting rendered screenshots across multiple viewports to detect layout regressions and styling inconsistencies before merge approval.

What does a visual PR gate check for in web application user interfaces?▼

A visual PR gate verifies rendered UI components, layout responsiveness across mobile and desktop viewports, and design system token adherence to enforce a strict visual and accessibility contract before merging.

Do I need browser automation tools to run accessibility and visual checks on my UI?▼

Yes, browser automation tools and local environment access are required to render routes, capture screenshots, and generate durable evidence for merge-gate approval during accessibility and visual testing.

How do I verify design system token adherence for UI components in a PR review?▼

Design system token adherence is verified during PR review by validating component reuse and semantic token discipline against the project's established design system contract within the automated visual check.

Can I test layout responsiveness across mobile and desktop viewports automatically?▼

Yes, you can test layout responsiveness automatically by coordinating screenshot capture across multiple mobile and desktop viewports to detect overflow, layout regressions, and styling inconsistencies.

When should I not use automated visual regression testing for my web application?▼

Automated visual regression testing is not suitable when local environment access or browser automation tools are unavailable, as these are strictly required to render routes and capture screenshots for merge-gate evidence.

Related Skills

Explore More Software Engineering Skills→
Sake-TeamSake-Team

browser-qa

Automate visual testing and UI interaction verification with browser automation tools.

Official
Advanced
pkuppenspkuppens

integration-merge

Merge approved pull requests into main and delete source branches.

Community
Intermediate
Ayushman-11Ayushman-11

ui-visual-validator

Validate UI modifications through visual regression testing and design system compliance.

Community
Advanced
VidyaBodepudiVidyaBodepudi
2

browser-testing-with-devtools

Inspect frontend UI rendering, responsiveness, and accessibility with browser DevTools.

Community
Intermediate