generative-ui-minis

Generative UI Minis Skill

This is a Claude Artifact-style generator skill designed for the current Minis / iSH environment.

The goal is not to modify the chat host itself, but to:

1. Organize user instructions into a structured spec
2. Render them with Python into a single-file HTML artifact
3. Save it to /var/minis/workspace/
4. Let users preview, share, and continue iterating directly

Automatic Trigger Scenarios

Use this skill first when users express any of the following intentions:

• "Create a Claude Artifact / Claude-style page"
• "Turn the answer into cards"
• "Generate a table / record sheet / checklist"
• "Organize the content into a timeline"
• "Generate a code block display page"
• "Create a chart / visualization page"
• "Render this content as an HTML prototype"
• "Create an interactive explanation page / artifact"

In particular, when the user also mentions: cards, tables, records, code blocks, timelines, charts, visualization pages, artifacts assume by default that this skill should be invoked to generate an additional page.

Currently Supported Unified Components

• cards: information cards / KPI cards
• table: table
• records: record list
• timeline: timeline / step flow
• code: code block
• chart: built-in bar chart
• details: collapsible details

Main Scripts

1) Complete Artifact Generator

python3 /var/minis/skills/generative-ui-minis/scripts/generative_ui_artifact.py \
  "Weekly Project Report" \
  --text "Need overview cards\nNeed risk table\nNeed timeline\nNeed code block\nNeed chart"

By default, this outputs to:

/var/minis/workspace/<title>_artifact.html

2) Render from a JSON spec

python3 /var/minis/skills/generative-ui-minis/scripts/generative_ui_artifact.py \
  "Demo" \
  --spec /path/to/spec.json \
  --out /var/minis/workspace/demo_artifact.html \
  --json-out /var/minis/workspace/demo_spec.json

spec Format

{
  "title": "Generative UI Example",
  "summary": "Unified output of multiple components.",
  "chips": ["Artifact", "Cards", "Table"],
  "blocks": [
    {
      "type": "cards",
      "title": "Overview Cards",
      "items": [
        {"title": "Status", "value": "In Progress", "desc": "In the current iteration"}
      ]
    },
    {
      "type": "table",
      "title": "Record Sheet",
      "columns": ["Date", "Item", "Status"],
      "rows": [["03-17", "Generator Development", "Done"]]
    },
    {
      "type": "timeline",
      "title": "Timeline",
      "items": [
        {"title": "Phase One", "desc": "Requirements Organization"},
        {"title": "Phase Two", "desc": "Page Rendering"}
      ]
    },
    {
      "type": "code",
      "title": "Sample Code",
      "language": "python",
      "content": "print('hello artifact')"
    },
    {
      "type": "chart",
      "title": "Progress Chart",
      "series": [
        {"label": "Design", "value": 70},
        {"label": "Development", "value": 85}
      ]
    }
  ]
}