skills.rest
manhthien2005
manhthien2005COMMUNITY
Explore all skills by this author →
WebsiteGitHub

responsive-qa

Verify responsive layout and interaction quality across Chrome viewports.

Updated Jun 8, 2026
Search Tags:#layout#qa#lighthouse#responsive#mobile ui#viewport testing
One-click install
npx skills add https://github.com/manhthien2005/FixNow --skill responsive-qa-manhthien2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-qa
Source: https://github.com/manhthien2005/FixNow/tree/main/.claude/skills/responsive-qa
Command: npx skills add https://github.com/manhthien2005/FixNow --skill responsive-qa-manhthien2005

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps verify that FixNow pages and components render correctly across desktop, tablet, and mobile viewports so responsive issues are found before users do.

Core Features & Use Cases

  • Cross-Viewport QA: Check layout behavior at standard Chrome breakpoints for mobile, tablet, desktop, and large desktop screens.
  • UI Stability Checks: Validate no horizontal scrolling, no overflow, correct image fitting, proper Vietnamese diacritics, and no hydration or console errors.
  • Mobile Interaction Review: Confirm touch target sizing, form usability, hamburger menu behavior, floating contact placement, and overall mobile usability.
  • Lighthouse Verification: Optionally audit mobile performance, accessibility, best practices, and SEO to catch regressions early.

Quick Start

Run a responsive QA pass on the specified FixNow page or component and report issues for mobile, tablet, and desktop viewports.

Frequently Asked Questions about responsive-qa

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

FAQPage Schema
How do I check responsive layout across mobile, tablet, and desktop viewports?▼

Responsive layout checks involve validating pages at standard Chrome breakpoints for mobile, tablet, desktop, and large screens to catch overflow, horizontal scrolling, and layout stability issues before release.

What is included in a mobile UI viewport testing checklist?▼

A mobile UI viewport testing checklist verifies touch target sizing, hamburger menu behavior, form usability, floating contact placement, and typography to ensure no horizontal scrolling and proper image fitting.

Can I run Lighthouse mobile audits to catch performance and accessibility regressions?▼

Yes, you can run Lighthouse mobile audits to verify performance, accessibility, best practices, and SEO, helping catch performance regressions and accessibility issues early during UI QA.

Does responsive QA work for checking Vietnamese diacritics and hydration errors?▼

Responsive QA checks for proper Vietnamese diacritics rendering alongside UI stability, validating that no hydration or console errors occur across desktop, tablet, and mobile Chrome viewports.

What is the best way to report responsive bugs found across different screen sizes?▼

The best way to report responsive bugs is using checklist-based reporting for accessibility and performance regressions, requiring viewport-by-viewport validation to document layout and interaction issues.

Related Skills

Explore More Software Engineering Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-viewport-units

Detect 100vh clipping and retina-blurry images in web pages.

Community
Intermediate
mortenbroesbymortenbroesby
1

browser-testing-with-devtools

Automate browser verification using live DevTools runtime evidence.

Community
Intermediate
NymfariousNymfarious
1

optimizing-mobile-experience

Optimize StickerNest for mobile touch interactions and responsive layouts.

Community
Advanced
johnlindquistjohnlindquist
16

chrome-devtools

Automate browser control and debugging via the Chrome DevTools Protocol.

Community
Advanced