skills.rest
arslan9024
arslan9024COMMUNITY
Explore all skills by this author →
GitHub

generative_ui

Generate interactive HTML widgets rendered inline in chat or as standalone artifacts.

Updated Jan 8, 2026
Search Tags:#html#data visualization#widget#tailwind#artifact#interactive ui#generative ui
One-click install
npx skills add https://github.com/arslan9024/White-Caves --skill generative-ui-arslan9024
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative_ui
Source: https://github.com/arslan9024/White-Caves/tree/main/.agents/skills/generative_ui
Command: npx skills add https://github.com/arslan9024/White-Caves --skill generative-ui-arslan9024

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Plain text and markdown cannot convey diagrams, data visualizations, or interactive controls. This Skill lets you render rich, interactive HTML interfaces directly in the conversation or as side-pane artifacts. ## Core Features & Use Cases - Inline Widgets: Embed compact interactive cards (under 500px tall) directly in chat using the <agent-embed> tag. - Standalone Artifacts: Create full-page dashboards, simulations, or app prototypes saved as self-contained HTML files. - Theme Integration: Widgets automatically match the host app's light/dark theme via injected CSS variables like --card, --foreground, and --border. - Use Case: When explaining a complex dataset, generate an interactive chart widget with Tailwind styling that the user can explore inline without leaving the conversation. ## Quick Start Ask the assistant to create an interactive HTML widget visualizing your data and embed it inline in the chat.

Frequently Asked Questions about generative_ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed an interactive HTML widget inline in chat?▼

Save a self-contained HTML file as an artifact with UserFacing set to true, then include an <agent-embed> tag with the file path in your chat response. Keep the widget under 500px tall so it fits the inline viewport.

What styling approach works for generative UI artifacts?▼

Use the allowlisted Tailwind CSS script from the gstatic CDN included in the document head. External CDNs are otherwise blocked by CSP, so all other styling and JavaScript must be inline in the HTML file.

Can widgets adapt to light and dark themes automatically?▼

Yes, the host iframe injects semantic CSS variables like --background, --card, --foreground, and --border. Reference these variables instead of hardcoded colors, and never declare local fallbacks on :root since the host manages them dynamically.

When should I use a standalone artifact instead of an inline embed?▼

Use a standalone artifact for content taller than 500px, such as dashboards, simulations, or app prototypes. Inline embeds suit compact widgets like small charts or diagrams that directly illustrate the surrounding explanation.

Why does my inline widget collapse to a sliver in chat?▼

This happens when you size the widget relative to the viewport using h-screen, min-h-screen, 100vh, or height: 100% on a top-level container. The frame derives its viewport from your content, so use padding for spacing instead.

Related Skills

Explore More Design & Creative Skills→
framerslabframerslab

interactive-widgets

Generate interactive HTML/CSS/JS widgets for web-based data visualization.

Official
Advanced
memectmemect
13

pdf-review-dashboard

Generate a self-contained HTML dashboard comparing PDFs with verification results.

Community
Intermediate
ZanderRussZanderRuss
18

plotly

Generate interactive and static data visualizations from Python with pandas DataFrames.

Community
Intermediate
legoutlegout
3

plotly

Generate interactive Plotly visualizations from structured datasets in Python.

Community
Intermediate