skills.rest
zerdos
zerdosCOMMUNITY
Explore all skills by this author →
GitHub

spike-land-dashboard

Create React dashboards that render data from URL search parameters.

Updated Aug 27, 2026
Search Tags:#data visualization#React#TypeScript#dashboard#iframe#URL parameters#parameterized apps
One-click install
npx skills add https://github.com/zerdos/spike-land-nextjs --skill spike-land-dashboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spike-land-dashboard
Source: https://github.com/zerdos/spike-land-nextjs/tree/main/.claude/skills/spike-land-dashboard
Command: npx skills add https://github.com/zerdos/spike-land-nextjs --skill spike-land-dashboard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Spike Land Dashboard provides a straightforward way to create live React dashboards that can receive structured data via URL search parameters. It enables embedding dashboards in iframes and sharing data-rich views without backend state, improving collaboration and repeatability.

Core Features & Use Cases

  • Create dashboards that read URL search parameters (title, items, view) and initialize state accordingly.
  • Sync state changes back to the URL for shareable, bookmarkable views.
  • Use cases: product metrics dashboards, experiment result viewers, and lightweight data exploration tools.

Quick Start

  1. Implement a new dashboard component that reads URL parameters and renders a UI.
  2. Use codespace_update to push the code to your codespace.
  3. Link the app with a descriptive name and description using codespace_link_app.
  4. Build an iframe URL with encoded params: title, items, view.

Frequently Asked Questions about spike-land-dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a React dashboard driven by URL search parameters?▼

Spike Land Dashboard lets you create live React dashboards that receive structured data via URL search parameters, enabling iframe embedding and shareable data-rich views without backend state.

How do I embed a live React dashboard in an iframe using URL parameters?▼

You build an iframe URL with encoded parameters (title, items, view) targeting testing.spike.land/live/{codespaceId}, allowing you to embed live parameterized React dashboards for metrics or experiment viewers.

Does this approach require a backend to share interactive dashboard views?▼

No backend is needed. The dashboard reads URL search parameters with safe fallbacks and synchronizes state back to the URL, enabling shareable, bookmarkable data views without server-side state management.

Can I use TypeScript with React to build parameterized apps on spike.land?▼

Yes, the Skill requires React and TypeScript to build parameterized dashboards that parse URL search parameters with safe fallbacks, ensuring type-safe state synchronization within spike.land codespaces.

What is the best way to share lightweight data exploration tools without backend state?▼

The best way is building a parameterized React app that parses URL search parameters and syncs state changes back to the URL, producing shareable, bookmarkable data exploration views without backend state.

How do I deploy a React dashboard to my spike.land codespace?▼

You implement a dashboard component, use codespace_update to push code, link it with codespace_link_app, then build an iframe URL with encoded params at testing.spike.land/live/{codespaceId} to deploy.

Related Skills

Explore More Software Engineering Skills→
feed-mobfeed-mob
1

url-parameter-parser

Extract URL query parameters from CSV files into new columns.

Official
Intermediate
shadowrock-ioshadowrock-io

signnow-embedded-editor

Embed SignNow's document editor in an iframe for in-app field placement and configuration.

Official
Intermediate
ButaniumButanium
13

write-report

Convert experiment data into an interactive Quarto report project.

Community
Advanced
smnandresmnandre
166

live-component

Build interactive server-rendered Symfony UX components with LiveProp and LiveAction.

Community
Advanced