Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Add NanoClaw Dashboard (add-dashboard)

Installs and wires a local monitoring dashboard into a NanoClaw project, showing agent groups, sessions, token usage and live logs.

Dev & CodingIntermediate★ 30,829⑂ 12,827AI score 7/10Last updated: Sep 22, 2026

What it does

  • Installs the @nanoco/nanoclaw-dashboard npm package and copies a pusher module into src/ that POSTs DB snapshots every 60s and tails logs every 2s.
  • Guides a single, colocated code block inside main() in src/index.ts (dynamic import + await startDashboard()) so the integration is minimal and easy to remove.
  • Ships two tests: a behavior test (posts a real snapshot to a fake dashboard) and an AST-based wiring test that fails if the edit is missing or misplaced.
  • Covers secret generation, .env variables (DASHBOARD_SECRET, DASHBOARD_PORT), build-before-test ordering, service restart on Linux/macOS, and a curl smoke check.
  • Includes a dashboard page reference table, troubleshooting tips, and a clean removal procedure.

Who it's for

  • Operators running NanoClaw who want visibility into agent groups, sessions and channels.
  • Anyone tracking token usage, cache hit rate and context window pressure.
  • Developers comfortable with TypeScript, pnpm and vitest.

Examples

  1. First-time setup — ask "add the monitoring dashboard" and the skill installs the package, edits index.ts, builds, runs both tests and restarts the service.
  2. Health check — verify with curl -s http://localhost:3100/api/status and an authenticated /api/overview call, then open /dashboard in a browser.
  3. Clean rollback — remove the pusher files, uninstall the package, delete the main() block and the two env vars, then rebuild.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/nanocoai/nanoclaw/HEAD/.claude/skills/add-dashboard/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .claude/skills/add-dashboard folder from the GitHub repo nanocoai/nanoclaw into my ~/.claude/skills/add-dashboard/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/nanocoai/nanoclaw.git /tmp/nanoclaw && mkdir -p ~/.claude/skills && cp -r /tmp/nanoclaw/.claude/skills/add-dashboard ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and clone the repo: git clone https://github.com/nanocoai/nanoclaw.git
  2. Create the skills folder: mkdir -p ~/.claude/skills
  3. Copy the skill: cp -r nanoclaw/.claude/skills/add-dashboard ~/.claude/skills/ (make sure the bundled resources/ files came along).
  4. Start Claude Code from the root of your own NanoClaw project.
  5. Invoke the skill with /add-dashboard or by asking to "add a monitoring dashboard".
  6. Follow the steps: add DASHBOARD_SECRET and DASHBOARD_PORT=3100 to .env, run pnpm run build, run the two tests, then restart the service.
  7. Open http://localhost:3100/dashboard in your browser to confirm it's live.
View source on GitHub ↗License: MIT