メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/gquthier/CLAWG --skill obsidian-dashboardコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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.
SOC 職業分類に基づく
SKILL.md を表示中
| 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;
}
* { :; :; :border-box; }
{ :(--sans); :(--bg); :(--text); :; }
{ :; :; :;
:(,(--accent),(--accent2));
-webkit-:text; -webkit---:transparent; }
{ :; :(--text2); :; }
{ :grid; :(auto-fit,(,fr)); :; :; }
{ :(--card); : solid (--border); :; :; }
{ :; :uppercase; :; :(--muted); :; }
{ :; :; :(--mono); }
{ :(--green); }
{ :(--accent); }
{ :(--orange); }
{ :(--cyan); }
{ :; :; : ; }
{ :(--border); :; :; : ; :hidden; }
{ :; :; :(,(--accent),(--green)); :width ; }
{ :; :collapse; }
{ ; :; :uppercase; :; :(--muted);
: ; : solid (--border); }
{ : ; :; : solid (,,,); }
{ :(--card); }
{ :inline-block; : ; :; :; :; :(--mono); }
{ :(,,,); :(--green); }
{ :(,,,); :(--accent); }
{ :(,,,); :(--orange); }
{ :(,,,); :(--red); }
{ : solid (--border); :; :; }
{ :; :relative; }
{ :; :absolute; :-; :; :; :;
:; :(--accent); : solid (--bg); }
{ :; :(--muted); :(--mono); }
{ :; :; }
{ :; :; :(--muted); :center; :(--mono); }
Overall Progress
Milestones
StatusMilestoneTargetNotes
Tasks
StatusTaskAgentPriority
Timeline
CLAWG Dashboard Last updated:
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