supabase-dashboard-builder
Build admin dashboards and command centers backed by Supabase REST API with D3.js force graphs, Chart.js visualizations, and vanilla JS. Use when creating data exploration UIs, admin panels, mission control dashboards, or any visualization that reads from Supabase tables. No React/Vue required — pure HTML + JS + CSS with a shared dark-theme shell.
Why use this skill?
Build lightning-fast admin dashboards and data visualizations with Supabase, FastAPI, and vanilla JS. No build steps, no frameworks, just pure performance.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/brandonwadepackard-cell/supabase-dashboard-builderWhat This Skill Does
The supabase-dashboard-builder is a framework-agnostic architectural pattern for rapidly deploying mission-control dashboards and admin interfaces. Instead of heavy React or Vue setups, it leverages a thin FastAPI proxy to mediate communication between your frontend and Supabase. By utilizing a shared dark-themed shell (JS/CSS), it provides a consistent, high-performance UI for data visualization using D3.js and Chart.js. The skill focuses on pure HTML/JS implementations, ensuring zero-build-step deployment within your existing FastAPI static file server.
Installation
You can install the skill using the ClawHub CLI:
clawhub install openclaw/skills/skills/brandonwadepackard-cell/supabase-dashboard-builder
Ensure your environment variables SUPABASE_URL and SUPABASE_SERVICE_KEY are configured in your FastAPI backend to enable secure proxy access.
Use Cases
- AI Agent Monitoring: Visualize agent throughput, active tool usage, and real-time status updates.
- Data Exploration: Build searchable, sortable tables for inspecting logs, knowledge vault entries, or workflow histories.
- Mission Control: Centralize infrastructure health monitoring by pulling metrics from Supabase tables into interactive D3.js force graphs.
- Internal Tooling: Quickly spin up internal admin panels for CRUD operations on sensitive application data without the overhead of enterprise frameworks.
Example Prompts
- "Build a new admin page for the 'skills' table using the supabase-dashboard-builder shell; include a search bar and a table that lists skill names and their categories."
- "Create a dashboard visualization that uses Chart.js to graph daily activity from the 'workflows' table, grouping data by status and date."
- "Modify my 'agents.html' page to include a D3 force graph representing relationships between agents and their associated knowledge vault items."
Tips & Limitations
- Performance: Always use targeted select queries (e.g.,
?select=id,name) in your API requests to prevent timeouts caused by fetching large BLOBs or vector embedding columns. - Security: The FastAPI proxy strictly enforces an 'allowed' table list; ensure you audit this list when adding new database tables to your project.
- Complexity: Since this tool uses vanilla JavaScript, complex state management is not handled natively. For highly state-dependent UIs, consider building multiple simplified pages rather than one complex single-page application.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-brandonwadepackard-cell-supabase-dashboard-builder": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: network-access, external-api
Related Skills
domain-email-forwarding
Set up email forwarding for custom domains to receive verification codes, password resets, and other emails at a domain you own but don't actively use for email. Covers GoDaddy, Namecheap, Cloudflare Email Routing, and ImprovMX. Use when recovering accounts linked to inactive domain emails, setting up catch-all forwarding, or routing domain email to Gmail/Outlook without paying for email hosting.
platform-api-connector
Connect to social media and content platform APIs by navigating developer portals, creating apps, obtaining OAuth tokens, and storing credentials. Covers Facebook Graph API, Instagram Business API, YouTube Data API, Twitter/X API v2, and TikTok Content Posting API. Use when setting up API access for any social platform, refreshing expired OAuth tokens, or debugging authentication flows.
hume-evi-langgraph
Integrate Hume EVI voice AI with LangGraph using interrupt/resume patterns. Use when building voice-based AI agents that need Twilio call handling, Hume EVI persona creation, transcript fetching with emotion extraction, and LangGraph state management across the call lifecycle. Covers dynamic Hume config creation, TwiML generation, webhook handling, chat_group event fetching, and emotion timeline extraction.
supabase-checkpointer
Durable LangGraph checkpointing via Supabase REST API (PostgREST) — no direct Postgres connection needed. Use when deploying LangGraph graphs to ephemeral platforms (Railway, Fly, Cloud Run) where in-memory state is lost on redeploy, and you need interrupt/resume to survive process death. Works with any Supabase project using the existing service role key.
social-media-platform
Build a plugin-based social media management platform with multi-platform publishing, content calendar, brand voices, AI content generation via LangGraph, and analytics. Use when building social media tools, content scheduling systems, or multi-platform publishing pipelines. Covers Facebook, Instagram, YouTube, Twitter/X, TikTok integration patterns.