inline-widget
Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget
npx skills add ginlix-ai/LangAlpha --skill inline-widget --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Inline Widget Render interactive HTML/SVG widgets directly inside the chat conversation using `ShowWidget`. Widgets appear inline between text — no sandbox, no preview URL, no side panel. They run JavaScript, so lean into making them **interactive and explorable** where it helps — something the user can sort, filter, toggle, and hover over, not just a static picture. ## When to Use - User wants a **quick visualization** embedded in the conversation (chart, metric card, data table) - The visualization is **self-contained** — all data is embedded in the HTML, no server needed - User wants **interactivity** within the chat: buttons, toggles, hover effects, animated charts - The output is a **single view** — not a multi-page app or dashboard that needs routing **Use `interactive-dashboard` instead if:** User needs a multi-page web app, server-side data, live data refresh, or complex interactivity requiring React/FastAPI. Read `.agents/skills/ui-design/SKILL.md` for design quality — its color discipline, chart restraint, and anti-slop principles apply here too. Its font pairings and type scale, though, are for full documents; a widget sits on the chat surface, so use the host-font typ
- When to Use
- ShowWidget API
- Layout Rules (CRITICAL)
- Outer Element — Transparent Shell
- Inner Elements — Use Theme Variables
- Positioning
- Theme Variables
- Charts (Chart.js)
- Typography
- Interactivity
- Make it explorable
- sendPrompt()
- Refresh / Animation
- File Data
What does the inline-widget skill do?
Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget
How do I install it?
Run `npx skills add ginlix-ai/LangAlpha --skill inline-widget --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ginlix-ai/LangAlpha, a repository with 1,604 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.