skills.rest
riipandi
riipandiCOMMUNITY
Explore all skills by this author →
Website𝕏@riipandiGitHub

generative-ui-minis

Generate single-file HTML artifact pages with cards, tables, timelines, code blocks, and charts from text descriptions.

1|Updated Jun 20, 2026
Search Tags:#python#visualization#artifact#cards#generative ui#html generator#single-file page
One-click install
npx skills add https://github.com/riipandi/minis-skills --skill generative-ui-minis-riipandi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative-ui-minis
Source: https://github.com/riipandi/minis-skills/tree/main/generative-ui-minis
Command: npx skills add https://github.com/riipandi/minis-skills --skill generative-ui-minis-riipandi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Turning plain text responses into visual, structured pages usually requires manual HTML work. This Skill converts natural language descriptions or JSON specs into self-contained HTML artifact pages that can be previewed and shared directly from the Minis workspace. ## Core Features & Use Cases - Multi-component rendering: Supports cards, tables, record lists, timelines, code blocks, bar charts, and collapsible details in one page. - Two input modes: Auto-infer blocks from plain text, or render from an explicit JSON spec for precise control. - Use Case: A user asks to "organize this weekly report into cards, a risk table, and a timeline" — the Skill runs its Python script and outputs a styled HTML artifact to /var/minis/workspace/ for preview and sharing. ## Quick Start Ask the assistant to turn your content into an artifact page, for example: generate a card and timeline artifact page for this project status report.

Frequently Asked Questions about generative-ui-minis

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

FAQPage Schema
How do I generate an HTML artifact page from a text description?▼

Run the generative_ui_artifact.py script with a title and --text argument describing the content. The script infers blocks like cards, tables, and timelines from your text and writes a single HTML file to /var/minis/workspace/.

What components can the generative UI artifact render?▼

It supports seven block types: cards, table, records, timeline, code, chart, and details. Each block is defined in a JSON spec with a type field and rendered into styled HTML sections.

Can I render an artifact from a JSON spec instead of plain text?▼

Yes, pass a JSON spec file with the --spec flag to generative_ui_artifact.py. The spec defines title, summary, chips, and a blocks array, giving you full control over each component's content.

Does the generated HTML require external JavaScript or libraries?▼

No, the output is a fully self-contained HTML file with inline CSS. Charts are built-in bar charts rendered with pure HTML and CSS, so no external JS dependencies are needed.

What are the limitations of this generative UI approach?▼

It cannot inject components into the chat host's native message layer, run real-time database-driven frontends, or host long-running interactive servers. It only produces static single-file HTML artifacts.

Related Skills

Explore More Software Engineering Skills→
bytedancebytedance
417

link-reader

Extract titles and content from URLs into structured JSON.

Official
Intermediate
JoaovsalesJoaovsales
1

html-presentation

Generate a self-contained HTML presentation from structured JSON or markdown content.

Community
Advanced
PinvouPinvou
2.0k

visualizer

Generate validated Chart.js HTML dashboards from structured data and business metrics.

Official
Advanced
simplerick0simplerick0

python-frontend

Build Python web frontends with NiceGUI, Streamlit, Gradio, or Panel.

Community
Intermediate