Agent Skills, Assets and Tools for a Dashboard UI

Skills for dense, scannable data screens: charts, tables, states and layout, with icon sets and chart libraries.

Give it to your agent

# Dashboard UI: what to use (AgentGid, 2026-10-23)

## Agent Skills (install once)
- npx skills add wshobson/agents --skill kpi-dashboard-design  # kpi-dashboard-design: Design effective KPI dashboards with metrics selection, visualization best practices, and 
- npx skills add wshobson/agents --skill postgresql-table-design  # postgresql-table-design: Use this skill when designing or reviewing a PostgreSQL-specific schema. Covers best-pract
- npx skills add openclaw/clawhub --skill building-dashboards  # building-dashboards: Designs and builds Axiom dashboards via API. Covers chart types, APL and metrics/MPL query
- npx skills add nexu-io/html-anything --skill dashboard  # dashboard: 固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
- npx skills add nexu-io/html-anything --skill flowai-team-dashboard  # flowai-team-dashboard: 三个 tab 的团队管理后台: 成员、详情、活动日志, 含图表 + CSV 导出
- npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard  # react-vite-dashboard: Convert Stitch designs into production React + Vite dashboards with TanStack Query, access
- npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts  # lieflat-charts: 一套模板驱动的数据可视化、PPT 演示与整页报告生成 skill，既能严格从 Lupi、Basics、Glance、Maps 与 Interactive gallery 的真实实现
- npx skills add zebbern/claude-code-guide --skill chart-image  # chart-image: Generate publication-quality PNG chart images from data, supporting line, bar, area, candl
- npx skills add tradermonty/claude-trading-skills --skill breadth-chart-analyst  # breadth-chart-analyst: This skill should be used when analyzing market breadth charts, specifically the S&P 500 B
- npx skills add plugin87/ux-ui-agent-skills --skill data-dashboard  # data-dashboard: Build a dense, data-heavy screen - an analytics console or a trading terminal - with real 

## Libraries
- npm install recharts  # Recharts, Gid Score 82
- pip install matplotlib  # Matplotlib, Gid Score 80
- npm install mermaid  # Mermaid, Gid Score 75
- npm install d3  # D3.js, Gid Score 75
- npm install chart.js  # Chart.js, Gid Score 73
- npm install lucide-react  # Lucide React, Gid Score 86
- npm install @radix-ui/react-slot  # Radix UI, Gid Score 84
- npm install shadcn  # shadcn/ui, Gid Score 81

Install commands for the skills, the libraries, and each content source with its license rules. Paste it into AGENTS.md or your first prompt.

Agent Skills

Skill	Pack	What it does and how to install
kpi-dashboard-design	wshobson/agents 41.6K stars	Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request… `npx skills add wshobson/agents --skill kpi-dashboard-design`
postgresql-table-design	wshobson/agents 41.6K stars	Use this skill when designing or reviewing a PostgreSQL-specific schema. Covers best-practices, data types, indexing, constraints, performance patterns, and advanced features `npx skills add wshobson/agents --skill postgresql-table-design`
building-dashboards	openclaw/clawhub 9,526 stars	Designs and builds Axiom dashboards via API. Covers chart types, APL and metrics/MPL query patterns, SmartFilters, layout, and configuration options. Use when creating dashboards, migrating from Splunk, or configuring chart options. has scripts `npx skills add openclaw/clawhub --skill building-dashboards`
dashboard	nexu-io/html-anything 9,217 stars	固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图 `npx skills add nexu-io/html-anything --skill dashboard`
flowai-team-dashboard	nexu-io/html-anything 9,217 stars	三个 tab 的团队管理后台: 成员、详情、活动日志, 含图表 + CSV 导出 `npx skills add nexu-io/html-anything --skill flowai-team-dashboard`
react-vite-dashboard	google-labs-code/stitch-skills 8,543 stars	Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem). `npx skills add google-labs-code/stitch-skills --skill react-vite-dashboard`
lieflat-charts	larashero3-dotcom/lieflat-charts 6,379 stars	一套模板驱动的数据可视化、PPT 演示与整页报告生成 skill，既能严格从 Lupi、Basics、Glance、Maps 与 Interactive gallery 的真实实现生成 HTML 图表，也能从 Presentation Mode 生成 HTML/PDF 演示，或从报告模板生成整页 HTML 报告；以 Mono 为保底，能按数据语义自动选择内置彩色预设，也支持用户明确提供的自定义色板。地图仅在用户明确要求时启用，同一交付禁止混用色系。 `npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts`
chart-image	zebbern/claude-code-guide 4,677 stars	Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts. Triggers when the user asks to visualize data, create a graph, plot a time series, or generate a chart for a report, alert, or dashboard. Runs as a lightweight, headless… has scripts `npx skills add zebbern/claude-code-guide --skill chart-image`
breadth-chart-analyst	tradermonty/claude-trading-skills 3,203 stars	This skill should be used when analyzing market breadth charts, specifically the S&P 500 Breadth Index (200-Day MA based) and the US Stock Market Uptrend Stock Ratio charts. Use this skill when the user provides breadth chart images for analysis, requests market breadth assessment, positioning… has scripts `npx skills add tradermonty/claude-trading-skills --skill breadth-chart-analyst`
data-dashboard	plugin87/ux-ui-agent-skills 2,853 stars	Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick, volume, depth, stacked area, waterfall, scatter, correlation matrix, donut, gauge, sparklines, heatmaps and order books. Use when the request is a dashboard, terminal,… `npx skills add plugin87/ux-ui-agent-skills --skill data-dashboard`
token-dashboard	alexgreensh/token-optimizer 2,652 stars	Answers what a past session cost ("the Garden session yesterday", a session id) with a priced number, and opens the Token Optimizer dashboard when asked to see it. `npx skills add alexgreensh/token-optimizer --skill token-dashboard`
portaljs-add-chart	datopian/portaljs 2,370 stars	Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json. `npx skills add datopian/portaljs --skill portaljs-add-chart`
design-postgis-tables	timescale/pg-aiguide 1,873 stars	Comprehensive PostGIS spatial table design reference covering geometry types, coordinate systems, spatial indexing, and performance patterns for location-based applications `npx skills add timescale/pg-aiguide --skill design-postgis-tables`
design-postgres-tables	timescale/pg-aiguide 1,873 stars	Use this skill for general PostgreSQL table design. Trigger when user asks to: - Design PostgreSQL tables, schemas, or data models when creating new tables and when modifying existing ones. - Choose data types, constraints, or indexes for PostgreSQL - Create user tables, order tables,… `npx skills add timescale/pg-aiguide --skill design-postgres-tables`
swift-charts	dpearson2699/swift-ios-skills 1,228 stars	Implement, review, or improve data visualizations using Swift Charts. Use when building bar, line, area, point, pie, donut, or iOS 26 3D charts; when adding chart selection, scrolling, annotations, axes, scales, legends, or foregroundStyle grouping; when plotting functions with BarPlot, LinePlot,… `npx skills add dpearson2699/swift-ios-skills --skill swift-charts`
dashboard-status	hoangsonww/Claude-Code-Agent-Monitor 1,107 stars	Quick dashboard health and status overview — checks the Agent Monitor API (port 4820), reports session/agent/event counts from /api/stats, confirms WebSocket connectivity, reads the redacted hook status returned by /api/settings/info, and shows data freshness (last event timestamp). Use to verify… `npx skills add hoangsonww/Claude-Code-Agent-Monitor --skill dashboard-status`
creating-good-dashboards	data-goblin/power-bi-agentic-development 1,065 stars	Design and revise Claude Dashboards that people trust and can read at a glance, and handle the comments people leave on them. Use this skill whenever you create, restyle or change a dashboard, answer or act on a dashboard comment (including @Claude mentions in a comment thread), or the user asks… `npx skills add data-goblin/power-bi-agentic-development --skill creating-good-dashboards`
wizard	mattpocock/skills 301K stars	Generate an interactive bash wizard that walks a human through steps only they can perform. Use when provisioning infrastructure, setting up credentials or CI secrets, walking an unfamiliar third-party dashboard, or running a one-off migration or cutover. Don't invoke this for steps the agent can… has scripts `npx skills add mattpocock/skills --skill wizard`
design	nextlevelbuilder/ui-ux-pro-max-skill 139K stars	Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles,… has scripts `npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design`
slides	nextlevelbuilder/ui-ux-pro-max-skill 139K stars	Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies. `npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides`
impeccable	pbakaus/impeccable 85.2K stars	Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states, and native iOS or Android screens. Handles UX… has scripts `npx skills add pbakaus/impeccable --skill impeccable`
visualize	code-yeongyu/oh-my-openagent 70.3K stars	Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread. Use before calling show_html_page, html_preview or html_render, or whenever an answer reads better as a page than as prose. `npx skills add code-yeongyu/oh-my-openagent --skill visualize`
diagram-design	cathrynlavery/diagram-design 60.2K stars	Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn,… has scripts `npx skills add cathrynlavery/diagram-design --skill diagram-design`
pick-ui-library	emilkowalski/skills 48.8K stars	Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own. `npx skills add emilkowalski/skills --skill pick-ui-library`

Names and descriptions come from each skill's SKILL.md. Packs with more GitHub stars first, at most a few skills from one pack.

Libraries projects use for this

Recharts	Composable React component library for building responsive charts. `npm install recharts` · Gid Score 82
Matplotlib	Python library for creating static, animated and interactive plots and visualizations. `pip install matplotlib` · Gid Score 80
Mermaid	Markdown-like syntax for creating flowcharts, diagrams, and visualizations programmatically. `npm install mermaid` · Gid Score 75
D3.js	JavaScript library for creating data-driven documents with powerful data visualization capabilities. `npm install d3` · Gid Score 75
Chart.js	Simple HTML5 canvas-based charting library for creating interactive data visualizations. `npm install chart.js` · Gid Score 73
Lucide React	Comprehensive icon library with consistent design for React applications. `npm install lucide-react` · Gid Score 86
Radix UI	Unstyled, accessible component primitives for building design systems. `npm install @radix-ui/react-slot` · Gid Score 84
shadcn/ui	Copy-paste React component library built on Radix UI and Tailwind CSS. `npm install shadcn` · Gid Score 81
Sonner	Opinionated toast notification component for React applications. `npm install sonner` · Gid Score 79
Class Variance Authority	Type-safe CSS class composition for component variants and styling. `npm install class-variance-authority` · Gid Score 79

Web design Landing page Dashboard UI Mobile app Design polish Accessibility Web animation Product video Remove AI writing tells