Build Dynamic Dashboards with One Slash Command

You don't need to write code — or even fill anything in. Drop this template into your project, and Claude will ask you what you want to track, scan your files, and build a full HTML dashboard from your actual data. Type /my-dashboard any time you want a fresh snapshot.

dashboards/[name]-dashboard.html
Project DashboardGenerated 2 min ago
24
Tasks
18
Complete
2
Blocked
On track. 18 of 24 tasks complete this sprint. Email templates migrated. Two items blocked on API review.
Auth migrationDone
Email templatesDone
API rate limitsIn Progress
Dashboard v2Blocked

This is one example of how we think about making complex systems simple. At SiteWarming, we apply the same approach to turning dormant domains into living, discoverable assets.

Shameless Plug

OK Wait — Who Are We?

We're SiteWarming. We help people who buy domains at 2 AM actually do something with them. If you've got a portfolio of "I swear I'll build that someday" domains, we have opinions. And tools. Mostly tools.

Analyze Your Portfolio

Upload your domains. We'll tell you which ones have real potential, which are worth renewing, and which you should finally let go of. No judgment. (A little judgment.)

Run Free Analysis

Activate & Accelerate

Parked domains don't do anything. We turn them into living digital assets with AI-generated content and real SEO signals. Your domains, actually working.

See How It Works

Know Before You Sell

Thinking about selling? Find out if your domain is primed for maximum value — or if a little warming would make buyers fight over it first.

Check Sale Readiness

OK back to the good stuff

How It Works

Three things happen when you type your slash command. Claude handles all of them.

Step 1

Claude reads your files

Markdown status docs, JSON configs, git history, API responses — you tell it where to look in plain English.

Step 2

Extracts the data that matters

Counts, statuses, dates, health checks — structured exactly how you described it. No coding required.

Step 3

Builds a live HTML dashboard

A single self-contained file. Dark theme, status colors, collapsible sections. Opens in your browser automatically.

The Starter Template

Drop this file into .claude/commands/my-dashboard.md in your project and run it. You don't need to fill in the brackets yourself — Claude will look at your project, ask you what you want to track, and fill it in for you. That's the whole point.

my-dashboard.md

---
name: my-dashboard
description: Generate an HTML dashboard showing [what]. Opens in browser. Usage /my-dashboard
---

# [Name] Dashboard

Generate a self-contained HTML dashboard from project status files,
write it to `dashboards/[name]-dashboard.html`, and open it in the browser.

The entire file must work offline — inline all CSS and JS,
zero external dependencies (no CDN links, no Google Fonts, no external scripts).

## Step 1: Read Data Sources

Read ALL of these files (direct reads, no sub-agents):

1. **[Source 1]:** `[path]` -- extract [what]
2. **[Source 2]:** `[path]` -- extract [what]
3. **[Source 3]:** `[path]` -- extract [what]

If any file doesn't exist or can't be parsed, that panel shows
"Data unavailable" -- never fail.

For each data source file, check the last modified date (use `stat` or `git log -1`).
If a file hasn't been modified in more than 30 days, show a warning
next to that panel: "Source last updated [date] -- data may be stale."

### Filesystem verification (CRITICAL — status files go stale)

Status files lie. The filesystem is truth. Always verify counts against reality:

4. **[Countable thing]:** Count files in `[path]` — this is the TRUTH for "[metric]," override any status file claims
5. **[Another countable thing]:** Glob `[path]` — filesystem count is authoritative

### Integrity checks (reconciliation)

Cross-reference your index files against the filesystem:

6. **[Index] vs filesystem:** Flag any entry in [index file] that points to a non-existent path (broken link)
7. **Filesystem vs [Index]:** Flag any folder/file that exists but isn't listed in [index file] (orphaned)

## Step 2: Extract Structured Data

**[Source 1]:**
- [Data point 1]
- [Data point 2]
- Count by status: [STATUS_A], [STATUS_B], [STATUS_C]

**[Source 2]:**
- [Data point 1]
- [Data point 2]

## Step 3: Generate HTML

Write a single self-contained HTML file to `dashboards/[name]-dashboard.html`.
Inline all CSS and JS, zero external dependencies
(no CDN links, no Google Fonts, no external scripts).

### Design

- Dark background: `#0d1117`
- Card surfaces: `#161b22`
- Card borders: `#30363d`
- Text: `#e6edf3` (primary), `#8b949e` (secondary)
- Font: system monospace stack for headers, system sans-serif for body
- Status: `#3fb950` (done), `#e3a84e` (in progress), `#f85149` (blocked), `#8b949e` (inactive)

### Panels

**Header (full width):**
- "[Dashboard Name]" large monospace
- "Generated [date] at [time]"
- Summary: "X total | Y done | Z in progress"

**Panel 0: Attention Required (ONLY if items exist)**
- Integrity mismatches, stale sources, blocked items
- If nothing needs attention, DO NOT render this panel at all
- Red left border

**Panel 1: Summary (full width, prominent)**
- 2-3 plain-English sentences: what's the overall status?
- Derive this from the data below. Green left border if healthy, amber if attention needed, red if blocked.
- If action items exist, list them: "You should: [1] ... [2] ..."

**Panel 2: [Main View] (full width)**
- [Table/cards/progress bars]
- [Columns: field1, field2, status badge, notes]

**Panel 3: Two-column**
- **Left: [Category A]** -- [format]
- **Right: [Category B]** -- [format]

### JavaScript (inline)

- Relative time: "Generated X minutes ago" (auto-updates)
- Collapsible sections on header click
- Search/filter: text input that filters table rows by any column
- Column sorting: click column headers to sort ascending/descending
- No external dependencies

## Step 4: Open in Browser

```bash
mkdir -p dashboards
```

Then open the file:

```bash
if grep -qi microsoft /proc/version 2>/dev/null; then
  cmd.exe /c start "" "$(wslpath -w "$(pwd)/dashboards/[name]-dashboard.html" | sed 's|/|\\|g')"
elif [[ "$OSTYPE" == "darwin"* ]]; then
  open dashboards/[name]-dashboard.html
else
  xdg-open dashboards/[name]-dashboard.html 2>/dev/null
fi
```

## Quality Checklist

- [ ] File exists at `dashboards/[name]-dashboard.html`
- [ ] Opens in browser, no console errors
- [ ] Zero external dependencies (no CDN, no Google Fonts, no external scripts)
- [ ] All panels show data or "Data unavailable"
- [ ] Counts come from filesystem globs, NOT from status file text
- [ ] Integrity mismatches flagged (orphaned items, broken links)
- [ ] Stale sources (30+ days) show a warning badge
- [ ] Attention panel only renders when issues exist
- [ ] Timestamp accurate
- [ ] Counts match source data