WonderDash Widget Skill (v5 — WebView + Index + File-Per-Widget)

You manage widgets on the user's WonderDash mobile dashboard by writing individual JSON files to a GitHub repository, with a dashboard.json index that controls visibility and order.

Setup

WonderDash sends you a setup message containing:

• - Repo URL: INLINECODE1
• SSH Private Key: An Ed25519 key in OpenSSH PEM format

Save the SSH key and configure access:

CODEBLOCK0

Repo Structure

CODEBLOCK1

Dashboard Index (dashboard.json)

The index file at the repo root controls which widgets appear and in what order:

CODEBLOCK2

• - Array order = display order on the dashboard
• Each entry is a widget ID referencing INLINECODE3
• Widgets not in the array are hidden (archived) — their files are kept
• If dashboard.json doesn't exist, all widgets in widgets/ are shown (unordered)

Widget Format

Each widget file (widgets/{id}.json) contains a single widget object:

CODEBLOCK3

Fields:

• - id (string): Unique slug identifier — must match the filename (e.g., weather → widgets/weather.json)
• size ("S" | "M" | "L"): Widget display size
• renderer ("webview" | "html", optional): Rendering engine. Default is "html" (native). Use "webview" for rich visuals.
• html (string): Self-contained HTML with inline styles

Renderers

"webview" — Rich widgets (recommended for most widgets)

Renders in a full browser engine. Supports:

• - CSS gradients, shadows, border-radius, INLINECODE18
• CSS animations (@keyframes, transition)
• SVG (charts, icons, sparklines)
• Canvas
• JavaScript (live clocks, counters, data formatting)
• Base64 inline images (<img src="data:image/png;base64,...">)
• Full CSS flexbox and grid

The app wraps your HTML in a document with dark theme defaults (background: #1f2937, color: #fff, system font). You just provide the body content.

"html" — Lightweight widgets (default)

Renders via native components (no browser). Faster and lighter, but limited to basic HTML elements and inline styles. No JS, no animations, no gradients, no SVG. Good for simple text/number displays.

Use "webview" for anything visual. Use "html" only for the simplest text-only widgets where performance matters more than appearance.

Widget Sizes

Modeled after Apple's iOS widget system:

Two small widgets fit side-by-side. Medium and large span the full width.

Creating a Widget

Two steps: create the widget file, then add it to the index.

CODEBLOCK4

Updating a Widget

Edit the widget file and push. No change to dashboard.json needed unless reordering.

CODEBLOCK5

Reordering / Archiving / Deleting

• - Reorder: Rearrange the array in dashboard.json, commit, push.
• Archive: Remove the ID from dashboard.json — widget file stays in repo.
• Restore: Add the ID back to the array.
• Delete permanently: Remove from dashboard.json + git rm widgets/{id}.json, commit, push.

The user pulls down on their dashboard to refresh. Changes appear after a manual refresh.

Design Guidelines

• - Dark theme. Background: #1f2937 (gray-800). Text: #ffffff. Secondary: #9ca3af (gray-400). Accent: #3b82f6 (blue-500). Success: #22c55e. Warning: #eab308. Error: #ef4444.
• Self-contained. No external resources (CDNs, APIs, remote images). Everything inline.
• JSON escaping. Escape quotes in HTML when inside JSON strings. Use \" for double quotes inside style attributes, or use single quotes in HTML (style='...').
• Fit the size. Content must fit within the widget dimensions without scrolling. WebView has overflow: hidden by default.
• Subtle animation. Use gentle transitions and animations to add polish — avoid flashy or distracting effects.

Examples

Small — Gradient metric (widgets/temperature.json)

A temperature display with gradient background and subtle glow.

CODEBLOCK6

Small — Animated status (widgets/api-status.json)

A pulsing status indicator with CSS animation.

CODEBLOCK7

Medium — SVG sparkline chart (widgets/revenue.json)

A revenue card with an inline SVG sparkline.

CODEBLOCK8

Medium — Gradient info card (widgets/next-meeting.json)

A meeting card with gradient accent border.

CODEBLOCK9

Large — Price chart with SVG (widgets/btc-price.json)

A Bitcoin price chart with gradient fill, grid lines, and price labels.

CODEBLOCK10

Large — Calendar grid (widgets/calendar.json)

A monthly calendar with CSS grid and highlighted dates.

CODEBLOCK11

Example dashboard.json

CODEBLOCK12