How do I install the St Widget Builder skill?

Run npx skillmds@latest add tomevault-io/st-widget-builder in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is St Widget Builder safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with St Widget Builder?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is St Widget Builder free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published St Widget Builder?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

St Widget Builder by tomevault-io — Agent Skill

Name: St Widget Builder
Author: tomevault-io

St Widget Builder

Use when the user asks to render, build, visualise, mock up, or show a widget (chart, dashboard, card, table, graph) in the Mewbo Console. Teaches how to delegate the work to the st-widget-builder sub-agent instead of writing HTML or inline code yourself.

tomevault-io Updated Sep 17, 2026

File contents

st-widget-builder

st-widget-builder is a sub-agent — delegate to it via spawn_agent. Do not write widgets yourself.

How to invoke

spawn_agent(
  agent_type="st-widget-builder",
  task="<data hand-off + purpose — see rules below>",
  acceptance_criteria="widget_ready event emitted with app.py and data.json"
)

What goes in the task

The sub-agent has a component catalog and designs the layout itself. Your task must contain only two things:

Purpose — one sentence: what does the user want to see?
Data — the file path + field names the widget needs.

# ✓ Correct — data + purpose only
task=(
  "Show the current AAPL stock price and recent price trend. "
  "Data: /tmp/aapl_data.json — fields: quote.price, quote.change, "
  "quote.pct_change, quote.open, quote.high, quote.low, quote.volume, "
  "daily[].date, daily[].close (30 days, newest first)."
)

# ✗ Wrong — prescribing layout (forces sub-agent away from its catalog)
task=(
  "Build a header card with the price in large text, then a row of 5 "
  "metric cards, then a green line chart titled '30-Day Price History'. "
  "Use a dark theme with Altair."
)

Do not describe layout, sections, component types, chart axes, colors, or themes. The sub-agent's catalog (StockTickerCard, GitHubRepoCard, SearchResultCard, PlantUMLCard, …) already handles these consistently. Prescribing layout bypasses the catalog and forces custom code that looks worse.

Data hand-off

Write structured data to a file before spawning — never paste raw JSON into the task string:

gh search repos --json name,description,stargazerCount,language,url \
    --limit 10 "topic:streamlit" > /tmp/mewbo_gh_results.json

Then pass the path and field names in the task. The sub-agent reads, transforms, and discards the rest.

After the sub-agent finishes

The widget is already visible the moment widget_ready fires. Reply with one sentence — "Done — the widget is live." Do not describe what the widget shows; the user can see it.

What NOT to do

Do not write .html, .css, or Python yourself
Do not call activate_skill("st-widget-builder") — that does nothing; use spawn_agent
Do not describe the visual layout in the task — it defeats the catalog and bloats the widget

Source: bearlike/Assistant — distributed by TomeVault.

---name: st-widget-builderdescription: Use when the user asks to render, build, visualise, mock up, or show a widget (chart, dashboard, card, table, graph) in the Mewbo Console. Teaches how to delegate the work to the st-widget-builder sub-agent instead of writing HTML or inline code yourself.---# st-widget-builder`st-widget-builder` is a sub-agent — delegate to it via `spawn_agent`. Do not write widgets yourself.## How to invoke```pythonspawn_agent( agent_type="st-widget-builder", task="<data hand-off + purpose — see rules below>", acceptance_criteria="widget_ready event emitted with app.py and data.json")```## What goes in the taskThe sub-agent has a component catalog and designs the layout itself. **Your task must contain only two things:**1. **Purpose** — one sentence: what does the user want to see?2. **Data** — the file path + field names the widget needs.```python# ✓ Correct — data + purpose onlytask=( "Show the current AAPL stock price and recent price trend. " "Data: /tmp/aapl_data.json — fields: quote.price, quote.change, " "quote.pct_change, quote.open, quote.high, quote.low, quote.volume, " "daily[].date, daily[].close (30 days, newest first).")# ✗ Wrong — prescribing layout (forces sub-agent away from its catalog)task=( "Build a header card with the price in large text, then a row of 5 " "metric cards, then a green line chart titled '30-Day Price History'. " "Use a dark theme with Altair.")```**Do not describe** layout, sections, component types, chart axes, colors, or themes. The sub-agent's catalog (`StockTickerCard`, `GitHubRepoCard`, `SearchResultCard`, `PlantUMLCard`, …) already handles these consistently. Prescribing layout bypasses the catalog and forces custom code that looks worse.## Data hand-offWrite structured data to a file before spawning — never paste raw JSON into the task string:```bashgh search repos --json name,description,stargazerCount,language,url \ --limit 10 "topic:streamlit" > /tmp/mewbo_gh_results.json```Then pass the path and field names in the task. The sub-agent reads, transforms, and discards the rest.## After the sub-agent finishesThe widget is already visible the moment `widget_ready` fires. Reply with one sentence — "Done — the widget is live." Do not describe what the widget shows; the user can see it.## What NOT to do- Do not write `.html`, `.css`, or Python yourself- Do not call `activate_skill("st-widget-builder")` — that does nothing; use `spawn_agent`- Do not describe the visual layout in the task — it defeats the catalog and bloats the widget---> Source: [bearlike/Assistant](https://github.com/bearlike/Assistant) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions