メニュー
Analyze and improve UI density using Matt Ström's 4-dimensional framework. Use when interfaces feel too sparse, too cluttered, or when users complain about efficiency.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/rohunvora/my-claude-skills --skill ui-densityコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Generate minimal HTML pages to review Claude Code output in a browser. Use when terminal output is hard to read, when reviewing lists/tables/drafts, or when user says "show me", "make this reviewable", "quick view", or "open as webpage". Produces unstyled semantic HTML only.
Master LLM-as-a-Judge evaluation techniques including direct scoring, pairwise comparison, rubric generation, and bias mitigation. Use when building evaluation systems, comparing model outputs, or establishing quality standards for AI-generated content.
Build a design system from scratch using the Design Graph methodology. Use when starting a component library, creating design tokens, establishing typography scales, or structuring a theme. Based on Brent Jackson's (jxnblk) constraint-based systems.
| name | ui-density |
| description | Analyze and improve UI density using Matt Ström's 4-dimensional framework. Use when interfaces feel too sparse, too cluttered, or when users complain about efficiency. |
Core formula: Value Density = User Value ÷ (Time + Space)
Density is NOT about visual crowding. Sparse can be low-value. Dense can be high-value. Google's 2001 homepage beat Yahoo's portal because value density > visual density.
What users perceive. Unreliable—same elements arranged differently feel different.
Determine whether the perception is a real problem or a grouping problem.
Tufte's data-ink ratio applied to UI.
Point to every element. Verify it communicates something the user needs RIGHT NOW.
How many explicit design decisions (borders, labels, colors) vs implicit ones (Gestalt doing the work).
Check whether proximity/similarity can replace borders. Check whether convention can replace labels.
Value delivered per unit of time.
| Delay | Strategy |
|---|---|
| <100ms | No animation (adds perceived latency) |
| 100ms–1s | Transition to bridge the gap |
| 1–10s | Spinner |
| 10s–1min | Progress bar |
| >1min | Background task + notification |
Identify where users wait. Determine whether partial results can show earlier.
Low visual density, LOW value density:
Landing page with giant hero image, one headline, scroll to see anything useful.
Problem: Whitespace isn't communicating. User scrolls to find value.
Fix: Put key info above fold. Space should separate, not hide.
High visual density, HIGH value density:
Bloomberg Terminal: Every pixel shows tradeable information.
Why it works: Users need all of it. Instant load. No decoration.
High visual density, LOW value density:
Dashboard showing 20 metrics when user only acts on 3.
Problem: Cognitive load without proportional value.
Fix: Show the 3 actionable metrics prominently. Hide rest behind "more."
Identify the primary failing dimension first. Then address secondary issues.
1. Identify which dimension is the main problem:
- Visual (perception mismatch)
- Information (wrong content)
- Design (inefficient decisions)
- Temporal (too slow)
2. Determine the specific failure.
3. Define the fix.
UI DENSITY ANALYSIS
PRIMARY ISSUE: [dimension]
[One sentence describing the specific failure]
VISUAL: [cluttered/balanced/sparse] — [matches reality? if no, why]
INFORMATION: [missing: X] [excess: Y]
DESIGN: [Gestalt opportunities if any]
TEMPORAL: [wait points and feedback gaps]
VALUE DENSITY: [low/medium/high]
FIX: [specific recommendation]
UI Density — Matt Ström