miovrag·miovrag/claude-skills/data-table-ux/SKILL.md

data-table-ux

Skill1 starsChanged 5 months agoNo licenceView on GitHub

Best-practice guidance for designing, building, auditing, or reviewing data tables and table-heavy interfaces — the full stack from process (user research, feature tree, framework constraints, atomic design from cell up) through layout (column and row alignment, tabular typography, row division styles, vertical alignment, display density, sticky headers and frozen columns, column management, "too many columns" problem, row details views, scroll behavior, container placement, mobile fallback to cards) through interaction (inline cell editing, multi-select and bulk actions, hover-revealed actions, sorting, toolbar command-state rules, input validation and auto-format, numeric precision and true-vs-display) through accessibility (WCAG 2.0 conformance, color-not-sole-channel, touch targets, font scaling, screen-reader title/summary, keyboard navigation). Use this skill whenever the user is touching a data table, list view, grid, spreadsheet-like UI, admin table, CRM contacts table, dashboard table, transactions list, inventory table, user-management table, log viewer, or any tabular display of records — including tables embedded inside dashboards, popup dialogs, or autonomous cards. Trigger on words like data table, table UX, table design, table layout, table column, table row, table header, sticky header, frozen column, freeze column, pinned column, column resize, column reorder, column hide, hide column, show columns, column management, row density, table density, condensed / regular / relaxed, zebra stripes, alternating rows, row divider, row stripe, inline editing, cell editing, row hover, row click, expandable row, row expand, row details, drawer, side panel, quick view, bulk actions, multi-select, select all, row checkbox, table sort, sort chevron, column header sort, tabular numbers, monospace numbers, right-align numbers, align text, tabular layout, admin table, CRM table, list view, grid view, spreadsheet UI, transactions table, logs table, records table, enterprise table, decimal precision, number format, thousand separator, input validation, validation rules, error message, auto-format, command states, toolbar states, table in dialog, popup table, mobile table, responsive table, table to cards, WCAG, table accessibility, keyboard navigation, screen reader table — or complaints like "the table feels cluttered", "users can't find columns", "scrolling feels jerky", "users lose context when scrolling", "the table is overwhelming", "edits are hard", "users can't tell which row they're acting on", "the table doesn't fit", "the table breaks on mobile", "errors aren't clear", "users keep entering the wrong format", even when none of these terms appear verbatim. Surface this skill proactively any time a screenshot, Pencil node, or component file contains a data table or grid layout — don't wait for the user to name the pattern. For filter sidebars / chips / range sliders that *belong to* a table, also load `filtering-ux`.