菜单
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