legibility
CommunityMake UI text instantly distinguishable.
Design & Creative#accessibility#contrast ratio#spacing#ui typography#character disambiguation#font sizing
AuthorHDeibler
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill fixes UX failures where users can’t quickly tell characters apart in UI text, leading to mistakes, extra effort, and accessibility issues.
Core Features & Use Cases
- Diagnose legibility problems: identifies symptoms like squinting, mistyped codes/IDs, and low contrast that prevents fast character recognition.
- Improve the five inputs to legibility: guides decisions for typeface design, size, weight, contrast, and spacing (tracking/leading).
- Differentiate legibility vs. readability: applies character clarity guidance to labels, buttons, navigation, IDs, and short phrases rather than long-form reading.
Quick Start
Ask the agent to audit a specific screen’s text and propose concrete fixes for typeface, size, weight, contrast, and spacing to meet WCAG contrast targets.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: legibility Download link: https://github.com/HDeibler/universal-design-principles/archive/main.zip#legibility Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.