readable-measure — скилл для Claude Code: что делает и как установить
Задаёт оптимальную длину строки текста для экранов и брейкпоинтов. Пригодится при вёрстке статей, документации и описаний в интерфейсе.
npx skills add Owl-Listener/designer-skills --skill readable-measure -a claude-codeЧто делает readable-measure
Скилл помогает ограничить ширину колонок текста в диапазоне от 45 до 75 символов с пробелами. Слишком короткая строка сбивает ритм частыми переносами взгляда. Чересчур длинная мешает глазу вернуться к началу следующей строки. Для длинных статей и документации скилл держит планку в 50–60 или 55–70 знаков, а в качестве базового ориентира в CSS использует свойство max-width: 65ch.
Правило длины строки применяется только к основному тексту и не затрагивает заголовки или короткие надписи интерфейса. На мобильных экранах при шрифте от 16px ширина обычно укладывается в норму сама по себе, но на планшетах и десктопах контейнер нужно ограничивать принудительно. При расширении колонки скилл рекомендует немного увеличивать межстрочный интервал line-height.
Этот инструмент отвечает только за длину строк и ширину блоков. Если вашему проекту нужна полная сетка кеглей и начертаний, понадобится отдельный скилл typography-scale.
Какие задачи решает
- ограничить ширину текстовых блоков в CSS через единицу
ch - подобрать комфортную длину строки для статей и документации
- настроить читаемость колонок на планшетах и десктопах
- скорректировать межстрочный интервал при расширении текстового блока
Примеры запросов агенту
- Настрой длину строки для основного текста в блоге через CSS
- Проверь ширину колонок в документации, чтобы строка укладывалась в 65ch
- Задай max-width для абзацев интерфейса под десктопные экраны
Как установить readable-measure
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a claude-code2Вручную: положить файлы
~/.claude/skills/readable-measure/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/readable-measure/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a codex2Вручную: положить файлы
.agents/skills/readable-measure/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a cursor2Вручную: положить файлы
.cursor/skills/readable-measure/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills readable-measure2Вручную: положить файлы
.github/skills/readable-measure/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/readable-measureВручную: положить файлы
.devin/skills/readable-measure/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о readable-measure
Как установить readable-measure в Claude Code?
Выполните команду npx skills add Owl-Listener/designer-skills --skill readable-measure -a claude-code. Также файл скилла можно положить вручную в ~/.claude/skills/readable-measure/SKILL.md.
Какую длину строки задаёт скилл readable-measure?
Ориентиром служит диапазон от 45 до 75 символов в строке с учётом пробелов. В CSS скилл предлагает начинать с ограничения max-width: 65ch для блока текста.
Настраивает ли скилл размеры и жирность шрифтов?
Нет, скилл управляет исключительно длиной строки и шириной колонок. Для полной шкалы кеглей и весов шрифта автор рекомендует использовать скилл typography-scale.
Исходный текст
SKILL.md · MIT
--- name: readable-measure description: Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use `typography-scale`. --- # Readable Measure You are an expert in typographic measure and its effect on reading comfort and comprehension. ## What You Do You apply the principle of readable measure to ensure text columns are sized for comfortable, uninterrupted reading across devices and type scales. ## The Principle **Measure** is the length of a line of text. The optimal range is **45–75 characters per line** (including spaces), with 66 characters often cited as the ideal. - Below 45 characters: too short — the eye jumps lines too frequently, disrupting rhythm - Above 75 characters: too long — the eye loses its place returning to the start of the next line - 45–75 is the target zone for body copy; tighter ranges (50–60) suit sustained reading like articles or docs ## Measuring in Practice - Use the `ch` CSS unit (width of the `0` glyph) as a rough proxy: `max-width: 65ch` - Count actual characters in a representative paragraph to validate — `ch` is approximate - Adjust for typeface: wide faces (Georgia) need narrower columns; condensed faces allow slightly wider - Display type and short UI strings are exempt — this applies to body copy and reading contexts ## Responsive Behavior - Single-column mobile: full width is usually fine at 16px+ (rarely exceeds 70 chars on small screens) - Tablet and desktop: constrain column width explicitly; don't let text stretch to container edge - Multi-column layouts: each column should independently satisfy the 45–75 rule ## By Context | Context | Target | |---|---| | Long-form articles, docs | 55–70 characters | | UI body copy, descriptions | 45–65 characters | | Captions, helper text | 40–60 characters | | Pull quotes, callouts | 30–45 characters | ## Best Practices - Set `max-width` on text containers, not just font size - Increase line-height slightly as column width grows (wider measure needs more leading) - Test with real content — synthetic lorem obscures measure problems - Revisit measure whenever typeface or type size changes
© Owl-Listener · MIT · Owl-Listener/designer-skills