К основному содержанию
скилл CX Codex

readable-measure — скилл для Claude Code: что делает и как установить

Задаёт оптимальную длину строки текста для экранов и брейкпоинтов. Пригодится при вёрстке статей, документации и описаний в интерфейсе.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill readable-measure -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/readable-measure/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/readable-measure/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
mobile-first-design aj-geddes Скилл задаёт порядок работы над интерфейсом: сначала мобильный экран, потом планшет и десктоп. Пригодится, когда вёрстка разъезжается на телефонах. CX Codex +1 857установок ui-typography bencium Скилл задаёт правила типографики для интерфейсов и заставляет агента молча применять их при генерации HTML, CSS и React. CX Codex +1 3 900установок editorial typeui.sh Скилл задаёт правила редакционного дизайна: серифная типографика, 8pt-сетка, токены цветов и проверки доступности. Пригодится, когда верстаете лонгрид или документацию. CX Codex +1 2 700установок brutalism typeui.sh Скилл задаёт агенту правила бруталистского дизайна: бетонная эстетика, резкие макеты, функциональный минимализм. Пригодится, когда нужен интерфейс без глянца. CX Codex +1 2 400установок interface-kit JuliusBrussee Скилл задаёт агенту план работы над интерфейсом: доступность, типографика, сетка, цвет, анимация. Пригодится, когда верстаете компонент или лендинг и не хотите получить шаблонный вид. CX Codex +1 2 200установок industrial-brutalist-ui nexu-io Скилл задаёт жёсткие правила визуального стиля для дашбордов, портфолио и редакционных сайтов. Механика, плотные сетки, моноширинные шрифты и эффекты старого железа. CX Codex +1 1 700установок

Из того же набора109

design-debt-audit Разбирает накопленные несоответствия в интерфейсе по категориям и выдаёт план правок с приоритетами. Нужен, когда продукт рос годами и дизайн поехал. CX Codex +1 1 700установок von-restorff-effect Скилл учит агента выделять главное целевое действие в интерфейсе за счёт эффекта изоляции. Он пригодится, когда одна кнопка или тариф должны сразу бросаться в глаза. CX Codex +1 1 700установок hicks-law Скилл применяет закон Хика: время решения растёт с числом одновременных вариантов. Пригодится, когда на экране слишком много кнопок и пунктов. CX Codex +1 1 700установок fitts-law Скилл для ИИ-агента, который подсказывает размеры и расположение кнопок по закону Фиттса. Пригодится при вёрстке интерфейсов и мобильных экранов. CX Codex +1 1 700установок localization-design Помогает проектировать интерфейсы для разных языков, направлений письма и культурных норм до появления переводов. CX Codex +1 1 700установок law-of-common-region Скилл по гештальт-принципу общей области: подсказывает, когда объединять элементы рамкой, фоном или карточкой, а не одним отступом. CX Codex +1 1 700установок survey-design Помогает составлять нейтральные анкеты, подбирать шкалы оценок и рассчитывать выборку. Пригодится, когда нужно измерить мнения пользователей в цифрах. CX Codex +1 1 700установок law-of-proximity Применяет закон близости в интерфейсах: расстояния показывают связь элементов без рамок и подписей. Нужен при разборе структуры макета. CX Codex +1 1 800установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой