skills.rest
DVNghiem
DVNghiemCOMMUNITY
Explore all skills by this author →
GitHub

responsive-review

Verify responsive behavior of UI components across mobile, tablet, and desktop viewports.

20|3|Updated Apr 30, 2026
Search Tags:#accessibility#layout#responsive#ui-testing#breakpoints#viewport
One-click install
npx skills add https://github.com/DVNghiem/FlowDeck --skill responsive-review-dvnghiem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-review
Source: https://github.com/DVNghiem/FlowDeck/tree/main/src/skills/responsive-review
Command: npx skills add https://github.com/DVNghiem/FlowDeck --skill responsive-review-dvnghiem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Responsive Review provides a structured approach to validate that UI layouts and interactions remain usable and faithful to design intent across devices, preventing regressions in responsive behavior.

Core Features & Use Cases

  • Cross-breakpoint layout validation across mobile, tablet, and desktop contexts.
  • Interaction fidelity checks for common UI patterns (menus, modals, forms) at multiple sizes.
  • Design-to-implementation alignment checks to surface parity gaps between specs and implementation.
  • Use Case: QA teams review admin dashboards to ensure readability and usability across devices before release.

Quick Start

Preview the UI across common breakpoints using the design specs to identify responsive issues and readability gaps.

Frequently Asked Questions about responsive-review

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

FAQPage Schema
How do I test responsive layout stability across mobile, tablet, and desktop breakpoints?▼

Responsive layout stability is tested by validating UI components and screens across mobile, tablet, and desktop breakpoints. This process assesses layout fidelity, interaction fidelity, and readability to prevent regressions and ensure cross-device usability.

What is the best way to verify design-to-implementation alignment for responsive UI?▼

Design-to-implementation alignment is verified by comparing implemented UI against design specs to surface parity gaps. This checks common UI patterns like menus, modals, and forms at multiple viewport sizes to ensure faithful rendering.

Can I use this approach to review admin dashboards and forms for accessibility and interaction states?▼

Yes, admin panels, dashboards, and forms are explicitly supported for responsive review. The process validates accessible interaction states and layout stability across viewports, generating structured outputs for coverage metrics and identified issues.

How does viewport-based UI testing surface readability gaps in responsive designs?▼

Viewport-based UI testing surfaces readability gaps by evaluating UI components across common breakpoints. It identifies interaction fidelity issues and readability problems, generating structured outputs for coverage metrics and specific layout issues.

What structured outputs are generated when validating cross-breakpoint layout behavior?▼

Cross-breakpoint layout validation generates structured outputs detailing coverage metrics and identified issues. These outputs map layout stability, interaction fidelity, and accessibility state failures across mobile, tablet, and desktop contexts.

Related Skills

Explore More Design & Creative Skills→
viably-labsviably-labs

visual-testing-advanced

Compare web app screenshots across browsers and viewports to detect UI regressions.

Official
Advanced
Atrium-HermesAtrium-Hermes

Skill Evals

Compare current skill outputs against stored assertions in evals.json to detect regressions.

Community
Advanced
ksciuskscius
2

responsive-testing

Capture screenshots across viewport sizes and report layout breakage.

Community
Intermediate
deichworxdeichworx

ui-ux-audit-mobile-android

Audit React Native/Expo Android apps for UI/UX, accessibility, and platform conformity.

Community
Advanced