skills.rest
SmileAfterBurn
SmileAfterBurnCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-data-apps

Build data dashboards and interactive reports with React, Vite, or Streamlit on GCP data sources.

Updated Aug 26, 2026
Search Tags:#data visualization#react#dashboard#gemini#streamlit#bigquery#chat interface
One-click install
npx skills add https://github.com/SmileAfterBurn/pani-dumka-ai --skill building-data-apps-smileafterburn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-data-apps
Source: https://github.com/SmileAfterBurn/pani-dumka-ai/tree/main/.gemini/skills/building-data-apps
Command: npx skills add https://github.com/SmileAfterBurn/pani-dumka-ai --skill building-data-apps-smileafterburn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires express, cors, @google-cloud/geminidataanalytics, fastapi, pydantic, and includes references (resource) components.

What problem does it solve? Building data-centric web applications requires choosing the right framework, applying consistent design standards, and wiring up backend data queries—work that is repetitive and error-prone when done from scratch. This Skill guides the creation of dashboards and interactive reports connected to GCP data sources like BigQuery, with an optional Gemini Data Analytics chat interface. ## Core Features & Use Cases - Framework Selection Guidance: Chooses between React + Vite (for full-stack teams needing custom UI) and Streamlit (for Python data scientists needing single-script deployment) based on the user's existing stack and requirements. - Unified Design System: Enforces a zinc-palette, card-based layout with DM Sans and JetBrains Mono typography, dark/light theme support, KPI cards, data tables, and ECharts or Plotly visualizations. - Gemini Chat Integration: Implements a "chat with your data" experience using the Gemini Data Analytics API with Server-Sent Events streaming, thought/response segregation, multi-turn context, and follow-up suggestions. - Use Case: A fraud analytics team needs a dashboard over a BigQuery transactions table with KPI cards, a filterable data table, and a natural-language chat panel—this Skill scaffolds the React frontend, FastAPI streaming backend, and styling in one workflow. ## Quick Start Build a data dashboard using this skill that visualizes my BigQuery sales table with KPI cards, charts, and a Gemini-powered chat interface.

Frequently Asked Questions about building-data-apps

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

FAQPage Schema
How do I build a data dashboard connected to BigQuery?▼

Choose React + Vite for production web apps with custom UI, or Streamlit for Python-based single-script dashboards. Connect the frontend to a backend API that queries BigQuery, then render KPI cards, tables, and ECharts or Plotly visualizations following the shared design system.

Should I use Streamlit or React for a data application?▼

Use Streamlit when the user is a Python data scientist needing complex local data processing and single-file deployment. Use React + Vite when the project requires custom branding, complex client-side state, or integration into a larger web ecosystem. Always prefer the framework already present in the project.

How do I add a chat with your data feature to a web app?▼

Use the Gemini Data Analytics DataChatServiceClient with a streaming endpoint that returns Server-Sent Events. The backend must include datasource_references pointing to at least one BigQuery table, segregate THOUGHT chunks from FINAL_RESPONSE text, and support multi-turn conversation history.

Why does the Gemini Data Analytics API return 400 REFERENCES_NOT_SET?▼

This error occurs when datasource_references is missing from inline_context in the chat request. The API requires at least one BigQuery table reference with projectId, datasetId, and tableId. BigLake and Iceberg tables are not supported.

When should I not use this dashboard-building approach?▼

Do not use it for backend-only services, simple CLI scripts, or web applications that are not data-centric. It is designed specifically for frontends that query and visualize data from GCP sources like BigQuery.

Related Skills

Explore More Data & Analytics Skills→
akillnessakillness
40

looker-studio-bigquery

Connect Looker Studio to BigQuery for analytics dashboards.

Community
Advanced
x-cmdx-cmd
4.6k

claw-x-hub

Manage cloud file hosting, static site deployment, and cloud compilation.

Official
Intermediate
JaviMontanoJaviMontano

metodologia-data-quality

Design a data quality framework for profiling, validation, anomaly detection, contracts, and SLA monitoring.

Community
Advanced
scumunnascumunna
1

marketing-analytics-warehouse-and-dashboards

Design and implement a BigQuery marketing analytics warehouse with Looker Studio dashboards.

Community
Advanced