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

qa-detect-typography-advanced

Detect web font, contrast, glyph, and language attribute defects on web pages.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds objective typography defects that break readability or accessibility, helping QA teams avoid false positives and focus only on issues that users can actually experience.

Core Features & Use Cases

  • Web font failure detection: Flags broken or blocked font loads so fallback typography does not go unnoticed.
  • Accessible contrast checking: Measures real WCAG contrast failures for visible text against the effective background.
  • Broken glyph detection: Identifies tofu and replacement characters that indicate missing font coverage.
  • Language attribute validation: Verifies that the page has a valid HTML language declaration for screen readers and text rendering.
  • Use case: A QA engineer auditing a marketing site can run this skill to surface only high-confidence text rendering and accessibility defects before release.

Quick Start

Ask the QA agent to scan the current page for real typography defects and report only web font failures, contrast failures, tofu glyphs, mixed-content font URLs, and missing html lang.

Frequently Asked Questions about qa-detect-typography-advanced

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

FAQPage Schema
How do I detect web font failures and tofu glyphs during browser testing?▼

Browser testing for web font failures detects broken font loads and missing glyph coverage by inspecting runtime font loading and computed styles. This identifies tofu replacement characters and fallback typography issues users actually experience.

What is the best way to check WCAG contrast ratios for responsive web layouts?▼

Checking WCAG contrast ratios for responsive layouts measures real contrast failures by evaluating visible text against effective backgrounds. It flags accessibility defects during browser-based QA audits without generating false positives.

How do I validate html language metadata for multilingual content accessibility?▼

Validating html language metadata for multilingual content verifies the page has a valid language declaration for screen readers. This ensures proper text rendering and accessibility during browser-based QA inspections.

Can I automate typography QA audits for marketing sites before release?▼

Automating typography QA audits for marketing sites scans pages to surface high-confidence text rendering and accessibility defects. It reports web font failures, contrast issues, tofu glyphs, and missing html lang attributes.

Why does fallback typography go unnoticed in standard browser testing?▼

Fallback typography goes unnoticed when browser testing lacks runtime inspection of font loading and computed styles. Detecting blocked font loads requires checking effective rendering rather than just validating CSS rules.

Does typography defect detection work with custom web fonts and mixed content URLs?▼

Typography defect detection works with custom web fonts by inspecting runtime loading and identifying mixed-content font URLs. It validates glyph rendering and flags broken loads across responsive layouts.

Related Skills

Explore More Software Engineering 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
betaTridentbetaTrident

browser-qa

Automate visual regression testing and UI interaction verification for web applications.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate