Generative UI

The design system behind claude.ai widgets: charts, diagrams, explainers and dashboards rendered inline, flat, compact and dark-mode safe.

⚠️ **Trading warning / Avertissement trading** : informational only, not investment advice. This listing sits in a finance collection because its widgets often display financial data, but a chart is a presentation layer, not analysis: rendering a price series beautifully says nothing about what it will do next, and acting on a pretty visual carries the same risk of loss as acting on a plain one. No output here is a promise of return. Curated by Skill Harbor: the complete design system and template set for the generative UI built into claude.ai, the show_widget tool that renders interactive HTML and SVG inline in a conversation. The skill routes on the verb, not the noun: how something works becomes an illustrative SVG diagram, steps become a flowchart, a comparison becomes a grid, a data series becomes a Chart.js chart, and an explanation with a parameter becomes an interactive explainer with sliders and live numbers. Its rules are strict and opinionated: styles first, then content, then script; flat surfaces with no gradients, shadows or glow; two font weights only; sentence case; no stock AI-design tics like cream panels, pill buttons or numbered section labels; external resources only from a short CDN allowlist; CSS variables everywhere so dark mode is mandatory and automatic; and every displayed number rounded. It ships working templates for Chart.js dashboards (with the onload pattern that survives streaming), SVG diagrams on a 680-pixel viewBox with prebuilt node and color classes, and interactive explainers that use sendPrompt for follow-ups, plus three reference files covering the color system, SVG patterns and Chart.js configuration. From the himself65/finance-skills repository (MIT), where it serves as the visual layer for the collection's other analysis skills. Honest caveats: show_widget exists on claude.ai; in a client without that tool the same templates still produce standalone HTML or SVG, but the inline rendering is the point; the design tokens target the claude.ai host look, so widgets can feel off-brand inside a different product; and the rule set is deliberately restrictive, which is why the output looks consistent. Skill Harbor never reviews the code, review it yourself before use.

At a glance

What: The design system behind claude.ai widgets: charts, diagrams, explainers and dashboards rendered inline, flat, compact and dark-mode safe.
Cost: Free
Needs: Use "Generative UI" with your Muse.
Install: Copy the installer prompt below into your Muse — your agent does the rest.

⚠️ **Trading warning / Avertissement trading** : informational only, not investment advice. This listing sits in a finance collection because its widgets often display financial data, but a chart is a presentation layer, not analysis: rendering a price series beautifully says nothing about what it will do next, and acting on a pretty visual carries the same risk of loss as acting on a plain one. No output here is a promise of return. Curated by Skill Harbor: the complete design system and template set for the generative UI built into claude.ai, the show_widget tool that renders interactive HTML and SVG inline in a conversation. The skill routes on the verb, not the noun: how something works becomes an illustrative SVG diagram, steps become a flowchart, a comparison becomes a grid, a data series becomes a Chart.js chart, and an explanation with a parameter becomes an interactive explainer with sliders and live numbers. Its rules are strict and opinionated: styles first, then content, then script; flat surfaces with no gradients, shadows or glow; two font weights only; sentence case; no stock AI-design tics like cream panels, pill buttons or numbered section labels; external resources only from a short CDN allowlist; CSS variables everywhere so dark mode is mandatory and automatic; and every displayed number rounded. It ships working templates for Chart.js dashboards (with the onload pattern that survives streaming), SVG diagrams on a 680-pixel viewBox with prebuilt node and color classes, and interactive explainers that use sendPrompt for follow-ups, plus three reference files covering the color system, SVG patterns and Chart.js configuration. From the himself65/finance-skills repository (MIT), where it serves as the visual layer for the collection's other analysis skills. Honest caveats: show_widget exists on claude.ai; in a client without that tool the same templates still produce standalone HTML or SVG, but the inline rendering is the point; the design tokens target the claude.ai host look, so widgets can feel off-brand inside a different product; and the rule set is deliberately restrictive, which is why the output looks consistent. Skill Harbor never reviews the code, review it yourself before use.

Version:

h

Created by: himself65

Not verified? How to check before you trust →

Install — Free · open source (MIT) View source code

⌁

Install

Copy the install package below, then paste it into Muse

Wanna be extra careful?

The install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?

How to check a build before installing →

After installation, ask me if I want to leave private feedback
Private for now: only the Skill Harbor team sees it. Sellers may be looped in later.

Use "Generative UI" with your Muse. Prerequisites: a claude.ai conversation, where the built-in show_widget tool renders the widgets inline; no API key, account or install beyond the skill itself. In a client without show_widget, ask for the same visual as a standalone HTML file instead. This is a design skill: it renders visuals, including financial ones, and makes no market claims. 1. Open the skill: https://github.com/himself65/finance-skills/blob/main/plugins/ui-tools/skills/generative-ui/SKILL.md and copy the full SKILL.md text (the skill also reads its included references/ files on the design system, SVG diagrams and Chart.js, keep the repo folder handy). 2. Paste it into a chat with Muse and add what you want shown, for example: "Visualize this: a chart of revenue by quarter with a slider for growth rate, so I can see how the forecast changes." 3. Judge the widget by the rules it claims: flat, sentence case, readable in dark mode, numbers rounded, and the explanation in the text around the widget, not crammed inside it. Tip: name the verb in your request (show, compare, explain, draw); the skill routes the visual type from the verb, and a clear verb beats a long description of the layout. Safety: a skill is plain-text instructions; it runs nothing by itself and loads external code only from its CDN allowlist. Informational only, not investment advice, even when the widget displays financial data.

?

Questions

How do I install a build?

Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.

Where does my money go?

Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.

What does the ✓ next to a creator’s name mean?

It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.