data-display-and-selection

Name: data-display-and-selection
Author: dembrandt

27stars5forks

How to install data-display-and-selection?

dembrandt/dembrandt-skills/data-display-and-selection

$npx -y skills add dembrandt/dembrandt-skills --skill data-display-and-selection

Installs into the current project.

Summary

Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use large hit areas (the whole row or card, not just a checkbox). Selected state is communicated through a subtle background colour shift. Mass ac

Files · 1

View on GitHub

SKILL.md

1	# Data Display and Selection
2
3	Complex data collections — products, files, users, orders, tasks — have no single correct view. Different tasks call for different views. Browsing benefits from grid; comparing details benefits from list or table; bulk management benefits from a dense table with mass actions. Give users the choice.
4
5	---
6
7	## View Modes
8
9	Offer multiple views when the data has both visual and detailed dimensions.
10
11	\| View \| Best for \| When to default \|
12	\|---\|---\|---\|
13	\| Grid \| Visual items: products, images, files, cards \| When items are visually distinct and browsing is the primary task \|
14	\| List \| Moderate detail: tasks, emails, articles \| When a key piece of text or metadata drives selection \|
15	\| Table \| Dense data: orders, reports, user management \| When multiple columns of data must be compared \|
16
17	View toggle placement: top-right of the collection, adjacent to sort/filter controls. Use icon buttons with tooltips (`grid`, `list`, `table`). Persist the user's choice in localStorage.
18
19	```
20	[Filter ▾] [Sort ▾] [⊞ Grid] [☰ List] [⊟ Table]
21	```
22
23	On mobile, collapse to the view that works best for the content — grid for visual items, list for text. Do not offer a view toggle on small screens unless both views are genuinely usable.
24
25	---
26
27	## Selection: Prefer Large Hit Areas
28
29	Checkboxes are small targets. Requiring users to hit a 16×16px checkbox to select a row is unnecessary friction — especially on touch devices.
30
31	Default: the entire row or card is the selection target.
32
33	- Click anywhere on the row → selects the row (background shifts, checkbox checks)
34	- The checkbox is a visual indicator of selection state, not the only way to select
35	- Keyboard: Space selects the focused row; Shift+click extends selection; Ctrl/Cmd+click toggles individual items
36
37	```css
38	.row {
39	cursor: pointer;
40	background: var(--color-surface);
41	transition: background 100ms ease-out;
42	}
43	.row:hover {
44	background: var(--color-grey-50);
45	}
46	.row.selected {
47	background: var(--color-primary-subtle); /* subtle brand tint */
48	}
49	```
50
51	For cards in a grid, the entire card is the selection area — not just a checkbox in the corner.
52
53	---
54
55	## Selected State Visual Language
56
57	Selected items communicate their state through a background colour shift — not just a checkbox tick.
58
59	Background: `--color-primary-subtle` — the brand primary colour heavily desaturated and lightened to ~5–8% opacity. Perceptible but not jarring.
60
61	Left border accent (optional): A 3px left border in `--color-primary` reinforces the selected state for list and table rows.
62
63	Checkbox: Checked and filled with `--color-primary`. The checkbox is a secondary signal, not the primary one.
64
65	```css
66	.row.selected {
67	background: var(--color-primary-subtle); /* e.g. hsl(224, 21%, 94%) */
68	border-left: 3px solid var(--color-primary);
69	}
70	```
71
72	Do not use a high-contrast or saturated background for selection — it competes with content and makes dense tables hard to read.
73
74	---
75
76	## Mass Actions
77
78	When one or more

People who liked this also viewed

6 picks

Type

data-display-and-selection

27stars5forks

View on GitHub

How to install data-display-and-selection?

dembrandt/dembrandt-skills/data-display-and-selection

$npx -y skills add dembrandt/dembrandt-skills --skill data-display-and-selection

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Data Display and Selection
2
3	Complex data collections — products, files, users, orders, tasks — have no single correct view. Different tasks call for different views. Browsing benefits from grid; comparing details benefits from list or table; bulk management benefits from a dense table with mass actions. Give users the choice.
4
5	---
6
7	## View Modes
8
9	Offer multiple views when the data has both visual and detailed dimensions.
10
11	\| View \| Best for \| When to default \|
12	\|---\|---\|---\|
13	\| Grid \| Visual items: products, images, files, cards \| When items are visually distinct and browsing is the primary task \|
14	\| List \| Moderate detail: tasks, emails, articles \| When a key piece of text or metadata drives selection \|
15	\| Table \| Dense data: orders, reports, user management \| When multiple columns of data must be compared \|
16
17	View toggle placement: top-right of the collection, adjacent to sort/filter controls. Use icon buttons with tooltips (`grid`, `list`, `table`). Persist the user's choice in localStorage.
18
19	```
20	[Filter ▾] [Sort ▾] [⊞ Grid] [☰ List] [⊟ Table]
21	```
22
23	On mobile, collapse to the view that works best for the content — grid for visual items, list for text. Do not offer a view toggle on small screens unless both views are genuinely usable.
24
25	---
26
27	## Selection: Prefer Large Hit Areas
28
29	Checkboxes are small targets. Requiring users to hit a 16×16px checkbox to select a row is unnecessary friction — especially on touch devices.
30
31	Default: the entire row or card is the selection target.
32
33	- Click anywhere on the row → selects the row (background shifts, checkbox checks)
34	- The checkbox is a visual indicator of selection state, not the only way to select
35	- Keyboard: Space selects the focused row; Shift+click extends selection; Ctrl/Cmd+click toggles individual items
36
37	```css
38	.row {
39	cursor: pointer;
40	background: var(--color-surface);
41	transition: background 100ms ease-out;
42	}
43	.row:hover {
44	background: var(--color-grey-50);
45	}
46	.row.selected {
47	background: var(--color-primary-subtle); /* subtle brand tint */
48	}
49	```
50
51	For cards in a grid, the entire card is the selection area — not just a checkbox in the corner.
52
53	---
54
55	## Selected State Visual Language
56
57	Selected items communicate their state through a background colour shift — not just a checkbox tick.
58
59	Background: `--color-primary-subtle` — the brand primary colour heavily desaturated and lightened to ~5–8% opacity. Perceptible but not jarring.
60
61	Left border accent (optional): A 3px left border in `--color-primary` reinforces the selected state for list and table rows.
62
63	Checkbox: Checked and filled with `--color-primary`. The checkbox is a secondary signal, not the primary one.
64
65	```css
66	.row.selected {
67	background: var(--color-primary-subtle); /* e.g. hsl(224, 21%, 94%) */
68	border-left: 3px solid var(--color-primary);
69	}
70	```
71
72	Do not use a high-contrast or saturated background for selection — it competes with content and makes dense tables hard to read.
73
74	---
75
76	## Mass Actions
77
78	When one or more

People who liked this also viewed

6 picks

Type