skills.rest
shipiit
shipiitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dashboard-design

Guide dashboard UI design for admin surfaces with KPI and table patterns.

Updated May 6, 2026
Search Tags:#information architecture#data tables#dashboard design#command palette#kpi tiles#role-based UI#responsive density
One-click install
npx skills add https://github.com/shipiit/shipit-ui-design --skill dashboard-design-shipiit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-design
Source: https://github.com/shipiit/shipit-ui-design/tree/main/skills/dashboard-design
Command: npx skills add https://github.com/shipiit/shipit-ui-design --skill dashboard-design-shipiit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design admin and data-heavy dashboards that are usable at a glance, consistent across states, and correct for different roles and densities.

Core Features & Use Cases

  • Design correct dashboard shells: choose the right layout (sidebar+topbar, topbar-only, or split-pane) and blueprint the navigation structure.
  • Build KPI tiles and tables that hold up: implement KPI anatomy (label/value/delta/context/trend), robust data table behaviors (sticky headers, sort, selection, responsive pagination/virtualization), and consistent interactive states.
  • Handle real-world dashboard scenarios: create the right empty/loading/error/partial UI patterns, support drawers/modals/inline edit choices, and implement filters, saved views, notifications, and role-based UI affordances.

Quick Start

Apply the dashboard shell and KPI/table rules from this Skill to your current admin or dashboard files under /admin, /dashboard, or /console, then add missing states (empty/loading/error/partial) and ensure density and role behavior match the intended user type.

Frequently Asked Questions about dashboard-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a dashboard shell layout for an admin console?▼

Build robust dashboard data tables by implementing sticky headers, sort and selection behaviors, and responsive pagination or virtualization to handle large datasets without performance loss.

How do I implement KPI tiles that hold up in data-heavy dashboards?▼

Implement KPI tiles using a structured anatomy of label, value, delta, context, and trend, ensuring full hover, focus, and disabled state coverage with token-only styling for consistent light and dark output.

What are the best empty, loading, error, and partial UI patterns for dashboards?▼

Apply dashboard design rules to your current admin or console files under /admin, /dashboard, or /console, add missing interactive states, and ensure density and role behavior match the intended user type.

Does this dashboard design approach work with chart libraries like recharts and tremor?▼

Apply dashboard design rules to your current admin or console files under /admin, /dashboard, or /console, add missing interactive states, and ensure density and role behavior match the intended user type.

How do I ensure accessibility and responsive density in data-heavy admin dashboards?▼

Ensure accessibility and responsive density by enforcing token-only styling, full hover, focus, and disabled state coverage, prefers-reduced-motion compliance, and role-appropriate UI for different user types and screen sizes.

Related Skills

Explore More Design & Creative Skills→
tunacosguntunacosgun

emcn-design-review

Audit UI code against the emcn design system for conformance.

Community
Advanced
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
shipiitshipiit

data-visualization

Enforce accurate encoding, accessibility, and responsive behavior in UI charts.

Official
Advanced
ancolemanancoleman
503

building-tables

Build HTML tables and data grids with sorting, filtering, and pagination.

Community
Intermediate