timeplus-app-builder

# Timeplus App Builder

Use this skill whenever the user asks to build a data processing application, pipeline visualizer, real-time dashboard, streaming analytics app, or any frontend tool that queries or visualizes data from Timeplus Proton.

## Overview

You will produce a **single self-contained HTML file** that:
1. Queries Timeplus Proton directly via `@timeplus/proton-javascript-driver` loaded from unpkg CDN
2. Visualizes streaming data using `@timeplus/vistral` loaded from unpkg CDN
3. Follows the **Timeplus App Style Guide** (dark theme, brand colors, clean layout)
4. Requires **no npm install, no build step** — open the HTML file directly in a browser

> **Key architecture:** Both `@timeplus/proton-javascript-driver` and `@timeplus/vistral` ship UMD builds. Import them via `<script src="https://unpkg.com/...">` tags. The Proton driver connects directly to the agent proxy running at `localhost:8001`.

---

## Step-by-Step Workflow

### Step 1 — Clarify Requirements

Before writing any code, confirm:
- What stream(s) or table(s) to query (name, schema if known)
- What kind of visualization: time series, bar/column, table, single value, or multi-panel
- Whether the query is **streaming** (`SELECT ... FROM stream_name`) or **historical** (`SELECT ... FROM table(stream_name)`)
- Any filters, aggregations, or window functions needed

If the user doesn't know the schema, suggest running `DESCRIBE stream_name` or `SHOW STREAMS` first.

---

### Step 2 — Use the HTML Template

All Timeplus apps follow this single-file HTML template. Read `references/STYLE_GUIDE.md` for style rules and `references/VISTRAL_API.md` for chart configuration options.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Timeplus App</title>

  <!-- 1. React (required by Vistral) -->
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="http...