skills.rest
spike-land-ai
spike-land-aiOFFICIAL
Explore all skills by this author →
GitHub

spike-land-dashboard

Build parameterized React dashboards that render from URL query parameters in iframes.

Updated Aug 27, 2026
Search Tags:#react#dashboard#data-visualization#iframe#web-app#url-params#codespace
One-click install
npx skills add https://github.com/spike-land-ai/spike.land --skill spike-land-dashboard-spike-land-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spike-land-dashboard
Source: https://github.com/spike-land-ai/spike.land/tree/main/.claude/skills/spike-land-dashboard
Command: npx skills add https://github.com/spike-land-ai/spike.land --skill spike-land-dashboard-spike-land-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline building and sharing parameterized dashboards by driving UI from URL parameters and embedding visuals in iframes on spike.land.

Core Features & Use Cases

  • Parameterized dashboards: Build dashboards that adapt based on URL-encoded data such as title, items, and view mode.
  • Embed and share: Surface live visuals within iframes across codespaces and share views via URL.
  • Safe defaults & hydration: Components provide sensible fallback values, read window.location.search on mount, and synchronize state back to the URL.

Quick Start

Create a dashboard URL with encoded params and load it in testing.spike.land live iframe to render the app.

Frequently Asked Questions about spike-land-dashboard

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

FAQPage Schema
How do I build a parameterized React dashboard that syncs with URL parameters?▼

Build parameterized React dashboards by creating components that parse window.location.search, provide default fallbacks, and maintain URL synchronization with user interactions. This encodes dashboard state directly into the URL for easy sharing.

How does URL parameter synchronization work for React data visualization dashboards?▼

URL parameter synchronization works by having React components read window.location.search on mount and update the URL as users interact. This ensures the dashboard state remains shareable and persistent across iframe embeds.

Can I embed a React web app inside an iframe on spike.land codespaces?▼

Yes, you can embed React web apps inside an iframe on spike.land codespaces. The dashboard ingests data via URL query parameters and renders live data visualizations safely within the embedded iframe environment.

What is the best way to share live data visualization views from a React dashboard?▼

The best way to share live data visualization views is encoding the dashboard state into URL parameters. Users customize the view through URL query parameters and share the resulting URL to render the exact state in an iframe.

Do I need React components with default fallbacks to prevent dashboard errors from missing URL parameters?▼

Yes, you need React components with safe default fallbacks to prevent dashboard errors from missing URL parameters. These components hydrate with sensible fallback values when required parameters are absent from window.location.search.

Related Skills

Explore More Software Engineering Skills→
sanchezx1sanchezx1

zod-schema-validator

Validate incoming data with Zod schemas in services and API routes.

Community
Intermediate
wsimmondswsimmonds
109

nextjs-pathname-id-fetch

Fetch and render item data from URL parameters in Next.js app directory dynamic routes.

Community
Intermediate
mattwoodcomattwoodco
3

ai-generative-ui

Render AI tool outputs as interactive React components in chat streams.

Community
Intermediate
Aken-TeamsAken-Teams

Interactive Web Page Generator

Generate a self-contained HTML dashboard with inline charts and CDN libraries.

Official
Advanced