What problem does it solve? Web text often looks clipped, flattened, miswrapped, or inconsistent between Chromium and Safari even when DOM geometry checks pass. This Skill provides a structured workflow to reproduce, diagnose, repair, and verify typography rendering defects so glyph-level paint problems are not missed by geometry-only checks. ## Core Features & Use Cases - Defect reproduction and inspection: Capture focused screenshots, read computed styles, and inspect actual glyphs rather than relying on element bounding boxes. - Targeted repair patterns: Fix clipped gradient-text descenders via line-height correction, protect hyphenated tokens with nowrap spans, resolve flex mixed-inline-content spacing, and calibrate oversized hero scale. - Cross-browser verification: Test at 375, 390, 1024, and 1440 px in both Chromium and native Safari, validate real CSS viewport widths via CDP emulation, and confirm production fixes with cache-busted live screenshots. - Use Case: A deployed landing page shows flattened descenders on a gradient headline in Safari. Use this Skill to reproduce the defect, increase the line box on the gradient element, deploy with a new stylesheet cache marker, and verify the fix from live rendering evidence. ## Quick Start Use the cross-browser-typography-qa skill to diagnose why the lowercase 'g' in my gradient headline looks clipped in Safari and verify the fix on production.
