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. 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.

CODEBLOCK0

---

Step 3 — Proton Connection

Read references/PROTON_DRIVER.md for the full driver API.

The driver connects directly to the Proton proxy at localhost:8001. UMD global: window.ProtonDriver.

CODEBLOCK1

---

Step 4 — Visualization with Vistral

Read references/VISTRAL_API.md for the complete component reference.

Vistral UMD global: window.Vistral. Key components: StreamChart, SingleValueChart, DataTable.

All charts are rendered via React (React.createElement). Always pass theme="dark".

Quick chart config reference:

Chart type	INLINECODE22	Best for	temporal INLINECODE23
Time series	INLINECODE24 or INLINECODE25	Scrolling metrics over time	INLINECODE26
Horizontal bars

'bar' | Ranked categories, latest snapshot | 'frame' |
| Vertical bars | 'column' | Categorical comparison | 'frame' |
| KPI tile | 'singleValue' | One big number | 'frame' |
| Live table | 'table' | Raw rows / mutable state | 'key' |
| Geo points | 'geo' | Location data | 'key' |

---

Step 5 — Apply Timeplus Style Guide

Read references/STYLE_GUIDE.md for full rules. Core rules always applied:

• - Dark background #0f1117 for page, #1e2235 for cards
• Purple #7c6af7 for primary accents
• Inter font for UI, monospace for data values
• Cards with border-radius: 12px and border INLINECODE42
• Header 56px with LIVE badge and connection status indicator

---

Step 6 — Deliver the App

1. 1. Write the complete single-file HTML, filling in the correct SQL and chart config
2. use workspacecreateapp to create the app
3. Present the file — it opens directly in a browser with no server or build step needed

For PulseBot deployment:

workspace_create_app(
  session_id=session_id,
  task_name="My Stream App",
  html=open("my-app.html").read()
)

---

SQL Patterns

Load the timeplus-sql-guide skill for all SQL questions:

• - Streaming vs historical queries
• Window functions (tumble, hop, session)
• Aggregations, joins, filters
• Schema introspection (DESCRIBE, SHOW STREAMS)

---

Checklist Before Delivering

• - [ ] Single HTML file — no separate JS/CSS files, no package.json, no build step
• [ ] Script load order: React → ReactDOM → lodash → ramda → @antv/g2 → @antv/s2 → vistral → proton-javascript-driver
• [ ] window.ProtonDriver destructured for INLINECODE47
• [ ] window.Vistral destructured for StreamChart (and other components as needed)
• [ ] ProtonClient configured with INLINECODE51
• [ ] SQL uses correct Proton streaming syntax
• [ ] columns inferred from first received row using INLINECODE53
• [ ] Chart config.temporal uses correct mode for the query type
• [ ] Status indicator updates on connect, stream end, and error
• [ ] abort() stored on window.stopQuery or similar
• [ ] CSS uses Timeplus design tokens (CSS variables) from the style template