binder-app

Binder App

Scaffold a small browser app served by binder http, on top of an existing Binder workspace. Default to plain HTML + vanilla JS, no build step, CDN libraries only when they save real work.

When to use

User asks for a UI on top of their Binder data. Typical asks:

• "Create a dashboard of my transactions over time."
• "Build a kanban board of tasks grouped by status, drag and drop like Trello."
• "Make a small admin panel for my contacts."
• "Show me a chart of X grouped by Y."

If the user wants to query data without a UI, send them to the binder-cli skill instead.

Workflow

1. Read the schema

Always start here. Do not guess type or field names.

binder schema                    # all types and fields
binder schema --types Task       # one type

Note for each type the user mentioned: required fields, allowed values for enum-like fields (only: [...]), and relation targets. Allowed values matter for kanban columns, chart axes, filters.

2. Plan, or ask

Before writing code, produce a short plan: what records get queried, how they get grouped or aggregated, what writes (if any) the UI performs, and which CDN libs (if any) you'll pull in.

Ask the user a clarifying question when any of these is unclear:

• Which type(s) to show, if the workspace has several plausible candidates.
• Which field drives grouping or the time axis (e.g. createdAt vs a domain field like date).
• Whether the UI is read-only or should write back (drag-and-drop status changes, edits, creates).
• Bucket granularity for time series (day/week/month).

Keep the plan to a few bullets. Do not ask more than two or three questions.

3. Decide: client-only or server.ts

Default to client-only. The built-in API is enough for most cases.

Add .binder/web/server.ts only when one of these is true:

• The aggregation is too heavy or awkward to do in the browser.
• You need an endpoint that talks to an external service (webhook, third-party API).
• You need a custom shape that combines multiple queries server-side.