Guide · Agent skill
How to use the Readable Font Sizes Check agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The font-size skill is a set of instructions that an AI agent (such as Claude) follows when you ask it to review CSS for readable text. It checks font-size declarations for text that is too small, fixed px units that ignore browser text settings, and root font size resets that block scaling. This guide shows you how to install it, how to ask for a review in plain language, and what to expect from the result.
Readable Font Sizes Checkthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the font-size skill ZIP from this page.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there.
- 4Ask for a font-size review. Ask in plain language, naming the CSS files or components to check for readable font sizes.
- 5Review the flagged declarations. Read each flagged selector, its reason, and the suggested rem replacement.
- 6Verify at 200% zoom. Apply the changes and confirm the layout still holds at 200% browser zoom.
What is an agent skill and what does font-size make the agent do?
An agent skill is a folder containing a SKILL.md file with instructions, plus optional reference files, that an AI agent loads when a request matches the skill's description. This skill is written for reviewing CSS stylesheets and components.
When the skill applies, the agent looks for CSS font-size declarations and flags body or paragraph text set below 16px (or 1rem), any font-size below 12px, and px font sizes set on html or body that override the browser default. It then suggests rem-based replacements, for example converting 14px to 0.875rem by dividing by 16, and checks that text remains readable and layouts do not break at 200% zoom. The guidance is based on WCAG 2.1 SC 1.4.4 (Resize Text) and the Front-End Checklist rule for readable font sizes.
How do you install the font-size skill?
Download the ZIP for this skill from this page and unzip it. The skill folder contains SKILL.md and references/rule.md.
For a personal install, unzip the skill into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.
In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills (upload)
How do you trigger the skill with a natural request?
You do not need a special command. The skill's description tells the agent when to use it, so ask about font sizes, mobile readability, or accessibility of text in your CSS. Point the agent at the stylesheet or component you want checked.
Good requests name the files and the goal, for example asking the agent to check the font sizes in your main stylesheet for mobile readability, or to audit a component for WCAG text resizing issues.
- "Check the font sizes in styles/main.css for mobile readability."
- "Audit this navigation component for px font sizes that block user scaling."
- "Review our CSS for text that breaks at 200% zoom."
What does a typical review look like?
The agent reports the exact selectors, declarations or breakpoints it flags, explains why each one matters, and proposes a fix. Typical fixes are converting px to rem, setting body text to at least 1rem on mobile, replacing html { font-size: 10px } with html { font-size: 62.5% } or removing the reset, and keeping captions at no less than 0.75rem.
The skill does not measure real pages. The 200% zoom check is described as a manual test in Chrome DevTools, so you should confirm the layout yourself after applying changes.
body {
font-size: 1rem; /* 16px at default browser settings */
line-height: 1.5;
}
small { font-size: 0.875rem; } /* 14px */What does the skill need, and what are the safety notes?
The skill lists no requirements. It does not run scripts and does not use the network, so it only reads the CSS and rendered UI descriptions you give it.
Because it runs no scripts, it cannot run automated browser tests or measure real pages. It is also limited to font-size rules, so it does not judge visual design.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Files: SKILL.md and references/rule.md
Tips for getting better results
Give the agent the stylesheet and the markup or component together, since selectors and rendered sizes are easier to judge with both. Ask for the rem conversion explicitly if you want ready-to-paste values.
Use the skill as one step in a review. Pair it with a manual 200% zoom check and, for formal audits, your own WCAG 2.1 AA testing.
- Include both the CSS and the HTML or component code.
- Ask for exact replacement values (for example 14px to 0.875rem).
- Re-check at 200% zoom after changes.
What people use it for
- Checking a site's main stylesheet for body text under 16px on mobile.
- Finding px font sizes on html or body that block user font size preferences.
- Auditing navigation and UI labels for text below 12px.
- Preparing a WCAG 2.1 AA review by checking text resizing in CSS.
Frequently asked questions
How do I install the font-size agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills instead.
Does the font-size skill need anything else installed?
The skill lists no requirements. It runs no scripts and uses no network access.
Is the font-size skill free?
The skill is published under the MIT licence. This page does not state pricing, so check the source repository for any licence terms beyond MIT.
What font size is the minimum for body text?
The skill's guidance is body text of at least 16px (1rem) on mobile, and no font-size below 12px. Captions and footnotes should be at least 0.75rem.
Why does the skill recommend rem instead of px?
Text sized in px ignores the browser's font size setting, while rem and em scale with the user's preference. The skill cites WCAG 2.1 SC 1.4.4, which requires text to resize up to 200%.
Can the skill test my site in a browser?
No. The skill gives guidance only and includes no scripts to measure real pages, so the 200% zoom check must be done manually, for example in Chrome DevTools.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Front-end developers and QA staff who want a focused reviewer for font-size, mobile readability and text resizing will find this skill useful. If you need visual design feedback, automated browser testing, or checks beyond font sizes, choose a different tool.
Download the skill