Tables & Lists: AI Skill for UX Design
Tables & Lists is an AI skill that builds data tables users can scan, compare, and act on. Text left, numbers right, sorting where it counts.
npx skills add Uxcel-Lab/product-skills --skill ux-tables
Copied
What this skill does
Helps an AI assistant build tables and lists users can scan, compare, and act on, without decorative noise.
- Establishes whether the data needs a table or reads better as a list.
- Aligns text left and numbers right, in equal-width tabular figures.
- Keeps one consistent format per column for dates, currency, and units.
- Uses minimal borders: dividers and zebra striping only where they earn it.
- Adds sorting, hover states, and row selection once volume demands them.
- Handles overflow with ellipsis, tooltips, and resizable columns.
- Picks the right list type and loads with sequential skeleton screens.
- Keeps markup semantic so screen readers can navigate the data.
When to use it
Use it when you need an AI assistant to:
- design a data table or admin grid;
- review a table that's hard to scan;
- choose row density and spacing;
- add sorting, filtering, or bulk actions;
- pick pagination, infinite scroll, or "Load more";
- turn a complex table into simple ones;
- design email-style or media lists.
Decisions this skill helps you make
| Decision | Options |
|---|---|
| Row density | Condensed 40px for ops tools; regular 48px default; relaxed 56px for comfort |
| Pagination style | Pagination for data work; "Load more" as middle ground; infinite scroll for feeds |
| Zebra striping | Wide tables where the eye drifts; plain rows with hover states elsewhere |
| Column customization | Resize, hide, and reorder at more than 6 to 8 columns |
| Toolbar | Search, filter, and export once volume demands them |
| View toggle | List for spec comparison; grid for visual content |
| Searchable lists | A search bar once scanning stops being instant |
| Table structure | Simple structure with one header level; split complex tables |
How the skill works
1
Establish data shape
The skill decides table vs. list from your data, volume, and what users do with rows.
2
Apply the core
It aligns text left and numbers right, adds sorting, hover states, and consistent formats.
3
Surface density choices
It weighs row density, pagination type, zebra striping, and column customization for your data.
Try it with
Related skills
1.0.0
MIT
UX Design
Components
