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

critique-information-density — скилл для Claude Code: разбор

Скилл разбирает готовый экран по плотности информации: когнитивная нагрузка, приоритеты контента, паттерны сканирования и постепенное раскрытие. Пригодится, когда интерфейс кажется перегруженным.

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

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

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

~/.claude/skills/critique-information-density/SKILL.md

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

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

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

Всё по теме «Дизайн» →
information-architecture julianoczkowski Скилл помогает спроектировать структуру веб-приложения или сайта до отрисовки интерфейса. Он связывает дизайн-бриф с кодовой базой и формирует единую карту переходов. CX Codex +1 5 900установок information-architecture-navigation hueyexe Скилл для проектирования навигации, меню, таксономии и поиска в цифровом продукте. Пригодится, когда структура сайта или приложения перестала помогать пользователю. CX Codex +1 556установок wireframing manutej Скилл для проектирования интерфейсов: помогает пройти путь от набросков и структуры экранов до макета, близкого к финальному дизайну. CX Codex +1 566установок hallmark Nutlope Скилл для ИИ-кодинга, который заставляет сгенерированные интерфейсы выглядеть сделанными, а не сгенерированными. Пригодится, когда просишь агента собрать новую страницу или сайт. CX Codex +1 70 800установок ui-density dembrandt Помогает подобрать плотность интерфейса под мобильные экраны, планшеты и десктоп. Задаёт правила группировки данных для таблиц, дашбордов и режимов для профи. CX Codex +1 915установок mies deeflect Скилл для ИИ-кодинга, который заставляет агента убирать лишнее в интерфейсах и доводить детали до аккуратности. Пригодится, когда верстаете UI, дашборд или онбординг. CX Codex +1 9 600установок

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

navigation-patterns Помогает подобрать схемы переходов между разделами интерфейса: от таббаров до боковых панелей. Полезен при проектировании мобильных и десктопных экранов. CX Codex +1 1 800установок motion-system Задаёт единый набор длительностей, кривых и правил для анимаций в продукте. Пригодится, когда у каждого компонента свои тайминги. CX Codex +1 1 800установок design-negotiation Помогает дизайнерам защищать качество интерфейса, сроки и состав задач в спорах с менеджерами и разработчиками через факты и поиск компромиссов. CX Codex +1 1 700установок design-impact-reporting Помогает связать работу дизайна с метриками продукта и бизнеса и рассказать об этом языком стейкхолдеров. CX Codex +1 1 700установок research-repository Помогает спроектировать базу исследовательских инсайтов и систему тегов, чтобы продуктовые выводы накапливались, а не терялись в папках со звонками. CX Codex +1 1 700установок doherty-threshold Скилл задаёт пороги отклика для интерфейсов и подсказывает, какую обратную связь показать во время ожидания. CX Codex +1 1 700установок content-strategy Помогает решить, какой контент нужен продукту, где он лежит и кто за него отвечает. Пригодится, когда проблема в самом контенте, а не в вёрстке. CX Codex +1 1 700установок millers-law Разбивает интерфейс на смысловые группы примерно по четыре элемента под ограничения рабочей памяти. Пригодится при структурировании меню, шагов онбординга и длинных форм. CX Codex +1 1 700установок

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

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