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.