skills.rest
ginlix-ai
ginlix-aiOFFICIAL
Explore all skills by this author →
GitHub

inline-widget

Render interactive HTML charts, dashboards, and data tables inline in chat via ShowWidget.

1.7k|283|Updated Jan 18, 2026
Search Tags:#interactive charts#chart.js#iframe#Dashboard#Data Visualization#HTML widget#inline rendering
One-click install
npx skills add https://github.com/ginlix-ai/LangAlpha --skill inline-widget
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inline-widget
Source: https://github.com/ginlix-ai/LangAlpha/tree/main/plugins/langalpha_deliverables/skills/inline-widget
Command: npx skills add https://github.com/ginlix-ai/LangAlpha --skill inline-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Presenting financial data as plain text or static images limits exploration; this Skill renders interactive HTML/SVG widgets directly inside the chat conversation so users can sort, filter, toggle, and hover over data without leaving the conversation.

Core Features & Use Cases

  • Inline Rendering via ShowWidget: Embeds charts, metric cards, and data tables directly between chat messages in a sandboxed iframe with automatic theme variable injection for light and dark modes.
  • Chart.js Integration: Loads Chart.js from approved CDNs with rules for responsive sizing, CSS-variable-based colors, and wrapper-div height management.
  • Data File Support: Passes sandbox files (JSON, CSV, images) to widgets through data_files and window.__WIDGET_DATA__, with a 500KB inline data cap.
  • Use Case: After screening the market, render a sortable table of long/short pair-trade candidates with a performance chart and a button that calls sendPrompt() to request a deeper analysis of a selected pair.

Quick Start

Ask the agent to show an interactive chart of portfolio performance as an inline widget in the chat.

Frequently Asked Questions about inline-widget

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render an interactive chart inline in a chat conversation?▼

Call ShowWidget with an HTML fragment containing a canvas element and Chart.js loaded from an approved CDN. Set the chart height on a wrapper div, use responsive: true with maintainAspectRatio: false, and the widget renders inline between chat messages.

How do I pass data files to an inline HTML widget?▼

Generate the data file in the sandbox, then pass its path via the data_files parameter of ShowWidget. Inside the widget, access the content through window.__WIDGET_DATA__["filename"], which returns text files as strings and images as data URLs.

Can inline widgets fetch data from external APIs?▼

No, the sandboxed iframe blocks fetch and XMLHttpRequest to non-CDN origins via CSP. Only cdnjs, jsdelivr, unpkg, and esm.sh are allowed; embed data directly in the HTML or use data_files for sandbox files.

Why is my ShowWidget HTML rejected with an error?▼

Rejections occur when the HTML uses ResizeObserver, parent.postMessage, window.top or window.parent access, position: fixed, or backgrounds and borders on the outermost element. Remove these patterns and retry with a transparent outer shell.

When should I use interactive-dashboard instead of inline widgets?▼

Use interactive-dashboard when you need a multi-page web app, server-side data, live data refresh, or complex interactivity requiring React or FastAPI. Inline widgets suit single-view, self-contained visualizations embedded in chat.

Related Skills

Explore More Data & Analytics Skills→
ncz-osncz-os
29

InvestorClaw — portfolio analysis

Aggregate holdings, performance metrics, and risk indicators from portfolio data sources.

Official
Advanced
paulmalmquistpaulmalmquist

winston-chat-workspace

Automate building and repairing Winston's chat workspace with response blocks and data-driven follow-ups.

Community
Advanced
systempromptiosystempromptio
2

visual-design-system

Enforce branded visual design consistency using OKLCH tokens and fluid typography.

Official
Advanced
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate