skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

responsive-review

Test UI accessibility across viewports, zoom levels, and orientations.

3|Updated Mar 28, 2026
Search Tags:#accessibility#ui-testing#responsive-design#orientation#viewport#zoom
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill responsive-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-review
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills-archive/adaptive-interfaces--responsive-review
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill responsive-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validating a UI across multiple devices, sizes, and orientations to ensure accessible layouts, readable typography, and usable interactions.

Core Features & Use Cases

  • Viewport testing across common device classes (mobile, tablet, desktop) to verify content flow and element reachability.
  • Zoom and typography scaling checks to ensure text remains legible and layouts adapt gracefully.
  • Orientation and density validation to guarantee usable interfaces in portrait and landscape modes and with density adjustments.

Quick Start

Run the responsive-review workflow against your UI to generate a cross-device accessibility report.

Frequently Asked Questions about responsive-review

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

FAQPage Schema
How do I test my UI for accessibility gaps across different viewports and zoom levels?▼

To test UI accessibility across viewports and zoom levels, run the responsive-review workflow to identify layout, typography, and interaction gaps. It coordinates viewport, zoom, and density checks to produce a cross-device accessibility report.

What is cross-device accessibility testing for responsive design?▼

Cross-device accessibility testing validates a UI across mobile, tablet, and desktop viewports to ensure accessible layouts, readable typography, and usable interactions in various orientations and densities.

How do I check if my web interface remains accessible during orientation and density changes?▼

Check orientation and density changes by validating your interface in both portrait and landscape modes. The responsive-review workflow coordinates density adjustments to guarantee usable interactions and accessible layouts across these states.

Can I use this responsive review workflow for both web and mobile interfaces during a QA audit?▼

Yes, the responsive-review workflow is applicable to both web and mobile interfaces. It is designed for use during design reviews, QA testing, and accessibility audits to verify content flow and element reachability.

What is the best way to verify typography scaling and text legibility across screen sizes?▼

The best way to verify typography scaling is to run zoom and typography scaling checks. The responsive-review workflow tests these factors to ensure text remains legible and layouts adapt gracefully across multiple device classes.

Why does my UI layout break or become unusable at high zoom levels on mobile devices?▼

UI layouts break at high zoom levels when typography and density checks are not validated. The responsive-review workflow identifies these accessibility gaps by testing how gracefully layouts adapt to zoom adjustments across mobile viewports.

Related Skills

Explore More Design & Creative Skills→
CivicActionsCivicActions
2

responsive-design

Validate responsive web components against project-specific design system breakpoints.

Official
Intermediate
Ankurjain1121Ankurjain1121

UI Audit

Audit React UI components for style, accessibility, and UX issues.

Community
Advanced
LortunateLortunate
1

adapt

Apply context-aware design adaptations to multi-device interfaces.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-viewport-meta

Detect missing or misconfigured viewport meta tags in web pages.

Community
Basic