ワンクリックでManusで任意のスキルを実行

dashboard-creator

スター4

フォーク1

更新日2026年1月15日 15:38

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.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

rm2thaddeus

rm2thaddeus/Aitor_Skills

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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

KPI Cards: metric name, value, change %, trend icon
Charts: bar/pie/line using SVG or CSS
Progress Bars: completion indicators
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

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

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

このリポジトリの他の Skills

同じリポジトリ

skills-summarizer

rm2thaddeus/Aitor_Skills

Summarize skill usage logs into JSON and HTML upkeep reports, and propose conservative skill improvements with human approval. Use when asked to digest skill telemetry, generate upkeep summaries, or produce skill usage stats.

2026-01-264

skills-updater

rm2thaddeus/Aitor_Skills

Improve existing skills in this repo by proposing and applying minimal, reviewable edits based on observed gaps, user corrections, or skill polish candidates. Use when asked to upgrade, refine, or maintain skills over time.

2026-01-184

git-pushing

rm2thaddeus/Aitor_Skills

Stage, commit, and push git changes with conventional commit messages. Use when user wants to commit and push changes, mentions pushing to remote, or asks to save and push their work. Also activates when user says "push changes", "commit and push", "push this", "push to github", or similar git workflow requests.

2026-01-174

deep-research

rm2thaddeus/Aitor_Skills

Execute autonomous multi-step research using Google Gemini Deep Research Agent. Use for: market analysis, competitive landscaping, literature reviews, technical research, due diligence. Takes 2-10 minutes but produces detailed, cited reports. Costs $2-5 per task.

2026-01-154

postgres

rm2thaddeus/Aitor_Skills

Execute read-only SQL queries against multiple PostgreSQL databases. Use when: (1) querying PostgreSQL databases, (2) exploring database schemas/tables, (3) running SELECT queries for data analysis, (4) checking database contents. Supports multiple database connections with descriptions for intelligent auto-selection. Blocks all write operations (INSERT, UPDATE, DELETE, DROP, etc.) for safety.

2026-01-154

architecture-diagram-creator

rm2thaddeus/Aitor_Skills

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.

2026-01-154

name	dashboard-creator
description	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.

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

KPI Cards: metric name, value, change %, trend icon
Charts: bar/pie/line using SVG or CSS
Progress Bars: completion indicators
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

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

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