skills.rest
Owl-Listener
Owl-ListenerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

critique-typography

Audit a rendered screen's typography for scale usage, readability, consistency, and token compliance.

2.5k|358|Updated Mar 7, 2026
Search Tags:#wcag#type scale#Readability#design critique#UI review#Typography#Design tokens
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: critique-typography
Source: https://github.com/Owl-Listener/designer-skills/tree/main/visual-critique/skills/critique-typography
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviewing typography on a screen is often subjective and inconsistent, letting scale drift, readability issues, and hardcoded values slip into production. This Skill gives you a structured, repeatable audit of every typographic decision on a rendered screen.

Core Features & Use Cases

  • Four-Dimension Audit: Evaluates scale usage, readability, consistency, and token compliance, each rated as pass, minor issue, or major issue.
  • Actionable Fixes: Every finding includes a neutral observation, the problem and why it matters, and a specific fix with the correct design token name.
  • Use Case: Before shipping a new settings page, run this critique to catch body text below 16px, line lengths over 75 characters, and hardcoded font-size values that should reference typography tokens.

Quick Start

Ask the AI to critique the typography of the current screen or attached screenshot, covering scale, readability, consistency, and token compliance.

Frequently Asked Questions about critique-typography

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

FAQPage Schema
How do I review typography on a UI screen?▼

Run a structured critique across four dimensions: scale usage, readability, consistency, and token compliance. Each dimension is rated pass, minor issue, or major issue, with a specific fix for every problem found.

What readability standards apply to screen typography?▼

Body text should be at least 16px on desktop and 14px on mobile, with line-height of 1.4–1.6 for body and 1.1–1.3 for headings. Line length should stay within 45–75 characters, and contrast must meet WCAG AA (4.5:1 body, 3:1 large text).

What is the difference between critiquing typography and defining a type scale?▼

This Skill audits how an existing type scale is applied on a rendered screen. To define the scale itself, use the typography-scale skill from the ui-design plugin instead.

What are common typography mistakes in UI design?▼

Common failures include scale drift from 1–2px nudges, line-height mismatches between display and body text, inconsistent alignment, hardcoded font sizes instead of tokens, and over-use of bold weights that dilutes hierarchy.

When should I not use a typography critique?▼

Do not use it to create or define a type scale from scratch, since it only audits existing screens. It also requires a rendered screen or design to inspect, so it is not suited for abstract token architecture planning.

Related Skills

Explore More Design & Creative Skills→
arvindbattulaarvindbattula

design-typography

Audit font choices, hierarchy, and readability to produce consistent typography systems.

Community
Intermediate
zacjones93zacjones93

design

Assess UI/UX design problems across screens, layouts, typography, and accessibility.

Community
Basic
dtsongdtsong
1

Visual Audit

Analyze digital interfaces for hierarchy, contrast, spacing, typography, color, and layout issues.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced