跳到正文
cccskills
免费在 GitHub 公开

dashboard-creator

Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

中文简介正在准备中。当前显示原文说明。

实测评分 未实测

查看安装方法

包含的文件(5)

  • SKILL.md1.9 KB
  • assets/templates/base_template.html7.8 KB
  • assets/templates/dashboard_components.html14.5 KB
  • references/design_patterns.md10.8 KB
  • references/svg_library.md17.0 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Dashboard Creator

Create interactive HTML dashboards with KPI cards and charts.

When to Use

  • "Create dashboard for [metrics]"
  • "Show KPI visualization"
  • "Generate performance dashboard"
  • "Make analytics dashboard with charts"

Components

  1. KPI Cards: metric name, value, change %, trend icon
  2. Charts: bar/pie/line using SVG or CSS
  3. Progress Bars: completion indicators
  4. Data Tables: tabular data display

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>[Project] Dashboard</title>
  <style>
    body { font-family: system-ui; background: #f7fafc; }
    .kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .kpi-value { font-size: 36px; font-weight: bold; }
    .trend-up { color: #48bb78; }
    .trend-down { color: #e53e3e; }
  </style>
</head>
<body>
  <h1>[Dashboard Name]</h1>
  <div class="grid">
    <!-- KPI cards -->
    <!-- Charts -->
    <!-- Progress bars -->
  </div>
</body>
</html>

KPI Card Pattern

<div class="kpi-card">
  <div class="kpi-label">Revenue</div>
  <div class="kpi-value">$124K</div>
  <div class="trend-up">↑ 12.5%</div>
</div>

Chart Pattern (SVG Bar Chart)

<svg viewBox="0 0 400 300">
  <rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
  <rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
  <!-- bars for each data point -->
</svg>

Workflow

  1. Extract metrics and data
  2. Create KPI cards grid
  3. Generate charts (bar/pie/line) as SVG
  4. Add progress indicators
  5. Write to [name]-dashboard.html

Use semantic colors: green (positive), red (negative), blue (neutral).

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.

中文简介正在准备中。当前显示原文说明。

mhattingpete/claude-skills-marketplace6882026年7月25日 更新

Performs comprehensive codebase analysis covering architecture, code quality, security, performance, testing, and maintainability. Use when user wants to audit code quality, identify technical debt, find security issues, assess test coverage, or get a codebase health check.

中文简介正在准备中。当前显示原文说明。

mhattingpete/claude-skills-marketplace6882026年7月25日 更新

Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.

中文简介正在准备中。当前显示原文说明。

mhattingpete/claude-skills-marketplace6882026年7月25日 更新

Perform bulk code refactoring operations like renaming variables/functions across files, replacing patterns, and updating API calls. Use when users request renaming identifiers, replacing deprecated code patterns, updating method calls, or making consistent changes across multiple locations.

中文简介正在准备中。当前显示原文说明。

mhattingpete/claude-skills-marketplace6882026年7月25日 更新

Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving functions or classes between files, extracting code blocks, or inserting code at specific line numbers.

中文简介正在准备中。当前显示原文说明。

mhattingpete/claude-skills-marketplace6882026年7月25日 更新

Generates comprehensive documentation explaining how a codebase works, including architecture, key components, data flow, and development guidelines. Use when user wants to understand unfamiliar code, create onboarding docs, document architecture, or explain how the system works.

中文简介正在准备中。当前显示原文说明。

mhattingpete/claude-skills-marketplace6882026年7月25日 更新

查看 mhattingpete 的全部技能

报告此技能的问题