New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Inline Widget

by ginlix-ai in ginlix-ai/LangAlpha

Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget

Apache-2.0Auto-check passedFrontend & Design

Install Inline Widget

skills CLI
$ npx skills add ginlix-ai/LangAlpha --skill inline-widget -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ginlix-ai/LangAlpha inline-widget --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ginlix-ai/LangAlpha.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/langalpha_deliverables/skills/inline-widget .claude/skills/inline-widget && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
inline-widget
GitHub stars
1.8k
Token cost
~3.2k tokens
SKILL.md length
1,049 words
Files
1
Skills in repo
38
Repo updated
First seen
Licence
Apache-2.0

At a glance

Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget

  • Works in 3 steps: Generate data files via Python → Pass file paths to ShowWidget via… → Access data in the widget via…
  • Tasks that involve Typography
  • SKILL.md covers When to Use, ShowWidget API, Layout Rules (CRITICAL) and Theme Variables, plus 6 more sections
  • Reaches cdn.jsdelivr.net

What it does

Inline Widget is an agent skill from ginlix-ai/LangAlpha. Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget

Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Typography. The repository describes itself as: Claude Code for Financial Market. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Typography

Example prompts

  • “/inline-widget”

Requirements

  • Python 3

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Generate data files via Python
  2. Pass file paths to ShowWidget via data_files
  3. Access data in the widget via window.WIDGET_DATA["filename"]

What it can do on your machine

Read from SKILL.md and the folder at commit 941ca4a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html, javascript, css and python).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Inline Widget loads about 3.2k tokens when it runs. Until then it costs about 28 tokens; SKILL.md has 1,049 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~28
When it runs · the whole SKILL.md, loaded when a task matches
~3.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ginlix-ai/LangAlpha at commit 941ca4a, republished under its Apache-2.0 licence (© ginlix-ai). 1,049 words, ~3,224 tokens.

