skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-typography-responsive

Detect responsive typography and legibility defects across mobile, tablet, and desktop viewports.

Updated May 22, 2026
Search Tags:#typography#accessibility#responsive design#viewport#legibility#text rendering
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-typography-responsive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-typography-responsive
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-typography-responsive
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-typography-responsive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds responsive typography and legibility gaps that can make text hard to read across mobile, tablet, and desktop layouts, especially when styles do not adapt well to viewport changes or user font settings.

Core Features & Use Cases

  • Viewport readability checks: Detects body text that is too small on mobile and tablet screens.
  • Typography quality heuristics: Flags justified text without hyphenation, overly fixed pixel-based sizing, missing fluid scaling, and absent tabular numerals in numeric tables.
  • Legibility risk detection: Identifies cases where text sits over background imagery without a scrim or shadow, which can reduce contrast and readability.
  • Use case: Use this Skill to review a marketing page, dashboard, or content-heavy article before release and catch typography patterns that harm readability or accessibility.

Quick Start

Ask the agent to inspect the current page for responsive typography and legibility issues and report any viewport-sensitive text problems it finds.

Frequently Asked Questions about qa-detect-typography-responsive

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

FAQPage Schema
How do I check my web page for responsive typography and legibility issues across different viewports?▼

Responsive typography detection flags viewport-sensitive readability issues like overly fixed pixel sizing, missing fluid scaling, and body text that is too small on mobile and tablet screens.

What causes text legibility problems on mobile screens?▼

Text legibility problems on mobile screens are often caused by body text that is too small, justified text without hyphenation, or text sitting over background imagery without a scrim or shadow to ensure contrast.

How do I detect missing fluid scaling and fixed pixel-based text sizing in my layout?▼

Detect missing fluid scaling and fixed pixel-based sizing by running typography quality heuristics that inspect computed styles and identify text patterns that do not adapt well to viewport changes or user font settings.

Can I review a dashboard for tabular numerals and numeric presentation defects before release?▼

Yes, you can review dashboards and numeric tables for missing tabular numerals and numeric presentation defects by inspecting rendered content to catch viewport-sensitive text problems before release.

Does this responsive typography checker require browser-based inspection to work?▼

Yes, responsive typography checking requires browser-based inspection of computed styles and rendered content to accurately target and flag viewport-sensitive readability issues across different screen sizes.

Related Skills

Explore More Design & Creative Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-images

Detect missing alt text, broken images, and visual distortion in rendered images.

Community
Intermediate
wensiawensia
2

template-lint

Lint HTML/SVG poster templates with an 8-check workflow and generate remediation reports.

Community
Advanced
lsst-sqrelsst-sqre
2

wcag-contrast-checker

Compute WCAG contrast ratios and AA/AAA compliance for CSS colors.

Official
Intermediate
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced