skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

data-display-and-selection

Organize multi-item data collections with grid, list, and table views.

Updated May 24, 2026
Search Tags:#data#list#grid#selection#display#table#mass-action
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill data-display-and-selection
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-display-and-selection
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/data-display-and-selection
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill data-display-and-selection

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

  • View Modes: Grid, List, and Table views to suit visual browsing, detailed comparison, and dense data analysis.
  • Selection: Entire-row/card hit areas with a visual selection state, enabling easier item selection on touch devices.
  • Mass Actions: Contextual bulk actions that appear when items are selected to perform actions on multiple items.
  • Use Case: Design product listings or file browsers where users need to switch views and manage multiple items efficiently.

Quick Start

Enable a multi-view data collection with selectable rows and a mass-action toolbar.

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 add a mass-action toolbar for bulk item selection in a data table?▼

To add a mass-action toolbar, configure entire-row hit areas with visual selection states to enable bulk item selection, which triggers a contextual mass-action toolbar for managing multiple data records.

What is the best way to display product catalogs with switchable grid and list views?▼

Display product catalogs using configurable view modes that support grid, list, and table formats, enabling users to switch between visual browsing and dense data analysis based on their specific task requirements.

Can I use large hit areas for row selection on touch devices in a file browser?▼

Yes, you can use large hit areas for row selection in file browsers, as the design provides entire-row and entire-card hit areas with subtle selected-state visuals specifically suited for touch devices.

How do I switch between table and list views for complex data collections?▼

Switch between table and list views by applying configurable view modes to complex data collections, allowing users to transition from detailed comparison lists to dense tables for bulk management.

When should I use a grid view over a table view for multi-item data?▼

Use a grid view for multi-item data when visual browsing is the priority, and switch to a table view when users require dense data analysis or need to perform bulk management actions on multiple records.

Related Skills

Explore More Design & Creative Skills→
diegocamara89diegocamara89
3

obsidian-bases

Create and validate Obsidian .base files for note collection views.

Community
Intermediate
julianobarbosajulianobarbosa
7

zabbix

Automate Zabbix host, template, item, and trigger management via API.

Community
Intermediate
Ali1razAli1raz
1

tanstack-table

Create dynamic React tables with sorting, filtering, and pagination using @tanstack/react-table.

Community
Intermediate
dembrandtdembrandt
33

data-display-and-selection

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

Official
Intermediate