Download SKILL.mdSave it as .claude/skills/inline-widget/SKILL.md (or your agent's skills folder).
name
inline-widget
description
Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget

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 typography rules below instead.

ShowWidget API

ShowWidget(html: str, title: str | None = None, data_files: list[str] | None = None)
  • html: Raw HTML fragment — no <!DOCTYPE>, <html>, <head>, or <body> tags
  • title: Optional metadata (not displayed to user)
  • data_files: Optional list of sandbox file paths to make available as window.__WIDGET_DATA__

The HTML is rendered in a sandboxed iframe with:

  • CDN libraries: cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, esm.sh
  • CSS theme variables: automatically injected (see Theme section)
  • sendPrompt('text'): global function to trigger follow-up chat messages
  • window.__WIDGET_DATA__: dict of filename→content for files passed via data_files
  • No network to non-CDN origins: fetch() / XMLHttpRequest to arbitrary URLs are blocked by CSP — only CDN domains (cdnjs, jsdelivr, unpkg, esm.sh) are allowed. Use data_files for sandbox files, or embed small data directly in HTML

Layout Rules (CRITICAL)

The widget sits directly on the chat surface inside a transparent iframe. Follow these rules for seamless integration:

Outer Element — Transparent Shell

The outermost HTML element must have:

  • NO background (or background: transparent)
  • NO border
  • NO border-radius
  • NO box-shadow
  • NO padding — add padding on inner sections only
html
<!-- CORRECT: transparent outer shell -->
<div>
  <div style="background: var(--color-bg-card, #ffffff); border-radius: 8px; padding: 16px; ...">
    ...inner card content...
  </div>
</div>

<!-- WRONG: styled outer wrapper — will be rejected -->
<div style="background: var(--color-bg-page); border: 1px solid ...; border-radius: 8px; padding: 20px;">
  ...content...
</div>
Inner Elements — Use Theme Variables

Inner cards, sections, and components should use CSS variables for styling, always in the fallback form:

css
/* Card */
background: var(--color-bg-card, #ffffff);
border: 0.5px solid var(--color-border-muted, #e4e1dc);
border-radius: 8px;
padding: 16px;

/* Metric card */
background: var(--color-bg-subtle, #f4f2ee);
border: 0.5px solid var(--color-border-muted, #e4e1dc);
border-radius: 8px;

In chat the variables are always injected, so the fallback never shows there — it is what renders when the widget is saved as a workspace .html file and previewed before theme injection or opened standalone. Use the light literals from the html-report skill's table.

Positioning
  • NO position: fixed — breaks iframe auto-sizing (elements collapse to 0 height)
  • Use position: relative for chart containers
  • No nested scrolling — the iframe auto-sizes to fit all content

Theme Variables

These CSS variables are automatically injected and resolve correctly in both light and dark mode:

VariablePurpose
--color-bg-pagePage background
--color-bg-cardCard/panel background
--color-bg-elevatedElevated surface
--color-bg-subtleSubtle/muted background
--color-bg-hoverHover state background
--color-text-primaryPrimary text
--color-text-secondarySecondary/muted text
--color-text-tertiaryHint/label text
--color-border-mutedDefault border (use with 0.5px)
--color-accent-primaryBrand/accent color
--color-profitPositive/gain (green)
--color-lossNegative/loss (red)
--color-warningWarning (amber)
--color-infoInfo (blue)
--color-successSuccess (green)

Never hardcode colors like #333 or rgb(...) for text, backgrounds, or borders — they break in dark mode. Author every color as var(--color-x, #lightLiteral): the injected variable always wins in chat, and the fallback keeps the widget legible on its secondary surfaces. The only exception is chart canvas colors — Chart.js canvas cannot read CSS variables; resolve them via getComputedStyle with a literal fallback.

Charts (Chart.js)

Load Chart.js from CDN and follow these rules:

html
<!-- Wrapper div with explicit height — REQUIRED -->
<div style="position: relative; height: 200px;">
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Read CSS variables for chart colors (canvas can't use var());
  // the literal fallback covers the widget opened outside the chat surface.
  var cs = getComputedStyle(document.documentElement);
  function pick(name, fallback) { return cs.getPropertyValue(name).trim() || fallback; }
  var accent = pick('--color-accent-primary', '#1f5fb4');
  var border = pick('--color-border-muted', '#e4e1dc');

  new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
      labels: [...],
      datasets: [{
        data: [...],
        borderColor: accent,
        backgroundColor: accent + '20',
        tension: 0.4,
        fill: true
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: true } },
      scales: {
        y: { grid: { color: border } },
        x: { grid: { display: false } }
      }
    }
  });
</script>

Key rules:

  • Set height on the wrapper div, never on the canvas
  • Always use responsive: true, maintainAspectRatio: false
  • Use UMD build from CDN (sets window.Chart global)
  • Read CSS variables via getComputedStyle with a literal fallback (pick()) for chart colors
Show full SKILL.md (445 more words)Show less

Typography

  • Font: inherited from host (-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)
  • Weight: favor 400 (regular) and 500 (medium); use 600 sparingly for a key figure or heading. Avoid 700 — it reads heavy on the chat surface
  • Heading sizes: h1 = 22px, h2 = 18px, h3 = 16px (all weight 500)
  • Body: 14-16px, weight 400
  • Use sentence case — no Title Case or ALL CAPS (except short metric labels)

Interactivity

Make it explorable

A widget runs JavaScript, so prefer something the user can poke at, not just read. When the data supports it, reach for:

  • Sortable / filterable tables — click a header to sort by P&L or weight; filter to a sector or watchlist.
  • Series & metric toggles — show/hide chart series, switch price ↔ % change, flip timeframe (1M / 6M / 1Y).
  • Hover detail — tooltips on chart points and table rows that surface the underlying numbers.
  • What-if inputs — a slider or field that recomputes a figure live (drag a growth rate, watch the projection update).
  • Tabs / segmented views — split a dense widget (Overview / Holdings / Performance) so the reader drills in.

It all runs client-side over the embedded data — never fetch() a non-CDN origin (CSP blocks it; use data_files for anything large). Keep a meaningful default state so the widget reads correctly before any interaction. Use sendPrompt() only when the next step genuinely belongs back in the chat (a new query, a deeper analysis) — handle exploration the widget can do itself in-place.

sendPrompt()

Call sendPrompt('text') from buttons to trigger a follow-up chat message:

html
<button onclick="sendPrompt('Show detailed revenue breakdown')"
        style="padding: 8px 16px; background: var(--color-accent-primary); color: white;
               border: none; border-radius: 6px; cursor: pointer;">
  Revenue Details ↗
</button>

Add a ↗ arrow on buttons that call sendPrompt() to signal they trigger a chat action.

Refresh / Animation

setInterval and requestAnimationFrame work normally for animations and live tickers:

javascript
setInterval(function() {
  // Update prices, rotate data, animate
  updateDisplay();
}, 3000);

File Data

Use data_files to load data from sandbox files instead of inlining everything in the HTML string. This is especially useful for larger datasets.

Workflow
  1. Generate data files via Python
  2. Pass file paths to ShowWidget via data_files
  3. Access data in the widget via window.__WIDGET_DATA__["filename"]
python
# Step 1: Generate data
import json
data = {"labels": ["Q1", "Q2", "Q3"], "values": [100, 150, 200]}
with open("<task_name>/chart_data.json", "w") as f:
    json.dump(data, f)

# Step 2: Agent calls ShowWidget with data_files
ShowWidget(
    html='<div id="chart">...</div><script>var d = JSON.parse(__WIDGET_DATA__["chart_data.json"]); ...</script>',
    data_files=["<task_name>/chart_data.json"]
)
Widget access
javascript
// Text files (json, csv, txt, etc.) — returned as strings
var data = JSON.parse(window.__WIDGET_DATA__["chart_data.json"]);
var csvText = window.__WIDGET_DATA__["results.csv"];

// Binary files (png, jpg, etc.) — returned as data URLs
document.getElementById("img").src = window.__WIDGET_DATA__["chart.png"];
Supported file types
  • Text (returned as strings): .json, .csv, .txt, .html, .xml, .svg, .md, .yaml, .yml, .tsv, .geojson, .topojson
  • Binary (returned as data URLs): .png, .jpg, .jpeg, .gif, .webp, .ico
Size limits

Total inline data is capped at 500KB across all files. Keep datasets concise — aggregate or sample large files before passing them.

Blocked Patterns

The following will cause ShowWidget to reject your HTML with an error. Fix and retry:

PatternWhy blocked
new ResizeObserver(...)Host handles iframe sizing — your observer creates infinite resize loops
parent.postMessage(...)Use sendPrompt() instead — direct postMessage bypasses the bridge
window.top.* / window.parent.*Sandboxed iframe — parent access is blocked
position: fixedBreaks iframe auto-sizing
Background/border on outermost elementBreaks seamless integration with chat surface

Design Patterns

Metric Cards Row
html
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px;">
  <div style="background: var(--color-bg-subtle); padding: 14px 16px; border-radius: 8px; border: 0.5px solid var(--color-border-muted);">
    <div style="font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;">Revenue</div>
    <div style="font-size: 24px; font-weight: 500;">$2.4M</div>
    <div style="font-size: 12px; color: var(--color-profit);">+12.5%</div>
  </div>
  <!-- more cards... -->
</div>
Data Table
html
<table style="width: 100%; border-collapse: collapse; font-size: 14px;">
  <thead>
    <tr style="border-bottom: 0.5px solid var(--color-border-muted);">
      <th style="text-align: left; padding: 8px; color: var(--color-text-secondary); font-weight: 500; font-size: 12px;">Symbol</th>
      <th style="text-align: right; padding: 8px; color: var(--color-text-secondary); font-weight: 500; font-size: 12px;">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-bottom: 0.5px solid var(--color-border-muted);">
      <td style="padding: 8px; font-weight: 500;">AAPL</td>
      <td style="text-align: right; padding: 8px;">$213.18</td>
    </tr>
  </tbody>
</table>
Section with Chart
html
<div style="background: var(--color-bg-card); border-radius: 8px; border: 0.5px solid var(--color-border-muted); padding: 16px; margin-bottom: 16px;">
  <div style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Performance</div>
  <div style="position: relative; height: 200px;">
    <canvas id="perfChart"></canvas>
  </div>
</div>

© ginlix-ai, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/langalpha_deliverables/skills/inline-widget of ginlix-ai/LangAlpha.

Open the folder on GitHubat commit 941ca4a

Compare with similar skills

Inline Widget next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Inline Widget compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Inline Widget this skillginlix-ai/LangAlpha1.8k—~3.2kAutomated safety check: PassApache-2.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons18218 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    182 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.4k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from ginlix-ai/LangAlpha

All 38 skills in this repo

  • Investment Deck Check

    ginlix-ai/LangAlpha

    Quality-checks an investment deck in .pptx form before it goes out: number consistency, chart and narrative alignment, source coverage, language and a circulation verdict.

    1.8k GitHub stars~3.7k tokensUpdated today
    Auto-check passed

  • Equity Initiation Report

    ginlix-ai/LangAlpha

    Produces a first-time equity research initiation report in five tasks: company research, financial model, valuation, charts and a DOCX report.

    1.8k GitHub stars~3.8k tokensUpdated today
    Auto-check passed

  • Three-Statement Model Builder

    ginlix-ai/LangAlpha

    Builds or repairs an integrated income statement, balance sheet and cash flow model in Excel with live formulas, supporting schedules, scenarios and a Checks sheet.

    1.8k GitHub stars~5.4k tokensUpdated today
    Auto-check passed

  • Financial Model Checker

    ginlix-ai/LangAlpha

    Audits an existing Excel financial model without editing it, checking structure, formulas, integrity identities and source tie-out, and ends in a prioritized issue log.

    1.8k GitHub stars~4.2k tokensUpdated today
    Auto-check passed

  • DCF Model Builder

    ginlix-ai/LangAlpha

    Builds a live Excel DCF valuation workbook with free cash flow projections, WACC, terminal value, three scenarios, sensitivity grids and a reverse DCF.

    1.8k GitHub stars~7.7k tokensUpdated today
    Auto-check passed

  • Word Documents for Human Review

    ginlix-ai/LangAlpha

    Builds Word files with python-docx, edits existing ones in place with tracked changes and comments, then renders and validates the result.

    1.8k GitHub stars~4.8k tokensUpdated today
    Auto-check passed

Categories

Questions about Inline Widget

What does Inline Widget do?

Inline HTML widgets: charts, dashboards, data tables rendered directly in the chat via ShowWidget. Inline Widget is an agent skill from ginlix-ai/LangAlpha.

When should I use Inline Widget?

Inline Widget fits situations like: tasks that involve Typography.

How do I install Inline Widget in Claude Code?

Run `npx skills add ginlix-ai/LangAlpha --skill inline-widget -a claude-code`. Or copy the skill folder (plugins/langalpha_deliverables/skills/inline-widget in ginlix-ai/LangAlpha) into .claude/skills/inline-widget in your project. Claude Code loads it when a task matches its description.

How do I install Inline Widget in Codex?

Run `npx skills add ginlix-ai/LangAlpha --skill inline-widget -a codex`. Or copy the skill folder (plugins/langalpha_deliverables/skills/inline-widget in ginlix-ai/LangAlpha) into .agents/skills/inline-widget in your project. Codex loads it when a task matches its description.

Can I use Inline Widget in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ginlix-ai/LangAlpha --skill inline-widget -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/inline-widget, .gemini/skills/inline-widget, .github/skills/inline-widget and .opencode/skills/inline-widget in your project.

What does Inline Widget need to run?

SKILL.md names no scripts, command-line tools or credentials: Inline Widget is instructions for the agent only. Our summary lists: Python 3.

Does Inline Widget access the network?

SKILL.md names 1 domain. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Inline Widget safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Inline Widget use?

Inline Widget is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Inline Widget use?

About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Inline Widget?

Skills that share tags, products or a category with Inline Widget: Impeccable (bestofjs/bestofjs, 3.1k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Design System (Ohh-889/skyroc, 795 stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Inline Widget?

ginlix-ai (a GitHub organization) maintains it in ginlix-ai/LangAlpha, which has 1,805 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on October 7, 2026.

Source: ginlix-ai/LangAlpha on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.