widgets

widgets is a skill for Claude Code, Codex from kirodotdev/KiroCrew. It costs 42 tokens per session (3,598 once invoked), scanned A, original, Apache-2.0.

A skill for embedding styled HTML panels inside assistant messages. These panels can inherit the dashboard’s theme and display content such as charts, tables, cards, or small interactive examples.

In plain words
What is it for?
Use it to render visual summaries, charts, color-coded tables, styled cards, and simple interactive probes in an assistant response.
Why use it?
It makes structured or interactive information easier to inspect when plain text or Markdown is not enough.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to render visual summaries, charts, color-coded tables, styled cards, and simple interactive probes in an assistant response.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/kirodotdev/kirocrew/widgets
About the project

Kiro Crew is a persistent development workspace where agents continue multi-step software work across sessions, schedules, and connected interfaces. Developers use it locally or remotely through a desktop app, web dashboard, CLI, Slack, or Discord, with unattended tasks and recurring jobs. The catalogue contains skills and instructions for working with this workspace.

kirodotdev/KiroCrew · 4,571 stars · on GitHub · kiro.dev

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add kirodotdev/KiroCrew --skill widgets
Clone the repo
git clone --depth 1 https://github.com/kirodotdev/KiroCrew

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for widgets

README.md
[![agentmods](https://agentmods.dev/badge/skills/kirodotdev/kirocrew/widgets/github.svg)](https://agentmods.dev/skills/kirodotdev/kirocrew/widgets)
Your own site
<a href="https://agentmods.dev/skills/kirodotdev/kirocrew/widgets"><img src="https://agentmods.dev/badge/skills/kirodotdev/kirocrew/widgets/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for widgets

Your own site · 80×15
<a href="https://agentmods.dev/skills/kirodotdev/kirocrew/widgets"><img src="https://agentmods.dev/badge/skills/kirodotdev/kirocrew/widgets.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 42 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,598 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00042 $0.03598
Opus 5.5 $0.00017 $0.01439
Sonnet 5.5 $0.00008 $0.00720
Haiku 4.5 $0.00004 $0.00360

Measured today against content hash f9d52aee1aee, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

widgets scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

src/kiro_crew/builtin_skills/widgets/SKILL.md · 296 lines

How it starts

The opening of the file, as written. The whole thing — 296 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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):

Variable Role
var(--bg) Page background
var(--text) Foreground text
var(--card) Card / panel background
var(--card-fg) Foreground text on --card
var(--border) Borders and dividers
var(--accent) Primary accent / links
var(--muted) Muted / secondary text
var(--ok) Success state
var(--warn) Warning state
var(--danger) Error / destructive state
var(--info) Info / neutral callout (blue)

Read the full file on GitHub · 296 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. today Changed · +7 lines f9d52aee1aee
  2. 3d ago Changed · +1 lines 7992864a1312
  3. 5d ago Changed · +5 lines 96d788bddac0
  4. 17d ago Changed · +5 lines 38805b73ad62
  5. 29d ago Changed · +31 lines 0cb4fee17a03
  6. 1mo ago Changed · +8 lines 82a4c99a9d73
  7. 1mo ago Changed · -32 lines d9a316c56e7b
  8. 1mo ago Changed · +34 lines f8c90d6f21d5
  9. 1mo ago Changed · +39 lines 9d3a8d538ec4
  10. 1mo ago First seen · 198 lines · 42 tokens per session scan A 9b317de1ee6c

Subscribe to this mod's changes

widgets is a skill published in the GitHub repository kirodotdev/KiroCrew (4,571 stars, last pushed today), licensed Apache-2.0. It adds 42 tokens to every session and 3,598 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

cost-efficiency-analyzer

Analyzes cost structure, cost efficiency, and expense management from P&L data. Use when the user asks about costs, expenses, COGS, operating expenses, cost ratios, cost control, spending efficiency, margin compression from cost side, or wants to understand where money is going. Also use for "are we spending too…

awslabs/agentcore-samples · 98 tokens

sector-rotation

Identify which market sectors to overweight or underweight based on current macro conditions and sector performance data.

awslabs/agentcore-samples · 22 tokens

trend-analysis

Analyze price and volume trends for one or more stocks to determine momentum direction and key technical levels.

awslabs/agentcore-samples · 21 tokens

deploying-to-staging-environment

Use when deploying changes to staging across relay, relay-dashboard, and relay-cloud repos - coordinates multi-repo branch syncing using git worktrees, automatically triggers staging deployments via GitHub Actions.

AgentWorkforce/relay · 44 tokens

writing-relayflows

Use when authoring a Relayflows flow (@relayflows/surface / @relayflows/sdk, the journal-based v2 engine — the CLI is flows, package versions 2.0.x) in TypeScript or YAML/JSON. Covers the three-rung ladder (run/llm/agent), the resident verbs (human/dispatch/done), verification gates, TypeScript vs YAML authoring…

AgentWorkforce/relay · 184 tokens

browser-testing-with-screenshots

Use when testing web applications with visual verification - automates Chrome browser interactions, element selection, and screenshot capture for confirming UI functionality.

AgentWorkforce/relay · 32 tokens