Skip to content
Get packs

Readable Font Sizes Check

Audits CSS font-size rules for mobile readability, zoom and WCAG text-resizing compliance

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews CSS stylesheets and components for font-size declarations and flags text that is too small (under 16px body, under 12px anywhere), uses fixed px units that ignore browser text-size settings, or resets the root font size in ways that block user scaling. It then suggests rem-based replacements and checks that layouts still hold up at 200% zoom, following the Front-End Checklist guidance.

Great for

  • Front-end developers reviewing a site's CSS for mobile and accessibility problems
  • Designers or QA staff checking that text remains readable and resizable
  • Teams preparing for a WCAG 2.1 AA accessibility review

Skip it if

  • Non-code users who want a visual design review; it only reads CSS and rendered UI descriptions, so it cannot judge aesthetics (reason: scope is limited to font-size rules)
  • Projects needing automated browser testing; the skill gives guidance and does not run a test harness (reason: no scripts are included to measure real pages)

Try asking

  • “Audit all font-size declarations in my stylesheets for anything below 16px on mobile”
  • “Check whether my html font-size reset blocks users from scaling text”
  • “Convert the px font sizes in this component to rem units”
  • “Review my media queries for small-screen font sizes that break at 200% zoom”
Step-by-step guide: how to use Readable Font Sizes CheckInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    font-size.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip font-size.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip font-size.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at specific stylesheet files or a component folder so it can cite exact selectors and breakpoints.
  • Ask for the rem conversion explicitly (for example px divided by 16) and review the output before applying it.
  • Pair the review with a real 200% browser zoom test, since the skill only reasons about the code.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.