🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
πŸ¦€ ClawHub

Dashboard

by @ivangdavila

Build custom dashboards from any data source with local hosting and visual QA loops.

Versionv1.0.1
Downloads3,530
Stars⭐ 4
TERMINAL
clawhub install dashboard

πŸ“– About This Skill


name: Dashboard slug: dashboard version: 1.0.1 description: Build custom dashboards from any data source with local hosting and visual QA loops. changelog: User-driven data source model, explicit credential handling metadata: {"clawdbot":{"emoji":"πŸ“Š","requires":{"bins":[]},"os":["linux","darwin","win32"]}}

Data Storage

~/dashboard/
β”œβ”€β”€ registry.json           # Dashboard index
β”œβ”€β”€ {name}/
β”‚   β”œβ”€β”€ config.json         # Layout, widgets
β”‚   β”œβ”€β”€ data.json           # Current data
β”‚   └── index.html          # Dashboard page

Create on first use: mkdir -p ~/dashboard

Scope

This skill:

  • βœ… Generates static HTML dashboards
  • βœ… Creates fetch scripts user can run
  • βœ… Stores dashboards in ~/dashboard/
  • User-driven model:

  • User specifies data sources
  • User provides API credentials via environment
  • User runs fetch scripts (cron or manual)
  • Skill generates HTML and fetch scripts
  • This skill does NOT:

  • ❌ Access credentials without user providing them
  • ❌ Run automated fetches (user's cron runs scripts)
  • ❌ Scrape services without user consent
  • Quick Reference

    | Topic | File | |-------|------| | Data source patterns | sources.md | | Visual design rules | design.md | | Widget templates | widgets.md |

    Core Rules

    1. User Provides Data

    When creating a dashboard:
    User: "Dashboard for my Stripe revenue"
    Agent: "I'll create a fetch script. Set STRIPE_API_KEY 
            in your environment, then run the script."
    β†’ Generates: ~/dashboard/stripe/fetch.sh
    β†’ User adds to cron: */15 * * * * ~/dashboard/stripe/fetch.sh
    

    2. Architecture

    [User's Cron] β†’ [fetch.sh] β†’ [data.json] β†’ [index.html]
                        ↓
                  Uses $API_KEY from env
    

    Agent generates scripts. User runs them.

    3. Fetch Script Template

    #!/bin/bash
    

    Requires: STRIPE_API_KEY in environment

    curl -s -u "$STRIPE_API_KEY:" \ https://api.stripe.com/v1/balance \ | jq '.' > ~/dashboard/stripe/data.json

    4. Visual QA (Before Delivery)

  • Open in browser, take screenshot
  • Check: no overlap, readable fonts (β‰₯14px), good contrast
  • If issues β†’ fix β†’ repeat
  • Only deliver after visual validation
  • 5. Design Defaults

    | Element | Value | |---------|-------| | Background | #0f172a (dark) / #f8fafc (light) | | Text | #e2e8f0 (dark) / #1e293b (light) | | Spacing | 16px, 24px, 32px | | Corners | 8px | | KPI | 48-72px number, 14px label |

    6. Security

  • Credentials via env vars, never in files
  • Dashboards on 127.0.0.1 by default
  • No PII in displayed data
  • User adds auth if exposing to network