critique-information-density — скилл для Claude Code: разбор
Скилл разбирает готовый экран по плотности информации: когнитивная нагрузка, приоритеты контента, паттерны сканирования и постепенное раскрытие. Пригодится, когда интерфейс кажется перегруженным.
npx skills add Owl-Listener/designer-skills --skill critique-information-density -a claude-codeЧто делает critique-information-density
Скилл оценивает, сколько информации на экране, та ли это информация и разложена ли она так, как люди реально читают. Работает по четырём измерениям: когнитивная нагрузка, приоритет контента, паттерн сканирования и progressive disclosure. По каждому выдаёт наблюдение, проблему и конкретную правку, плюс оценку pass / minor issue / major issue.
Внутри — чек-листы вопросов. Проверяет, сколько решений нужно удержать в рабочей памяти для основной задачи, не конкурируют ли несвязанные блоки за внимание, не спрятана ли критичная информация в тултипах или свёрнутых секциях. Отдельно смотрит на выравнивание подписей, чисел и дат в таблицах, на разбивку текста на короткие куски. Есть список частых провалов: дашборды со всеми метриками подряд, таблицы на 10+ колонок, формы со всеми полями сразу.
Для принципа подсчёта вариантов выбора автор отсылает к другому скиллу — hicks-law из набора interaction-design. То есть этот разбирает компоновку, а не математику решений. Ставится через npx skills add, лицензия MIT.
Какие задачи решает
- понять, почему экран кажется перегруженным
- найти блоки, которые конкурируют за внимание
- вынести второстепенные данные из основного вида
- сократить таблицу до колонок, которые реально нужны
- разложить форму на шаги вместо всех полей сразу
Примеры запросов агенту
- разбери плотность этого экрана по четырём измерениям
- посмотри дашборд: что тут лишнее и что спрятать
- проверь таблицу — подписи и числа выровнены для сканирования?
Как установить critique-information-density
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-information-density -a claude-code2Вручную: положить файлы
~/.claude/skills/critique-information-density/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/critique-information-density/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-information-density -a codex2Вручную: положить файлы
.agents/skills/critique-information-density/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-information-density -a cursor2Вручную: положить файлы
.cursor/skills/critique-information-density/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills critique-information-density2Вручную: положить файлы
.github/skills/critique-information-density/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-information-density -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path visual-critique/skills/critique-information-densityВручную: положить файлы
.devin/skills/critique-information-density/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-information-density -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о critique-information-density
Как установить critique-information-density в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill critique-information-density -a claude-code. Скилл окажется в ~/.claude/skills/critique-information-density/SKILL.md.
Что делает critique-information-density?
Разбирает отрисованный экран по когнитивной нагрузке, приоритету контента, паттернам сканирования и progressive disclosure. По каждому измерению даёт наблюдение, проблему и правку с оценкой.
Чем отличается от hicks-law?
Этот скилл смотрит на компоновку и плотность экрана. За принципом подсчёта вариантов выбора автор отправляет к hicks-law из набора interaction-design.
Исходный текст
SKILL.md · MIT
--- name: critique-information-density description: Critique a rendered screen's density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure. Use when a screen feels overwhelming. For the underlying choice-count principle, use `hicks-law` (interaction-design). --- # Critique Information Density You are an expert in information architecture and cognitive load management in UI design. ## What You Do You evaluate how much information is present on a screen, whether it is the right information, and whether it is organised to match how users scan and process content. You flag density failures and propose specific fixes. ## Critique Dimensions ### Cognitive Load Evaluate whether the screen asks users to hold too much in working memory. - How many distinct decisions or pieces of information does a user need to process to complete the primary task? - Are unrelated elements competing for attention on the same screen? - Is the page trying to serve multiple user goals at once when it should be focused on one? - Are any elements present that do not serve the current user task — decoration, secondary data, metadata noise? ### Content Priority Evaluate whether the most important content is most visible. - Is the primary information a user needs to act on above the fold? - Is supporting information (context, explanation, metadata) visually subordinate to primary content? - Are there content elements with equal visual weight that do not have equal user importance? - Is any critical information buried — in tooltips, collapsed sections, or low-contrast secondary text? ### Scanning Pattern Evaluate whether the layout supports how users actually read screens. - Does the content structure match F-pattern (left-aligned lists, tables) or Z-pattern (hero + CTA layouts) based on context? - Are labels left-aligned and consistent so users can scan vertically without reading every word? - Are numbers, dates, and status values aligned and formatted consistently in lists and tables? - Does the content break into scannable chunks — short paragraphs, headers, bullets — rather than dense prose? ### Progressive Disclosure Evaluate whether complexity is revealed incrementally. - Is all available information shown at once, or is detail deferred to a detail view? - Do expandable sections, tabs, and modals earn their use — hiding genuinely secondary content, not primary actions? - Are advanced options and edge-case content separated from the primary flow? - Does the screen present a clear starting point, or is the entry path ambiguous because too much is visible at once? ## Output Format For each dimension — Cognitive Load, Content Priority, Scanning Pattern, Progressive Disclosure — provide: 1. **Observation** — what you see (neutral, factual) 2. **Problem** — what is broken and why it matters 3. **Fix** — a specific, actionable change Rate each dimension: `pass` / `minor issue` / `major issue`. ## Common Failure Patterns - Dashboard screens that show every available metric instead of the most actionable ones - Detail pages that inline all related objects instead of linking to them - Tables with 10+ columns where 3 columns do 90% of the user's work - Forms that show all fields at once when a multi-step flow would reduce perceived complexity - Content-heavy onboarding that front-loads explanation before the user has done anything
© Owl-Listener · MIT · Owl-Listener/designer-skills