generative-ui-minis

Generate Claude Artifact-style HTML prototypes with cards, tables, timelines, code blocks, and charts from structured user instructions.

1|Updated Apr 17, 2026
One-click install
npx skills add https://github.com/liueggy/my_mini_skills --skill generative-ui-minis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative-ui-minis
Source: https://github.com/liueggy/my_mini_skills/tree/main/generative-ui-minis
Command: npx skills add https://github.com/liueggy/my_mini_skills --skill generative-ui-minis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Converts free-text descriptions into Claude Artifact-style UI artifacts, providing a self-contained HTML prototype that can be previewed in Minis.

Core Features & Use Cases

  • Automatically convert textual specifications into structured UI artifacts with components like cards, tables, timelines, code blocks, and charts.
  • Generate a single-file HTML artifact that can be previewed, shared, and iterated within Minis.
  • Save outputs to /var/minis/workspace for easy access and reuse.

Quick Start

将以下文本描述渲染为 Claude Artifact 风格的单文件 HTML 原型并保存在 Minis 工作区。

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 HTML artifacts from text descriptions for UI prototyping?▼

To generate HTML artifacts from text, provide structured user instructions to render cards, tables, timelines, and charts into a self-contained HTML file. The output is saved to the Minis workspace for immediate preview and iteration.

What is a Claude Artifact-style HTML artifact and when do I need it?▼

A Claude Artifact-style HTML artifact is a single-file UI prototype containing components like code blocks, charts, or tables. You need it when converting free-text specifications into a structured, shareable visual prototype within Minis environments.

Can I render text into charts and tables within Minis environments?▼

Yes, you can render text into charts and tables within Minis. The generation process applies structured instructions to output these specific UI components, automatically saving the single-file HTML artifact to the designated workspace directory.

What do I need to include in SKILL.md to render HTML artifacts deterministically?▼

To render HTML artifacts, your SKILL.md frontmatter must include a name and description. This metadata ensures the generation process outputs a self-contained HTML file via a deterministic script path to the Minis workspace.

Does this HTML artifact generation work without external dependencies?▼

Yes, HTML artifact generation works without external dependencies. It requires no listed packages and outputs a completely self-contained single-file HTML artifact, ensuring the rendered UI prototypes are easily previewed and shared.

What are the limitations of generating single-file HTML UI prototypes?▼

Limitations of generating single-file HTML prototypes include being restricted to the components specified in instructions, such as cards and timelines. Complex multi-file web applications or backend logic are not supported by this self-contained artifact approach.