メニュー
Create interactive HTML dashboards for projects inside the Obsidian Second Brain vault. Generates self-contained HTML files with dark theme, progress tracking, milestone timelines, task management, and optional chart visualizations.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Extract text from PDFs and scanned documents. Use web_extract for remote URLs, pymupdf for local text-based PDFs, marker-pdf for OCR/scanned docs. For DOCX use python-docx, for PPTX see the powerpoint skill.
Gmail, Calendar, Drive, Contacts, Sheets, and Docs integration via Python. Uses OAuth2 with automatic token refresh. No external binaries needed — runs entirely with Google's Python client libraries in the clawg venv.
Delegate coding tasks to Blackbox AI CLI agent. Multi-model agent with built-in judge that runs tasks through multiple LLMs and picks the best result. Requires the blackbox CLI and a Blackbox AI API key.
Query Base (Ethereum L2) blockchain data with USD pricing — wallet balances, token info, transaction details, gas analysis, contract inspection, whale detection, and live network stats. Uses Base RPC + CoinGecko. No API key required.
Query Solana blockchain data with USD pricing — wallet balances, token portfolios with values, transaction details, NFTs, whale detection, and live network stats. Uses Solana RPC + CoinGecko. No API key required.
Control Blender directly from clawg via socket connection to the blender-mcp addon. Create 3D objects, materials, animations, and run arbitrary Blender Python (bpy) code. Use when user wants to create or modify anything in Blender.
| name | obsidian-dashboard |
| description | Create interactive HTML dashboards for projects inside the Obsidian Second Brain vault. Generates self-contained HTML files with dark theme, progress tracking, milestone timelines, task management, and optional chart visualizations. |
| version | 1.0.0 |
| author | CLAWG |
| license | MIT |
| metadata | {"clawg":{"tags":["Obsidian","Dashboard","HTML","Visualization","Project Management"],"related_skills":["note-taking","project-tracking"]}} |
Create interactive HTML project dashboards inside the Obsidian Second Brain vault.
Proactive behavior: When you detect a long-term project, propose creating a dashboard. Say something like: "This project is growing — I can create an interactive dashboard in your Second Brain to track progress. Want me to set one up?"
All dashboards go in the dashboard/ folder at the vault root:
vault/
└── dashboard/
├── command-center.html ← Global CLAWG Command Center (pre-installed)
├── my-project.html ← Per-project dashboards you create
└── another-project.html
Dashboards are HTML files. Obsidian needs a plugin to render them inline:
file:// protocol)localhost if using the CLAWG serverobsidian-html-plugin) by nuthrash.html file in the vault — it opens as a tabBALANCE_MODE for interactive dashboardsCreate a markdown note that embeds the dashboard:
# Project Dashboard
<iframe src="dashboard/my-project.html" width="100%" height="900" style="border:none; border-radius:8px;"></iframe>
Or with the embed-html plugin:
```embedhtml
path: dashboard/my-project.html
height: 900
```
Run clawg dashboard to serve all dashboards with a local API that provides live data.
Collect from the user or infer from context:
Use the template below as a starting point. Customize sections based on what the project needs.
File naming: dashboard/<project-slug>.html (lowercase, hyphens, no spaces)
After creating the dashboard, tell the user:
dashboard/<name>.htmlclawg dashboard to view it in browserWhen you work on the project in future sessions:
The template below is a complete, self-contained HTML file. Copy and customize it.
Key sections to customize:
PROJECT_CONFIG object at the top — project name, dates, descriptionMILESTONES array — add/remove milestonesTASKS array — current task listMETRICS array — KPIs and their valuesTIMELINE array — chronological events<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PROJECT_NAME}} — Dashboard</title>
<style>
:root {
--bg: #0a0a0f;
--bg2: #12121a;
--card: #1a1a2e;
--border: #2a2a4a;
--accent: #6c5ce7;
--accent2: #a29bfe;
--green: #00e676;
--red: #ff5252;
--orange: #ffab40;
--cyan: #18ffff;
--text: #e8e8f0;
--text2: #8888aa;
--muted: #555577;
--mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); padding:24px; }
h1 { font-size:24px; font-weight:800; margin-bottom:4px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
-webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.subtitle { font-size:13px; color:var(--text2); margin-bottom:24px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; }
.card-label { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:4px; }
.card-value { font-size:28px; font-weight:700; font-family:var(--mono); }
.card-value.green { color:var(--green); }
.card-value.purple { color:var(--accent); }
.card-value.orange { color:var(--orange); }
.card-value.cyan { color:var(--cyan); }
h2 { font-size:16px; font-weight:700; margin:24px 0 12px; }
.progress-bar { background:var(--border); border-radius:4px; height:8px; margin:8px 0 16px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--green)); transition:width 0.5s; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted);
padding:8px 12px; border-bottom:1px solid var(--border); }
td { padding:8px 12px; font-size:13px; border-bottom:1px solid rgba(42,42,74,0.3); }
tr:hover td { background:var(--card); }
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; font-family:var(--mono); }
.badge-done { background:rgba(0,230,118,0.15); color:var(--green); }
.badge-active { background:rgba(108,92,231,0.15); color:var(--accent); }
.badge-pending { background:rgba(255,171,64,0.15); color:var(--orange); }
.badge-blocked { background:rgba(255,82,82,0.15); color:var(--red); }
.timeline { border-left:2px solid var(--border); margin-left:12px; padding-left:20px; }
.tl-item { margin-bottom:16px; position:relative; }
.tl-item::before { content:''; position:absolute; left:-25px; top:4px; width:10px; height:10px;
border-radius:50%; background:var(--accent); border:2px solid var(--bg); }
.tl-date { font-size:11px; color:var(--muted); font-family:var(--mono); }
.tl-text { font-size:13px; margin-top:2px; }
.footer { margin-top:32px; font-size:11px; color:var(--muted); text-align:center; font-family:var(--mono); }
</style>
</head>
<body>
<h1 id="title"></h1>
<div class="subtitle" id="subtitle"></div>
<!-- Metrics Cards -->
<div class="grid" id="metrics-grid"></div>
<!-- Progress -->
<h2>Overall Progress</h2>
<div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
<!-- Milestones -->
<h2>Milestones</h2>
<table id="milestones-table">
<thead><tr><th>Status</th><th>Milestone</th><th>Target</th><th>Notes</th></tr></thead>
<tbody></tbody>
</table>
<!-- Tasks -->
<h2>Tasks</h2>
<table id="tasks-table">
<thead><tr><th>Status</th><th>Task</th><th>Agent</th><th>Priority</th></tr></thead>
<tbody></tbody>
</table>
<!-- Timeline -->
<h2>Timeline</h2>
<div class="timeline" id="timeline"></div>
<div class="footer">
CLAWG Dashboard — Last updated: <span id="updated"></span>
</div>
<script>
// ═══════════════════════════════════════
// CUSTOMIZE THIS SECTION FOR YOUR PROJECT
// ═══════════════════════════════════════
const PROJECT = {
name: "{{PROJECT_NAME}}",
description: "{{PROJECT_DESCRIPTION}}",
startDate: "{{START_DATE}}",
targetDate: "{{TARGET_DATE}}",
};
const METRICS = [
{ label: "Progress", value: "{{PROGRESS}}%", color: "green" },
{ label: "Tasks Done", value: "{{DONE}}/{{TOTAL}}", color: "purple" },
{ label: "Days Left", value: "{{DAYS_LEFT}}", color: "orange" },
{ label: "Agents", value: "{{AGENT_COUNT}}", color: "cyan" },
];
const MILESTONES = [
// { status: "done|active|pending", name: "...", target: "YYYY-MM-DD", notes: "..." },
{ status: "done", name: "Project kickoff", target: "{{START_DATE}}", notes: "Initial setup complete" },
{ status: "active", name: "Core implementation", target: "{{MID_DATE}}", notes: "In progress" },
{ status: "pending", name: "Testing & QA", target: "{{QA_DATE}}", notes: "" },
{ status: "pending", name: "Launch", target: "{{TARGET_DATE}}", notes: "" },
];
const TASKS = [
// { status: "done|active|pending|blocked", name: "...", agent: "...", priority: "critical|high|medium|low" },
];
const TIMELINE = [
// { date: "YYYY-MM-DD", text: "..." },
{ date: "{{START_DATE}}", text: "Project created" },
];
// ═══════════════════════════════════════
// RENDERING (do not edit below)
// ═══════════════════════════════════════
document.getElementById('title').textContent = PROJECT.name;
document.getElementById('subtitle').textContent =
`${PROJECT.description} — Started ${PROJECT.startDate}` +
(PROJECT.targetDate ? ` — Target ${PROJECT.targetDate}` : '');
// Metrics
const grid = document.getElementById('metrics-grid');
METRICS.forEach(m => {
grid.innerHTML += `<div class="card"><div class="card-label">${m.label}</div><div class="card-value ${m.color}">${m.value}</div></div>`;
});
// Progress bar
const done = MILESTONES.filter(m => m.status === 'done').length;
const pct = Math.round((done / Math.max(MILESTONES.length, 1)) * 100);
document.getElementById('progress-fill').style.width = pct + '%';
// Milestones
const mTbody = document.querySelector('#milestones-table tbody');
MILESTONES.forEach(m => {
mTbody.innerHTML += `<tr>
<td><span class="badge badge-${m.status}">${m.status}</span></td>
<td style="font-weight:600">${m.name}</td>
<td style="font-family:var(--mono);font-size:12px">${m.target}</td>
<td style="color:var(--text2)">${m.notes}</td>
</tr>`;
});
// Tasks
const tTbody = document.querySelector('#tasks-table tbody');
if (TASKS.length === 0) {
tTbody.innerHTML = '<tr><td colspan="4" style="color:var(--muted);text-align:center;padding:20px">No tasks added yet</td></tr>';
} else {
TASKS.forEach(t => {
tTbody.innerHTML += `<tr>
<td><span class="badge badge-${t.status}">${t.status}</span></td>
<td style="font-weight:600">${t.name}</td>
<td style="font-family:var(--mono);font-size:12px">${t.agent}</td>
<td><span class="badge badge-${t.priority === 'critical' ? 'blocked' : t.priority === 'high' ? 'pending' : 'active'}">${t.priority}</span></td>
</tr>`;
});
}
// Timeline
const tl = document.getElementById('timeline');
TIMELINE.forEach(e => {
tl.innerHTML += `<div class="tl-item"><div class="tl-date">${e.date}</div><div class="tl-text">${e.text}</div></div>`;
});
// Updated timestamp
document.getElementById('updated').textContent = new Date().toLocaleString();
</script>
</body>
</html>
dashboard/<project-slug>.html (lowercase, hyphens)PROJECT.nameThe template uses the CLAWG dark theme. Available badge classes:
badge-done (green) — completed itemsbadge-active (purple) — in progressbadge-pending (orange) — not startedbadge-blocked (red) — blockedReplace the METRICS array values. Common metrics:
For projects that need charts, add Chart.js via CDN:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Then create <canvas> elements and initialize charts in the script section.
When working on the project in subsequent sessions:
MILESTONES, TASKS, TIMELINE, and METRICS arrays