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
Visualizes streaming data using @timeplus/vistral loaded from unpkg CDN
Follows the Timeplus App Style Guide (dark theme, brand colors, clean layout)
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

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. Write the complete single-file HTML, filling in the correct SQL and chart config
use workspacecreateapp to create the app
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