# Gen UI

Build interactive HTML widgets (simulators, explorers, calculators, UI mockups) inline...

- Repository: https://github.com/KunAgent/Kun (6362 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add KunAgent/Kun --skill gen-ui -g -a claude-code -y`
Codex: `npx skills add KunAgent/Kun --skill gen-ui -g -a codex -y`
Cursor: `npx skills add KunAgent/Kun --skill gen-ui -g -a cursor -y`
Gemini CLI: `npx skills add KunAgent/Kun --skill gen-ui -g -a gemini-cli -y`

## Description

Build interactive HTML widgets (simulators, explorers, calculators, UI mockups) inline in desktop conversations with render_widget.

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

# Interactive Widgets (Gen UI)
Copyright (c) 2026 KunAgent. Licensed under the MIT License.

Use `render_widget` to show a small interactive page inside the current desktop conversation. It is available only when the tool is advertised for this turn.

## When to build a widget
- Build one when seeing or manipulating something makes the answer clearer: parameter explorers ("what happens when…"), simulations, algorithm step-throughs, interactive charts, calculators, timelines, or UI mockups with alternatives.
- Do not build one for a plain table (answer in Markdown), a static structure (Mermaid code block), a simple governed chart (`render_chart` when advertised), or decoration.
- A request for a website, app page, component, or any project change is project work: edit the workspace instead of rendering a widget.

## Output contract
- Call `render_widget` with `title` (short, user facing) and `html` (an HTML fragment). Use `path` instead of `html` only to re-render an existing `.html` file in the workspace.
- Write a fragment: markup plus optional `<style>` and `<script>`. No `<!doctype>`, `<html>`, `<head>` or `<body>`.
- Give the root element a unique id and query it with `document.getElementById`. Never depend on `document.currentScript`.
- Keep it under 1 MB. Aggregate, sample, or round large data instead of inlining raw rows.
- Use `mode: "wide"` only for a full desktop application mockup or panels that must stay side by side. Everything else uses the default inline mode.
- Do not use `fetch`, XHR, WebSocket, forms that submit, `window.open`, or browser storage for important data. The page has no network access except static libraries.
- After the tool call, reply with at most a short conclusion. Never describe the HTML, announce a widget, or repeat the data shown in it.

The rest: https://github.com/KunAgent/Kun/blob/HEAD/resources/bundled-skills/gen-ui/SKILL.md