# Generative UI (agent skill)

> Generative UI is an agent skill (a SKILL.md file) from himself65/finance-skills. Design system and templates for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. It works with Claude Code, Codex and Cursor and has 3,382 GitHub stars across a repository of 3 listed skills.

Design system and templates for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. Use this skill whenever the user wants visual or interactive output rather than plain text or markdown: charts and dashboards, diagrams, flowcharts and architecture drawings, mockups, comparison grids, illustrations, interactive explainers ("explain how X works" with a visual), or tools with sliders, toggles, and live-updating…

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/himself65/finance-skills |
| Skill path | plugins/ui-tools/skills/generative-ui/SKILL.md |
| Skill name | generative-ui |
| GitHub stars | 3,382 |
| Installs on skills.sh | not listed |
| License | MIT |
| Skills in repo | 3 |
| Plugin marketplace | finance-skills |
| Official | no |
| Works with | Claude Code, Codex, Cursor |
| Category | Design & frontend |
| Last commit | Oct 5, 2026 |

## When it triggers

- "explain how X works"
- "show me"
- "visualize"
- "draw"
- "chart this"

## Add this skill

### Claude Code

```sh
/plugin marketplace add himself65/finance-skills
/plugin install finance-ui-tools@finance-skills
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/himself65/finance-skills.git
cp -r finance-skills/plugins/ui-tools/skills/generative-ui .agents/skills/generative-ui   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/himself65/finance-skills.git
cp -r finance-skills/plugins/ui-tools/skills/generative-ui .cursor/skills/generative-ui   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

---

Canonical page: https://appsgit.com/skills/himself65-generative-ui
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.