Dashboard UI Architect

Design patterns and component scaffolding for data-dense admin and analytics dashboards that stay readable under real load. This skill is for frontend engineers and product designers building internal tools, SaaS control panels, or reporting views where the hard part isn't drawing a chart — it's keeping 12 widgets, 40-column tables, and six filters scannable. It assumes a modern React stack (Tailwind, shadcn/ui, TanStack Table, Recharts/visx) and adapts patterns to whatever you already use.

When to use it

• You're laying out an admin screen and don't know what belongs above the fold versus behind a filter or detail panel.
• A data table has grown past ~8 columns and users are scrolling horizontally to find anything.
• You need a chart but aren't sure whether it should be a line, bar, area, or just a big number.
• You keep shipping the happy path and forgetting empty, loading, and error states.
• You want a command palette (Cmd+K) or saved-filter pattern but don't want to design the interaction from scratch.

What it does

The skill applies a layered information hierarchy: scannable KPI row, primary visualization, then a filterable table for the long tail. For tables it generates TanStack Table column defs with sticky headers, column pinning, density toggles, and server-driven sort/pagination. Filter UIs follow a faceted-filter pattern (multi-select popovers, date-range pickers, a clearable active-filter bar). Chart selection is rule-based — cardinality and time-axis presence decide line vs. bar vs. categorical — emitted as Recharts or visx components. Command palettes are scaffolded on cmdk. Crucially, every generated view ships skeleton loaders, an illustrated empty state with a primary action, and an error boundary with retry.

Usage example

curl -fsSL --create-dirs -o ~/.claude/skills/dashboard-ui-architect/SKILL.md https://claudeskil.com/skills/dashboard-ui-architect/SKILL.md

# then, in your project:
claude "design an orders dashboard: revenue KPIs, daily trend,
        and a filterable table of 25k orders with status + region facets"

It returns a layout plan plus components: OrdersTable.tsx (TanStack column defs, pinned id column, density toggle), FacetedFilter.tsx, a RevenueTrend Recharts line chart, and <TableEmptyState /> / <TableSkeleton />.

Tips & gotchas

• Don't paginate everything. For <2k rows, prefer virtualized client-side scrolling (TanStack Virtual) over page numbers — it keeps filtering instant.
• Put units and deltas in KPI cards, not just numbers. "$48.2k +12% WoW" beats "48200".
• Skeletons should match final layout, not a generic spinner, or you'll get layout shift when data lands.
• Limit a dashboard to one primary chart per region. Stacking four charts of equal weight removes the hierarchy that makes it scannable.

FAQ

Does it require shadcn/ui? No — it defaults to shadcn primitives but will emit plain Tailwind or adapt to MUI/Chakra if your repo already uses one.

Can it handle real-time data? Yes; it wires optimistic states and a "stale data" indicator, but you supply the data source (WebSocket/polling hook).

Will it design the whole app? No — it's scoped to dashboard surfaces: tables, charts, filters, palettes, and their states.