数据与研究

data-display-and-selection

dembrandt/dembr…t-skills

View modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables, listings, file browsers or any collection.

  • 884 次安装
  • 174 星标
  • 收录于

安装命令

npx skills add https://github.com/dembrandt/dembrandt-skills --skill data-display-and-selection

SKILL.md

Data Display and Selection

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.


View Modes

Offer multiple views when the data has both visual and detailed dimensions.

View Best for When to default
Grid Visual items: products, images, files, cards When items are visually distinct and browsing is the primary task
List Moderate detail: tasks, emails, articles When a key piece of text or metadata drives selection
Table Dense data: orders, reports, user management When multiple columns of data must be compared

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.