interactive-dashboard
Interactive web dashboards: stock trackers, sector heatmaps, portfolio monitors — served via preview URL
npx skills add ginlix-ai/LangAlpha --skill interactive-dashboard --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
The skill enables building interactive web dashboards inside the sandbox and exposing them to the user via GetPreviewUrl. It covers dashboards, trackers, monitors, and live visualizations that require a running server and potential routing or server-side logic. It differentiates between a live served app vs. a self-contained HTML report and guides the user toward a running server accessible via a preview URL.
How it works
- It instructs to choose a tier based on complexity: Simple (self-contained HTML with a server), FastAPI + HTML (live data with API routes and static files), or Complex (FastAPI + Vite/React multi-page app).
- It provides guidance on serving: start a server using either a simple Python http.server or a Bash script (start.sh) for more complex setups, and then verify the server is listening on port 8050.
- It instructs to use GetPreviewUrl(port, command, title) to publish the running dashboard and persist the command for restart recovery.
- It prescribes a workflow for data fetching, processing with pandas, and preparing frontend data (e.g., chart_data as JSON), followed by building the dashboard in one of the tiers.
- It outlines verification steps: a syntax check for embedded scripts, CSP checks, and browser verification via Playwright to catch runtime errors.
When to use it
Use this skill for a live, served web app that needs a running server and live data refresh, including filtering, routing, and interactivity at the component level. It is appropriate when the dataset is too large to embed in a single HTML file or when the user explicitly requests a preview URL or web app.
What it can touch
- Tools and commands: GetPreviewUrl is a platform-level tool invoked to publish the preview URL. The skill references starting servers via: "python -m http.server 8050 --bind 0.0.0.0" or "bash work/dashboard/start.sh". It emphasizes using run_in_background with the Bash tool for server processes.
- It mentions data-fetching and processing steps using Python packages (e.g., pandas) and MCP/YF data sources, but any operations are described at a high level in the workflow.
Caveats
- The skill enforces a live server approach; it should not be used for self-contained HTML reports. It requires a server that remains running for the preview URL via GetPreviewUrl.
- It documents safety checks (syntax, CSP) and verification steps, but does not guarantee a specific outcome beyond those checks.
- It emphasizes idempotent commands for restart longevity and relies on sandbox persistence of files, processes, and Docker images.
# Interactive Dashboard Build interactive web dashboards inside the sandbox and expose them to the user via `GetPreviewUrl`. Use this skill for any request involving dashboards, trackers, monitors, live visualizations, or interactive web apps. ## When to Use Use this skill for a **live, served web app** — one that needs a running server, not a single file: - User asks for a **dashboard**, **tracker**, or **monitor** that **refreshes live data** (polling, auto-update) - The app needs **server-side logic** — filtering/screening over a large dataset, on-demand fetches, computed endpoints - **Multi-page / routed** apps, or anything that needs React-level component interactivity - The dataset is **too large to embed** in a single HTML file - User explicitly says "preview", "web view", "web app", or wants it running at a URL **Do NOT use if:** - User wants a **self-contained HTML report** — even an *interactive* one (sortable tables, tabs, hover/zoom charts) over a **data snapshot**. That's `.agents/skills/html-report/SKILL.md`: one file in `results/`, keepable, printable, PDF-exportable, share-linkable. Interactivity by itself does **not** require a dashboard. - User wants a **static ch
- When to Use
- Dashboard vs. HTML Report
- Architecture
- CSP / Iframe Safety
- How Preview Serving Works
- Sandbox Capabilities
- Workflow
- Step 1: Clarify Scope
- Step 2: Fetch Data
- Step 3: Process Data
- Step 4: Build Dashboard
- Step 5: Verify Before Serving
- Step 6: Serve & Expose
- Step 7: Iterate
Simple tier — Bash tool with run_in_background=true cd work/<task> && python -m http.server 8050 --bind 0.0.0.0 Docker tiers — Bash tool with run_in_background=true cd work/<task> && bash start.sh for i in $(seq 1 15); do curl -sf http://127.0.0.1:8050/ > /dev/null && echo "Server ready" && exit 0 || sleep 1; done; echo "FAIL"; exit 1 fuser -k 8050/tcp 2>/dev/null || true cd frontend && npm install --prefer-offline && npm run build && cd .. cd server && uvicorn main:app --host 0.0.0.0 --port 8050
What does the interactive-dashboard skill do?
Interactive web dashboards: stock trackers, sector heatmaps, portfolio monitors — served via preview URL
How do I install it?
Run `npx skills add ginlix-ai/LangAlpha --skill interactive-dashboard --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ginlix-ai/LangAlpha, a repository with 1,604 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.