This skill should be used when the user is building or reviewing data tables, pagination, column alignment, bulk actions, sorting, filtering, row selection, or table-to-card responsive patterns. Covers the pagination vs infinite scroll decision, DataTable vs IndexTable patterns, and column default strategy.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesThis skill uses the workspace's default tool permissions.
Enterprise SaaS lives and dies by its data tables. The rules are non-negotiable.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Enterprise SaaS lives and dies by its data tables. The rules are non-negotiable.
| Content Type | Alignment |
|---|---|
| Text | Left-align |
| Numbers | Right-align |
| Headers | Match content alignment |
| Data columns | Never center-align |
Use monospace or tabular typography for numbers so "$1,111.11" doesn't visually outweigh "$999.99."
Pagination beats infinite scroll for SaaS data tables — always.
Nielsen Norman Group's research explains why: infinite scroll creates a "lack of landmarks." Users can't remember where items were. With pagination, users remember "it was on page 3, near the top."
Pogo-sticking — clicking into a record, then going back — is especially destructive with infinite scroll because users are often returned to the top of the list.
Pagination rules:
Shopify Polaris makes a critical distinction:
For showing values across categories with summary rows and fixed columns. Read-only comparison view.
For orders, customers, products — with row selection, bulk actions, and navigation to detail pages.
Build both patterns. The choice depends on whether users need to act on the data or compare it.
Invest heavily in choosing which columns appear by default. Most users never customize.
Rules:
Show a toolbar when one or more rows are selected.
Placement options:
Selection options:
Working implementations in examples/:
examples/responsive-data-table.md — Alignment CSS, URL-based pagination, bulk selection, and table-to-card mobile conversionWhen reviewing or building data tables: