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: [email protected]:{username}/wonderdash-widgets.git
• SSH Private Key: An Ed25519 key in OpenSSH PEM format

Save the SSH key and configure access:

# Save the key
cat > ~/.ssh/wonderdash_deploy << 'KEYEOF'
<paste the key here>
KEYEOF
chmod 600 ~/.ssh/wonderdash_deploy

# Add SSH config
cat >> ~/.ssh/config << 'EOF'
Host wonderdash-github
  HostName github.com
  User git
  IdentityFile ~/.ssh/wonderdash_deploy
  IdentitiesOnly yes
EOF

# Clone the repo
git clone wonderdash-github:{username}/wonderdash-widgets.git

Repo Structure

wonderdash-widgets/
├── dashboard.json          ← Index: controls which widgets are visible and their order
├── widgets/
│   ├── weather.json        ← Widget content
│   ├── portfolio.json
│   ├── tasks.json
│   └── old-widget.json     ← Archived: file exists but not listed in index

Dashboard Index (dashboard.json)

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

{
  "widgets": ["weather", "portfolio", "tasks"]
}

• Array order = display order on the dashboard
• Each entry is a widget ID referencing widgets/{id}.json
• 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:

{
  "id": "weather",
  "size": "S",
  "renderer": "webview",
  "html": "<div>...</div>"
}

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, backdrop-filter
• 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)