ui-density

Name: ui-density
Author: dembrandt

279installs5forks

How to install ui-density?

dembrandt/dembrandt-skills/ui-density

$npx -y skills add dembrandt/dembrandt-skills --skill ui-density

Installs into the current project.

Summary

UI density — how much information and how many features appear at once — should match the primary platform and user type. Desktop supports dense, feature-rich interfaces; mobile requires focused, reduced layouts. Enterprise power users tolerate higher density than occasional user

Files · 1

View on GitHub

SKILL.md

1	# UI Density
2
3	Density describes how much information and how many interactive elements appear in a given area. The right density is not a universal standard — it depends on platform, user type, and session context.
4
5	## Platform Defaults
6
7	\| Platform \| Default density \| Reason \|
8	\|---\|---\|---\|
9	\| Desktop \| Medium to high \| Large screen, precise input, often primary work surface \|
10	\| Tablet \| Medium \| Touch input, larger than phone but less than desktop \|
11	\| Mobile \| Low \| Small screen, touch targets need space, interrupted sessions \|
12
13	Never port a dense desktop layout directly to mobile. Remove, collapse, or deprioritise features rather than shrinking them.
14
15	## User Type and Density
16
17	\| User type \| Appropriate density \| Examples \|
18	\|---\|---\|---\|
19	\| Power user / enterprise \| High density acceptable \| Trading platforms, ERP, analytics, developer tools \|
20	\| Occasional / general user \| Medium — clear visual breathing room \| SaaS dashboards, project management \|
21	\| Consumer / first-time user \| Low — guided, uncluttered \| Onboarding flows, consumer apps, e-commerce \|
22
23	A trading platform operator sits in the product for 8 hours a day and has learned every pixel — high density serves them. A user visiting a settings page once a month needs clear space and obvious labels.
24
25	*Domain experts tolerate complexity — if it solves the right* problem quickly.** People who know the domain (especially in internal tools) will happily use dense, complex, feature-rich interfaces, because the complexity maps to a mental model they already hold. Two conditions make this work rather than overwhelm:
26
27	- Terminology matches their vocabulary. The labels, abbreviations, and jargon are the ones they already use. A term that's opaque to a consumer is a precise, fast signal to an expert — don't dumb it down for an audience that isn't there.
28	- The outcome stays quickly reachable. Density is fine as long as the result — the answer they came for, or the action they need — is fast to see or do, typically through an obvious primary action (see [[visual-emphasis-and-hierarchy]]). Complexity that surrounds a clear path to the outcome is power; complexity that buries the outcome is clutter.
29
30	Design a power-user mode around this: high density, expert terminology, keyboard-driven, primary action always in reach — distinct from a casual/first-time mode that guides and unclutters. The same product may offer both; match the mode to who is actually using the view.
31
32	## Density Tokens
33
34	Define spacing scale with density in mind. A compact variant reduces padding without changing structure:
35
36	```css
37	/* Default density */
38	--density-row-height: 44px;
39	--density-cell-padding: var(--space-3) var(--space-4);
40	--density-gap: var(--space-4);
41
42	/* Compact (enterprise / data-heavy) */
43	[data-density="compact"] {
44	--density-row-height: 32px;
45	--density-cell-padding: var(--space-2) var(--space-3);
46	--density-gap: var(--space-2);
47	}
48
49	/* Spacious (consumer / onboarding) */
50	[data-density="spacious"] {
51	--density-row-height: 56px;
52	--density-cell-padding: var(--space-4) var(--space-6);
53	--density-gap: var(--space-6);
54	}
55	```
56
57	## Feature Count by Platform
58
59	Not every feature belongs on every platform. For each feature ask: does a mobile user need this right now?
60
61	\| Priority \| M

People who liked this also viewed

6 picks

Type

ui-density

279installs5forks

View on GitHub

How to install ui-density?

dembrandt/dembrandt-skills/ui-density

$npx -y skills add dembrandt/dembrandt-skills --skill ui-density

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# UI Density
2
3	Density describes how much information and how many interactive elements appear in a given area. The right density is not a universal standard — it depends on platform, user type, and session context.
4
5	## Platform Defaults
6
7	\| Platform \| Default density \| Reason \|
8	\|---\|---\|---\|
9	\| Desktop \| Medium to high \| Large screen, precise input, often primary work surface \|
10	\| Tablet \| Medium \| Touch input, larger than phone but less than desktop \|
11	\| Mobile \| Low \| Small screen, touch targets need space, interrupted sessions \|
12
13	Never port a dense desktop layout directly to mobile. Remove, collapse, or deprioritise features rather than shrinking them.
14
15	## User Type and Density
16
17	\| User type \| Appropriate density \| Examples \|
18	\|---\|---\|---\|
19	\| Power user / enterprise \| High density acceptable \| Trading platforms, ERP, analytics, developer tools \|
20	\| Occasional / general user \| Medium — clear visual breathing room \| SaaS dashboards, project management \|
21	\| Consumer / first-time user \| Low — guided, uncluttered \| Onboarding flows, consumer apps, e-commerce \|
22
23	A trading platform operator sits in the product for 8 hours a day and has learned every pixel — high density serves them. A user visiting a settings page once a month needs clear space and obvious labels.
24
25	*Domain experts tolerate complexity — if it solves the right* problem quickly.** People who know the domain (especially in internal tools) will happily use dense, complex, feature-rich interfaces, because the complexity maps to a mental model they already hold. Two conditions make this work rather than overwhelm:
26
27	- Terminology matches their vocabulary. The labels, abbreviations, and jargon are the ones they already use. A term that's opaque to a consumer is a precise, fast signal to an expert — don't dumb it down for an audience that isn't there.
28	- The outcome stays quickly reachable. Density is fine as long as the result — the answer they came for, or the action they need — is fast to see or do, typically through an obvious primary action (see [[visual-emphasis-and-hierarchy]]). Complexity that surrounds a clear path to the outcome is power; complexity that buries the outcome is clutter.
29
30	Design a power-user mode around this: high density, expert terminology, keyboard-driven, primary action always in reach — distinct from a casual/first-time mode that guides and unclutters. The same product may offer both; match the mode to who is actually using the view.
31
32	## Density Tokens
33
34	Define spacing scale with density in mind. A compact variant reduces padding without changing structure:
35
36	```css
37	/* Default density */
38	--density-row-height: 44px;
39	--density-cell-padding: var(--space-3) var(--space-4);
40	--density-gap: var(--space-4);
41
42	/* Compact (enterprise / data-heavy) */
43	[data-density="compact"] {
44	--density-row-height: 32px;
45	--density-cell-padding: var(--space-2) var(--space-3);
46	--density-gap: var(--space-2);
47	}
48
49	/* Spacious (consumer / onboarding) */
50	[data-density="spacious"] {
51	--density-row-height: 56px;
52	--density-cell-padding: var(--space-4) var(--space-6);
53	--density-gap: var(--space-6);
54	}
55	```
56
57	## Feature Count by Platform
58
59	Not every feature belongs on every platform. For each feature ask: does a mobile user need this right now?
60
61	\| Priority \| M

People who liked this also viewed

6 picks

Type