skills.rest
krzemienski
krzemienskiCOMMUNITY
Explore all skills by this author →
Website𝕏@nkrzemienskiGitHub

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

2|Updated Apr 8, 2026
Search Tags:#layout#validation#playwright#responsive#touch-targets#viewport#cross-breakpoint
One-click install
npx skills add https://github.com/krzemienski/validationforge --skill responsive-validation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-validation
Source: https://github.com/krzemienski/validationforge/tree/main/skill-audit-workspace/responsive-validation/skill-snapshot
Command: npx skills add https://github.com/krzemienski/validationforge --skill responsive-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Systematic validation of responsive UI across a device viewport matrix to catch layout, typography, and interaction issues before release.

Core Features & Use Cases

  • Visual validation across a matrix of viewports (375px–1920px) to ensure consistent layouts
  • Layout and overflow checks across mobile, tablet, and desktop breakpoints
  • Content parity verification and orientation handling to maintain feature visibility across sizes
  • Use Case: after a responsive redesign or mobile launch, QA teams verify user experience consistency across devices

Quick Start

Run the responsive validation workflow against your target web app to verify layout, touch targets, typography, and content parity across all breakpoints.

Frequently Asked Questions about responsive-validation

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

FAQPage Schema
How do I validate responsive layouts across multiple device viewports?▼

Responsive validation assesses layout behavior, touch targets, typography, and content parity across a viewport matrix spanning 375px to 1920px. It runs automated checks per breakpoint and generates evidence with a final verdict.

What is the best way to test cross-breakpoint layout behavior after a CSS refactor?▼

The best way to test cross-breakpoint behavior is using a phased validation workflow that checks layout, overflow, and orientation handling across mobile, tablet, and desktop breakpoints. This approach systematically catches layout issues introduced during CSS refactors.

Can I verify content parity and touch targets using Playwright for a mobile launch?▼

Yes, you can verify content parity and touch targets for a mobile launch. The validation workflow assesses feature visibility and interaction target sizing across mobile, tablet, and desktop viewports to maintain user experience consistency.

Does this responsive validation workflow handle orientation testing and overflow checks?▼

Yes, this responsive validation workflow explicitly handles orientation testing and overflow checks. It systematically verifies layout behavior and content visibility across different device orientations and breakpoints to catch layout issues before release.

When do I need automated viewport checks for web apps undergoing a responsive redesign?▼

You need automated viewport checks for responsive redesigns to systematically verify UI consistency across an 8-viewport matrix. This process catches layout, typography, and interaction issues before release, ensuring feature visibility across all device sizes.

Related Skills

Explore More Software Engineering Skills→
yoshisadayoshisada

kiln-qa-setup

Install Playwright and scaffold QA infrastructure with a generated test matrix.

Community
Intermediate
vTRKAvTRKA

finishing-a-development-branch

Verify git worktree state and generate a parseable branchCloseoutReport with docs and release decisions.

Community
Advanced
emiljuchnikowskiemiljuchnikowski

browser-capture

Capture browser screenshots at desktop, tablet, and mobile viewports with Playwright.

Community
Intermediate
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate