dashboard-ui
Controls the dashboard UI and state management within a Next.js App Router project.
Install
mkdir -p .claude/skills/dashboard-ui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16723" && unzip -o skill.zip -d .claude/skills/dashboard-ui && rm skill.zipInstalls to .claude/skills/dashboard-ui
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Next.js App Router page (`src/app/page.tsx`) renders `Dashboard.tsx`, which composes every panel and owns filter state.Key capabilities
- →Manage top-level state for the dashboard
- →Fetch analytics data based on filters
- →Render various dashboard sections and panels
- →Handle filter persistence and reset
- →Compose different chart types and summary cards
How it works
The skill uses `Dashboard.tsx` as the top-level state container to fetch analytics data based on query parameters and compose various UI components for display.
Inputs & outputs
When to use dashboard-ui
- →Managing dashboard state
- →Building analytical layouts
- →Implementing filter systems
About this skill
Dashboard UI
Next.js App Router page (src/app/page.tsx) renders Dashboard.tsx, which composes every panel and owns filter state.
Component map (src/components/dashboard)
Dashboard.tsx— top-level state container, fetches/api/analytics?filters, renders all sections.DashboardHeader.tsx— date range, active filter chips, refresh.Sidebar.tsx— department / task / app / employee<Select>s; emitsDashboardFilters.HeadlineCards.tsx— recoverable hours/month, recoverable INR/month, repetitive %, anomaly badge.ExecutiveSummary.tsx+executive-summary-exportDOM id — also the export root (see export skill).TimeSinkBreakdown.tsx— task category + app breakdowns.DepartmentRepetitiveChart.tsx,TaskRecoverableChart.tsx,TrendChart.tsx— Recharts.AutomationRanking.tsx— top-N table driven by automation score.AnomalyCallout.tsx— single outlier surfaced by the anomaly rule.EmployeeDrilldown.tsx— per-employee details when an employee filter is active.CleaningSummary.tsx— data-quality audit (counts + per-issue rows).MethodologyDrawer.tsx/MethodologyPanel.tsx/MethodologyContent.tsx— methodology popout.DeferredMount.tsx— defers heavy charts until idle to keep first paint snappy.
UI primitives (src/components/ui)
Badge, Button, Card, Select, Tooltip, SectionHeader, ChartSkeleton, SectionSkeleton, LoadingScreen. No external UI kit — Tailwind only.
Styling
- Tailwind (
tailwind.config.ts,globals.css). - Chart palette + axes centralized in
src/lib/chartTheme.ts.
Filter contract
Filters travel as query params to /api/analytics. AND-combined. Resetting clears all four. Active filters are echoed in the export.
When not to use it
- →When not building a Next.js App Router page
- →When not needing a dashboard UI with filter state management
- →When not using Tailwind CSS for styling
Limitations
- →Filters travel as query params to /api/analytics
- →Filters are AND-combined
- →Resetting clears all four filters
How it compares
This workflow provides a structured approach to building a dashboard UI with integrated state management and data fetching, ensuring consistent filter application and component composition, unlike manually assembling disparate UI elements.
Compared to similar skills
dashboard-ui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| dashboard-ui (this skill) | 0 | 3mo | No flags | Intermediate |
| data-table-filters | 0 | 4mo | Review | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
data-table-filters
openstatusHQ
>
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.