--- name: Dashboards version: 1.0.0 Author: justinsanjp description: Helps LLMs too understand dashboards train: false # mandatory --- # Dashboard Design Skill ## Goal Create modern, practical, production-ready dashboards that feel like real products. Dashboards should prioritize: - clarity - speed - usefulness - hierarchy - actionable information A dashboard is not a collection of random cards. Users should immediately understand: - where they are - what matters - what actions exist - what changed - what requires attention Avoid AI-looking dashboard designs. --- # Important Rule Before designing a dashboard determine: - Is this a User Dashboard? - Is this an Admin Dashboard? These have different goals and should never be treated the same. --- # Dashboard Types # User Dashboard Purpose: Help users accomplish tasks quickly. Users care about: - their own data - personal activity - progress - notifications - shortcuts - current status Users generally do NOT care about: - server metrics - system internals - moderation tools - technical statistics - massive data tables --- # Admin Dashboard Purpose: Manage systems, users, content, moderation, analytics, and operational tools. Admins care about: - platform health - user management - activity - reports - system state - statistics - moderation - actions Admins need visibility and control. --- # Core Design Philosophy Dashboards should feel: - organized - fast - readable - intentional - focused Avoid: - random widgets - card spam - visual overload - meaningless charts - giant empty areas - fake analytics - excessive gradients - futuristic UI clutter --- # Layout Rules Use a predictable structure. Recommended: Top: - page title - current context - important actions Middle: - primary information - key widgets Bottom: - secondary information - historical data - details Avoid placing important information at the bottom. --- # Sidebar Rules Sidebars should remain minimal. Good: Dashboard Projects Messages Settings Admin example: Dashboard Users Reports Analytics Moderation Settings Avoid: - 30 navigation items - deep nesting - random icons everywhere --- # Spacing Rules Preferred spacing scale: - 4px - 8px - 12px - 16px - 24px - 32px - 48px Use consistent spacing. Avoid random values. --- # Typography Preferred fonts: - Inter - Geist - SF Pro - Manrope Rules: - readable first - clear hierarchy - avoid giant headings Recommended: Body: 14px–16px Section titles: 18px–24px Large metrics: 28px–48px --- # Cards Cards should: - group information - not dominate the screen - have clear purpose Avoid: - cards inside cards inside cards - giant padding - unnecessary borders Every card should answer: "What information does this provide?" If no answer exists: remove it. --- # Charts Charts should only exist if useful. Good examples: - activity trends - growth - performance - usage history - revenue - completion rate Avoid: - decorative charts - fake statistics - random pie charts - charts without labels Always include: - labels - values - time ranges --- # Tables Tables should support: - sorting - searching - pagination - filtering Avoid: - extremely wide tables - dozens of columns - hidden important information --- # Notifications Notifications should: - be actionable - be relevant - have priority levels Avoid: - notification spam - meaningless updates Good: "Payment failed" Bad: "Something happened" --- # Empty States Never leave areas blank. Good empty state: - explanation - helpful message - action button Example: "No projects yet" Button: "Create Project" --- # Loading States Always use: - skeleton loading - progress indicators - placeholders Avoid: - content suddenly appearing --- # Responsive Rules Dashboard must work on: - mobile - tablet - desktop - ultrawide Do not simply shrink desktop layouts. Adapt layout structure. --- # Accessibility Must include: - keyboard navigation - visible focus states - semantic HTML - proper contrast - screen reader support --- # USER DASHBOARD RULES Purpose: Help users do things. Prioritize: - shortcuts - recent activity - progress - personal data - notifications - status Recommended widgets: - recent activity - profile summary - messages - tasks - subscription status - progress tracking - quick actions - saved content Good example: Welcome back Your Projects Recent Activity Messages Upcoming Tasks Avoid: - server metrics - admin tools - huge analytics - technical logs --- # USER DASHBOARD UX RULES Users should need: - few clicks - minimal thinking - immediate feedback Primary actions should be obvious. --- # ADMIN DASHBOARD RULES Purpose: Control systems. Prioritize: - management - moderation - statistics - actions - visibility Recommended widgets: - active users - reports - moderation queue - system health - analytics - server status - recent actions - audit logs - revenue - errors --- # ADMIN DASHBOARD UX RULES Admins should: - see critical information first - find problems quickly - act quickly Prioritize urgency. --- # Priority System Admin pages should visually separate: Critical Important Normal Examples: Critical: - server down - abuse reports - payment failures Important: - increased traffic - warning events Normal: - informational metrics --- # Search Rules Admin systems should have: - global search - filters - quick actions Users may have: - contextual search --- # Action Rules Actions should be clear. Examples: Good: Suspend User Approve Report Delete Content Bad: Execute Run Modify Actions should explain what happens. --- # AI Dashboard Avoidance Rules To avoid AI-generated dashboards: ## DO - vary section density naturally - use realistic content - prioritize actual workflows - keep layouts practical - leave some areas simple ## DON'T - create 15 identical cards - overuse gradients - put charts everywhere - add fake metrics - over-round everything - add random widgets --- # Preferred Frontend Stack - React - Next.js - TailwindCSS - shadcn/ui - Recharts - Framer Motion (minimal) --- # Final Rule User dashboards help users. Admin dashboards control systems. Never mix them together. Users want simplicity. Admins want visibility and control.