{"id":"df12c3c9-83dc-447e-a196-d41f803e7213","shortId":"FMCjzz","kind":"skill","title":"data-display-and-selection","tagline":"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","description":"# Data Display and Selection\n\nComplex 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.\n\n---\n\n## View Modes\n\nOffer multiple views when the data has both visual and detailed dimensions.\n\n| View | Best for | When to default |\n|---|---|---|\n| **Grid** | Visual items: products, images, files, cards | When items are visually distinct and browsing is the primary task |\n| **List** | Moderate detail: tasks, emails, articles | When a key piece of text or metadata drives selection |\n| **Table** | Dense data: orders, reports, user management | When multiple columns of data must be compared |\n\n**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.\n\n```\n[Filter ▾]  [Sort ▾]          [⊞ Grid]  [☰ List]  [⊟ Table]\n```\n\nOn 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.\n\n---\n\n## Selection: Prefer Large Hit Areas\n\nCheckboxes are small targets. Requiring users to hit a 16×16px checkbox to select a row is unnecessary friction — especially on touch devices.\n\n**Default: the entire row or card is the selection target.**\n\n- Click anywhere on the row → selects the row (background shifts, checkbox checks)\n- The checkbox is a visual indicator of selection state, not the only way to select\n- Keyboard: Space selects the focused row; Shift+click extends selection; Ctrl/Cmd+click toggles individual items\n\n```css\n.row {\n  cursor: pointer;\n  background: var(--color-surface);\n  transition: background 100ms ease-out;\n}\n.row:hover {\n  background: var(--color-grey-50);\n}\n.row.selected {\n  background: var(--color-primary-subtle); /* subtle brand tint */\n}\n```\n\nFor cards in a grid, the entire card is the selection area — not just a checkbox in the corner.\n\n---\n\n## Selected State Visual Language\n\nSelected items communicate their state through a background colour shift — not just a checkbox tick.\n\n**Background:** `--color-primary-subtle` — the brand primary colour heavily desaturated and lightened to ~5–8% opacity. Perceptible but not jarring.\n\n**Left border accent (optional):** A 3px left border in `--color-primary` reinforces the selected state for list and table rows.\n\n**Checkbox:** Checked and filled with `--color-primary`. The checkbox is a secondary signal, not the primary one.\n\n```css\n.row.selected {\n  background: var(--color-primary-subtle);    /* e.g. hsl(224, 21%, 94%) */\n  border-left: 3px solid var(--color-primary);\n}\n```\n\n**Do not** use a high-contrast or saturated background for selection — it competes with content and makes dense tables hard to read.\n\n---\n\n## Mass Actions\n\nWhen one or more items are selected, mass actions appear. They disappear when nothing is selected.\n\n**Placement:** A contextual toolbar that appears at the top of the collection (replacing or supplementing the standard toolbar) when selection is active.\n\n```\n[✓ 3 selected]  [Delete]  [Archive]  [Export]  [Move to ▾]  [× Clear]\n```\n\n- Lead with the selection count: \"3 selected\" — confirms the scope before any action\n- Show only actions applicable to the selection — if some actions require a single item, disable them for multi-select\n- \"Clear\" deselects everything and dismisses the toolbar\n- Destructive mass actions (Delete) always trigger a confirm dialog naming the count: \"Delete 3 projects? This cannot be undone.\"\n\n**Select all:** A checkbox in the table header selects all items on the current page. A secondary action \"Select all 247\" extends to the full dataset.\n\n```\n[☑ Select all on page]  →  [Select all 247 results]\n```\n\n---\n\n## Sorting and Filtering\n\n### Column sorting (table view)\n- Click a column header to sort ascending; click again for descending; third click clears sort\n- Active sort column shows a directional arrow (↑ ↓)\n- Only sortable columns are clickable — non-sortable columns have no hover state on header\n\n### Filters\n- Persistent filters belong in a sidebar or filter bar above the collection\n- Active filters should be visible as chips/tags that can be individually removed\n- \"Clear all filters\" removes all active filters in one action\n- Filter count badge on the filter button when filters are active: `Filter (3)`\n\n### Empty states\n- **No results from filter:** \"No results for these filters. [Clear filters]\" — do not show a generic empty state\n- **Genuinely empty collection:** show a call to action for the first item: \"No projects yet. [Create project]\"\n\n---\n\n## Table-Specific Patterns\n\n### Sticky header\nTable column headers stick to the top when scrolling vertically — users must always be able to see what each column means.\n\n### Sticky first column\nFor wide tables that scroll horizontally, the first column (row identifier — name, ID) sticks to the left.\n\n### Row actions\nPer-row actions (Edit, Delete, View) appear on hover in the rightmost column. Do not show them at rest — they add visual noise.\n\n```\n[Name]  [Status]  [Date]  [Amount]          ← at rest\n[Name]  [Status]  [Date]  [Amount]  [Edit] [⋯]  ← on hover\n```\n\n### Column resize and reorder\nFor enterprise data tables: allow columns to be resized by dragging the header border, and reordered by dragging the header. Persist the layout.\n\n---\n\n## Review Checklist\n\n- [ ] Is a view mode toggle offered when data has both visual and detail dimensions?\n- [ ] Is the user's preferred view persisted across sessions?\n- [ ] Is the entire row or card the selection hit area — not just the checkbox?\n- [ ] Does selected state use a subtle background colour shift (`--color-primary-subtle`)?\n- [ ] Does a mass action toolbar appear when items are selected, showing the selection count?\n- [ ] Do destructive mass actions require a confirm dialog naming the item count?\n- [ ] Does \"Select all\" work per page, with an option to extend to the full dataset?\n- [ ] Are active filters visible as removable chips?\n- [ ] Does the empty state differ between \"no results\" and \"genuinely empty\"?\n- [ ] Are per-row actions shown on hover only, not at rest?\n- [ ] Is the table header sticky when the table scrolls vertically?","tags":["data","display","and","selection","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system"],"capabilities":["skill","source-dembrandt","skill-data-display-and-selection","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/data-display-and-selection","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (6,421 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:26.538Z","embedding":null,"createdAt":"2026-05-18T13:14:00.842Z","updatedAt":"2026-05-18T19:08:26.538Z","lastSeenAt":"2026-05-18T19:08:26.538Z","tsv":"'100ms':328 '16':251 '16px':252 '21':459 '224':458 '247':620,632 '3':533,546,594,725 '3px':414,464 '5':402 '50':339 '8':403 '94':460 'abl':783 'ac':52 'accent':411 'across':899 'action':96,494,503,553,556,563,583,617,712,753,811,815,931,945,991 'activ':532,656,691,708,723,970 'add':833 'adjac':179 'allow':857 'alway':585,781 'amount':839,845 'anywher':276 'appear':504,516,819,933 'applic':557 'archiv':536 'area':31,241,361,910 'arrow':662 'articl':144 'ascend':647 'background':48,283,321,327,334,341,380,388,450,479,921 'badg':715 'bar':687 'base':19 'belong':681 'benefit':77,82,89 'best':116,211 'border':410,416,462,866 'border-left':461 'brand':348,394 'brows':76,134 'bulk':87 'button':185,719 'call':72,751 'cannot':597 'card':36,127,270,351,357,906 'check':286,431 'checkbox':40,242,253,285,288,365,386,430,439,603,914 'checklist':877 'chip':975 'chips/tags':697 'choic':100,195 'chosen':15 'clear':540,574,654,703,737 'click':275,309,313,641,648,653 'clickabl':667 'collaps':205 'collect':59,178,522,690,748 'color':324,337,344,390,419,436,453,468,925 'color-grey':336 'color-primari':418,435,467 'color-primary-subtl':343,389,452,924 'color-surfac':323 'colour':49,381,396,922 'column':164,637,643,658,665,671,770,788,792,801,825,849,858 'communic':44,375 'compar':80,169 'compet':483 'complex':6,57 'confirm':548,588,948 'content':214,485 'contextu':513 'contrast':476 'control':182 'corner':368 'correct':68 'count':545,592,714,941,953 'creat':761 'css':317,448 'ctrl/cmd':312 'current':613 'cursor':319 'data':2,7,53,58,108,157,166,855,885 'data-display-and-select':1 'dataset':625,968 'date':838,844 'default':120,265 'delet':535,584,593,817 'dens':92,156,488 'desatur':398 'descend':651 'deselect':575 'deserv':8 'destruct':581,943 'detail':81,113,141,890 'devic':264 'dialog':589,949 'differ':70,74,980 'dimens':114,891 'direct':661 'disabl':568 'disappear':506 'dismiss':578 'display':3,54 'distinct':132 'drag':863,870 'drive':153 'e.g':456 'eas':330 'ease-out':329 'edit':816,846 'email':143 'empti':726,744,747,978,986 'enterpris':854 'entir':267,356,903 'especi':261 'everyth':576 'export':537 'extend':310,621,964 'file':61,126 'fill':433 'filter':198,636,678,680,686,692,705,709,713,718,721,724,731,736,738,971 'first':756,791,800 'focus':306 'friction':260 'full':624,967 'generic':743 'genuin':235,746,985 'give':97 'grey':338 'grid':12,79,121,188,200,215,354 'hard':490 'header':607,644,677,768,771,865,872,1002 'heavili':397 'high':475 'high-contrast':474 'hit':30,240,249,909 'horizont':798 'hover':333,674,821,848,994 'hsl':457 'icon':184 'id':805 'identifi':803 'imag':125 'indic':292 'individu':315,701 'item':25,123,129,218,316,374,499,567,610,757,935,952 'jar':408 'key':147 'keyboard':302 'languag':372 'larg':29,239 'layout':875 'lead':541 'left':409,415,463,809 'lighten':400 'list':13,84,139,189,201,219,426 'localstorag':197 'make':487 'manag':88,161 'mass':51,95,493,502,582,930,944 'mean':789 'metadata':152 'mobil':204 'mode':11,102,881 'moder':140 'move':538 'multi':572 'multi-select':571 'multipl':9,104,163 'must':167,780 'name':590,804,836,842,950 'nois':835 'non':669 'non-sort':668 'noth':508 'offer':103,224,883 'one':447,496,711 'opac':404 'option':412,962 'order':63,158 'page':614,629,959 'pattern':766 'per':813,958,989 'per-row':812,988 'percept':405 'persist':191,679,873,898 'piec':148 'placement':172,511 'pointer':320 'prefer':238,896 'primari':137,345,391,395,420,437,446,454,469,926 'product':60,124 'project':595,759,762 'read':492 'reinforc':421 'remov':702,706,974 'reorder':852,868 'replac':523 'report':159 'requir':246,564,946 'resiz':850,861 'rest':831,841,998 'result':633,729,733,983 'review':876 'right':175 'rightmost':824 'row':23,34,257,268,279,282,307,318,332,429,802,810,814,904,990 'row.selected':340,449 'satur':478 'scope':550 'screen':230 'scroll':777,797,1007 'secondari':442,616 'see':785 'select':5,26,41,56,154,237,255,273,280,294,301,304,311,360,369,373,423,481,501,510,530,534,544,547,560,573,600,608,618,626,630,908,916,937,940,955 'session':900 'shift':50,284,308,382,923 'show':554,659,741,749,828,938 'shown':992 'sidebar':684 'signal':443 'singl':67,566 'skill' 'skill-data-display-and-selection' 'small':229,244 'solid':465 'sort':199,634,638,646,655,657 'sort/filter':181 'sortabl':664,670 'source-dembrandt' 'space':303 'specif':765 'standard':527 'state':42,295,370,377,424,675,727,745,917,979 'status':837,843 'stick':772,806 'sticki':767,790,1003 'subtl':47,346,347,392,455,920,927 'supplement':525 'surfac':325 'tabl':14,86,93,155,190,202,428,489,606,639,764,769,795,856,1001,1006 'table-specif':763 'target':245,274 'task':22,64,71,138,142 'text':150,221 'third':652 'tick':387 'tint':349 'toggl':171,227,314,882 'toolbar':514,528,580,932 'tooltip':187 'top':174,519,775 'top-right':173 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'touch':263 'transit':326 'trigger':586 'undon':599 'unless':231 'unnecessari':259 'usabl':236 'use':28,183,472,918 'user':18,62,98,160,193,247,779,894 'var':322,335,342,451,466 'vertic':778,1008 'view':10,69,75,101,105,115,170,208,226,233,640,818,880,897 'visibl':695,972 'visual':111,122,131,217,291,371,834,888 'way':299 'whole':33 'wide':794 'work':210,957 'yet':760","prices":[{"id":"36f031eb-0073-4a3f-ac1a-d0056318e37e","listingId":"df12c3c9-83dc-447e-a196-d41f803e7213","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:00.842Z"}],"sources":[{"listingId":"df12c3c9-83dc-447e-a196-d41f803e7213","source":"github","sourceId":"dembrandt/dembrandt-skills/data-display-and-selection","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/data-display-and-selection","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:00.842Z","lastSeenAt":"2026-05-18T19:08:26.538Z"}],"details":{"listingId":"df12c3c9-83dc-447e-a196-d41f803e7213","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"data-display-and-selection","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"debf272610751fee7f91804c25a13390f5d2bd76","skill_md_path":"skills/data-display-and-selection/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/data-display-and-selection"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"data-display-and-selection","description":"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 actions appear when items are selected. Use when designing data tables, product listings, file browsers, or any multi-item collection."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/data-display-and-selection"},"updatedAt":"2026-05-18T19:08:26.538Z"}}