data-display-and-selection

Design interfaces for displaying, searching, selecting, and managing complex data collections.

33|6|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill data-display-and-selection-dembrandt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: data-display-and-selection
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/data-display-and-selection
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill data-display-and-selection-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps users understand, navigate, compare, and manage complex collections without being constrained by a single view or tiny selection controls.

Core Features & Use Cases

  • View Mode Design: Choose and coordinate grid, list, and table views based on whether users are browsing, reviewing details, or comparing dense data.
  • Selection and Bulk Actions: Design large row and card hit areas, clear selected states, contextual mass-action toolbars, and safe select-all behavior.
  • Search and Data Comprehension: Create keyboard-navigable autocomplete, useful empty states, familiar charts, contextual metrics, and semantic colour palettes for collections, dashboards, and product listings.

Quick Start

Use the data display and selection skill to redesign this product listing with grid and list views, easier multi-selection, bulk actions, filters, and clearer metrics.

Frequently Asked Questions about data-display-and-selection

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design data tables with bulk actions and multi-row selection?

Design data tables with bulk actions by using large row hit areas, clear selected states, and contextual mass-action toolbars. Implement safe select-all behavior to let users manage complex data collections without accidental modifications.

What is the best way to switch between grid, list, and table views for product listings?

The best way to handle view modes is coordinating grid, list, and table layouts based on user tasks: grids for browsing, lists for reviewing details, and tables for comparing dense data. Persist these view preferences across sessions for consistency.

How do I make autocomplete search accessible in data visualization dashboards?

Make autocomplete search accessible by implementing full keyboard navigation, displaying useful empty states, and using familiar semantic color palettes. This enables users to navigate complex collections and comprehend contextual metrics without relying on a mouse.

Can I use this approach for file browsers and search results with sticky table navigation?

Yes, this approach applies to file browsers, search results, and dashboards. It requires large selection hit areas, accessible keyboard interactions, and sticky table navigation to ensure users can scroll long collections without losing their action context.

When should I not use a single view mode for displaying complex data collections?

Avoid a single view mode when users need to browse, review details, or compare dense data. Constraining users to one view limits comprehension, so coordinate multiple view modes with filters and meaningful empty states to support varying tasks.