# Widgets

Render rich HTML inline via `<mcwidget>` tags with theme-aware styling.

- Repository: https://github.com/kirodotdev/KiroCrew (4711 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add kirodotdev/KiroCrew --skill widgets -g -a claude-code -y`
Codex: `npx skills add kirodotdev/KiroCrew --skill widgets -g -a codex -y`
Cursor: `npx skills add kirodotdev/KiroCrew --skill widgets -g -a cursor -y`
Gemini CLI: `npx skills add kirodotdev/KiroCrew --skill widgets -g -a gemini-cli -y`

## Description

Render rich HTML inline via `<mcwidget>` tags with theme-aware styling. Load when emitting an mcwidget so the iframe inherits the dashboard theme instead of clashing with light / dark / custom palettes.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Inline widgets (`<mcwidget>`)

You can embed rich HTML in assistant messages using
`<mcwidget title="Title">HTML</mcwidget>`. The dashboard renders each tag as
a sandboxed iframe with Tailwind CSS preloaded. Use this for styled visual
content plain markdown cannot express: charts, color-coded tables, styled
cards, visual summaries, simple interactive probes.

Tailwind is preloaded and ready without any setup, it is served from the
dashboard's own origin, not from `cdn.tailwindcss.com`, which the iframe CSP
does NOT allow. Other libraries (Chart.js, D3, etc.) need a
`<script src="…">` tag pulling from one of the CSP-allowed CDNs listed under
Rules below.

## When to use

- **Use** when styled HTML genuinely helps comprehension, Chart.js graphs,
  color-coded comparison tables, status cards, before/after previews, small
  interactive probes.
- **Don't use** for content markdown already handles well, plain prose,
  bullet lists, fenced code, simple tables. Widget iframes cost more to render
  and add more context than markdown; default to markdown.
- **Save to file** for anything large. `<mcwidget>` bodies fit comfortably
  up to a few KB; beyond that, write an HTML file and return the absolute
  path so the dashboard shows a thumbnail / link instead.

## Theme-aware styling (critical)

The widget iframe inherits the dashboard's active theme through CSS
custom properties injected into each srcdoc. Use these variables instead
of hardcoded colors so widgets render correctly on every theme (light,
dark, and user-defined custom palettes).

Core palette (use these first):

The rest: https://github.com/kirodotdev/KiroCrew/blob/HEAD/src/kiro_crew/builtin_skills/widgets/SKILL.md