New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Critique Typography

by Owl-Listener in Owl-Listener/designer-skills

Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance.

MITAuto-check passedFrontend & Design

Install Critique Typography

skills CLI
$ npx skills add Owl-Listener/designer-skills --skill critique-typography -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Owl-Listener/designer-skills critique-typography --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/visual-critique/skills/critique-typography .claude/skills/critique-typography && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
critique-typography
GitHub stars
2.9k
Used in
1 other repo
Token cost
~824 tokens
SKILL.md length
438 words
Files
1
Skills in repo
107
Repo updated
First seen
Licence
MIT

At a glance

Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance.

  • Works in 3 steps: Observation — what you see (neutral,… → Problem — what is broken and why it… → Fix — a specific, actionable change…
  • Reviewing type on a screen
  • SKILL.md covers What You Do, Critique Dimensions, Output Format and Common Failure Patterns
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Critique Typography is an agent skill from Owl-Listener/designer-skills. Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance. Use when reviewing type on a screen. For defining the scale itself, use typography-scale (ui-design).

Its SKILL.md is about 820 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Typography, Plain language and style rules and UI design. The repository describes itself as: Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery. The licence is MIT.

When your agent uses it

  • Reviewing type on a screen
  • Tasks that involve Typography
  • Tasks that involve Plain language and style rules

Example prompts

  • “/critique-typography”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change (including correct token name where applicable)

What it can do on your machine

Read from SKILL.md and the folder at commit 9a6930c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Critique Typography loads about 824 tokens when it runs. Until then it costs about 57 tokens; SKILL.md has 438 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~57
When it runs · the whole SKILL.md, loaded when a task matches
~824

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Owl-Listener/designer-skills at commit 9a6930c, republished under its MIT licence (© Owl-Listener). 438 words, ~824 tokens.

Download SKILL.mdSave it as .claude/skills/critique-typography/SKILL.md (or your agent's skills folder).
name
critique-typography
description
Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance. Use when reviewing type on a screen. For defining the scale itself, use `typography-scale` (ui-design).

Critique Typography

You are an expert in typographic systems and screen-level type critique.

What You Do

You audit all typographic decisions on a screen: whether the type scale is applied correctly, whether text is readable at its context, whether type choices are consistent across the view, and whether design tokens are used in place of raw values. You flag problems and provide specific fixes.

Critique Dimensions

Scale Usage

Evaluate whether the type scale is applied as a system, not ad hoc.

  • Are only defined scale steps used (e.g., display, h1–h4, body-lg, body-sm, caption)?
  • Is each scale step used for its intended purpose — headings as headings, labels as labels?
  • Are intermediate or arbitrary sizes present that fall outside the defined scale?
  • Does the scale create sufficient contrast between hierarchy levels (recommend ≥1.25× ratio per step)?
Readability

Evaluate whether text can be read comfortably in its context.

  • Do body text sizes meet minimum thresholds (16px / 1rem on desktop; 14px on mobile minimum)?
  • Is line-height set for the content type: tighter for headings (1.1–1.3), looser for body (1.4–1.6)?
  • Is line length (measure) within 45–75 characters for body copy?
  • Is letter-spacing appropriate — not over-tracked or compressed to the point of friction?
  • Is contrast ratio between text and background WCAG AA compliant (4.5:1 body, 3:1 large text)?
Consistency

Evaluate whether type decisions are uniform across the screen.

  • Do semantically equivalent elements (e.g., all card titles, all form labels) use the same type style?
  • Are alignment choices consistent — left, centre, or right applied with intention and not mixed randomly?
  • Are font weights used consistently and not randomly varied (e.g., some labels bold, others regular)?
  • Are there orphaned styles — one-off type treatments not used elsewhere?
Show full SKILL.md (160 more words)Show less
Token Compliance

Evaluate whether typography tokens are applied instead of raw values.

  • Are font-family, font-size, font-weight, line-height, and letter-spacing set via tokens?
  • Are any hardcoded CSS or design property values present that should reference a token?
  • List every non-compliant value with its correct token name.

Output Format

For each dimension — Scale, Readability, Consistency, Token Compliance — provide:

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change (including correct token name where applicable) Rate each dimension: pass / minor issue / major issue.

Common Failure Patterns

  • Scale drift — designers nudging sizes by 1–2px instead of moving to the next defined step
  • Line-height mismatches — display sizes with body line-height and vice versa
  • Alignment mixing — centred headings above left-aligned body text without intentional justification
  • Hardcoded font-size values in components because the token was not found or not updated
  • Over-use of bold — more than two weight levels active on a single screen dilutes contrast

© Owl-Listener, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in visual-critique/skills/critique-typography of Owl-Listener/designer-skills.

Open the folder on GitHubat commit 9a6930c

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in Owl-Listener/designer-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Critique Typography next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Critique Typography compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Critique Typography this skillOwl-Listener/designer-skills2.9k1 repos~824Automated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence
Baseline UIibelick/ui-skills9.6k8 repos~855Automated safety check: PassMIT
Frontend Designanthropics/skills180k37 repos~2.3kAutomated safety check: PassApache-2.0
Design Guidepaperclipai/paperclip99k1 repos~3.1kAutomated safety check: PassMIT

Similar skills

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.6k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

  • Frontend Design

    anthropics/skills

    Official

    Pushes the agent toward distinctive visual design for new or reworked UI: a clear aesthetic direction, deliberate typography and choices rooted in the subject.

    180k GitHub starsUsed in 37 repos~2.3k tokens
    Frontend & DesignAuto-check passed

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

More from Owl-Listener/designer-skills

All 107 skills in this repo

  • A B Test Design

    Owl-Listener/designer-skills

    Design an A/B experiment — hypothesis, variants, primary metric, and sample size.

    2.9k GitHub starsUsed in 1 repo~472 tokens
    Auto-check passed

  • Accessibility Test Plan

    Owl-Listener/designer-skills

    Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol.

    2.9k GitHub starsUsed in 1 repo~478 tokens
    Auto-check passed

  • Aesthetic Usability

    Owl-Listener/designer-skills

    Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction.

    2.9k GitHub starsUsed in 1 repo~678 tokens
    Auto-check passed

  • Affinity Diagram

    Owl-Listener/designer-skills

    Cluster many qualitative data points into themes and insight statements.

    2.9k GitHub starsUsed in 1 repo~520 tokens
    Auto-check passed

  • Animation Principles

    Owl-Listener/designer-skills

    Apply animation principles — easing, staging, follow-through — to one specific UI motion.

    2.9k GitHub starsUsed in 1 repo~492 tokens
    Auto-check passed

  • Business Design

    Owl-Listener/designer-skills

    Read financials, map competitive landscapes, and argue design decisions in the language of value.

    2.9k GitHub starsUsed in 1 repo~1.1k tokens
    Auto-check passed

Categories

Questions about Critique Typography

What does Critique Typography do?

Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance. Critique Typography is an agent skill from Owl-Listener/designer-skills. Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance.

When should I use Critique Typography?

Critique Typography fits situations like: reviewing type on a screen; tasks that involve Typography; tasks that involve Plain language and style rules.

How do I install Critique Typography in Claude Code?

Run `npx skills add Owl-Listener/designer-skills --skill critique-typography -a claude-code`. Or copy the skill folder (visual-critique/skills/critique-typography in Owl-Listener/designer-skills) into .claude/skills/critique-typography in your project. Claude Code loads it when a task matches its description.

How do I install Critique Typography in Codex?

Run `npx skills add Owl-Listener/designer-skills --skill critique-typography -a codex`. Or copy the skill folder (visual-critique/skills/critique-typography in Owl-Listener/designer-skills) into .agents/skills/critique-typography in your project. Codex loads it when a task matches its description.

Can I use Critique Typography in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Owl-Listener/designer-skills --skill critique-typography -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/critique-typography, .gemini/skills/critique-typography, .github/skills/critique-typography and .opencode/skills/critique-typography in your project.

What does Critique Typography need to run?

SKILL.md names no scripts, command-line tools or credentials: Critique Typography is instructions for the agent only.

Does Critique Typography access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Critique Typography safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Critique Typography use?

Critique Typography is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Critique Typography use?

About 824 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Critique Typography?

Skills that share tags, products or a category with Critique Typography: Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars), UI UX Pro Max (saoudi-h/solar-icons, 190 stars), Baseline UI (ibelick/ui-skills, 9.6k stars) and Frontend Design (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Critique Typography?

Owl-Listener (a GitHub user) maintains it in Owl-Listener/designer-skills, which has 2,871 GitHub stars. The repository holds 107 skills in this directory. The repository was last updated on September 5, 2026.

Source: Owl-Listener/designer-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.