generative-ui-minis

name	generative-ui-minis
description	Automatically convert text descriptions into Claude Artifact-style single-file HTML generators in the current Minis environment, supporting cards, tables, records, timelines, code blocks, charts, and other output formats; call this skill when the user mentions these components or visualization pages.
metadata	{"openclaw":{"emoji":"🧩","requires":{"bins":["python3"]}}}

Generative UI Minis Skill

This is a Claude Artifact style generator skill 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 it as a single-file HTML artifact using Python
3. Save it to /var/minis/workspace/
4. Let users preview, share, and iterate on it

Auto-trigger Scenarios

Call this skill when the user expresses any of these intents:

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

Especially when the user mentions: cards, table, records, code block, timeline, chart, visualization page, artifact

This skill will generate the additional page by default.

Currently Supported Components

• cards: Info cards / KPI cards
• table: Tables
• records: Record lists
• timeline: Timelines / step flows
• code: Code blocks
• chart: Built-in bar charts
• details: Collapsible details

Main Scripts

1) Full Artifact Generator

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

Outputs to:

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

2) Render from 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": "Current iteration"}
      ]
    },
    {
      "type": "table",
      "title": "Record Table",
      "columns": ["Date", "Item", "Status"],
      "rows": [["03-17", "Generator Dev", "Done"]]
    },
    {
      "type": "timeline",
      "title": "Timeline",
      "items": [
        {"title": "Phase 1", "desc": "Requirements gathering"},
        {"title": "Phase 2", "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": "Dev", "value": 85}
      ]
    }
  ]
}

Recommended Workflow

1. Identify if user needs an artifact page
2. If just natural language description, use script to auto-infer basic blocks
3. If content is complex, organize into JSON spec then render
4. After generating HTML, send workspace link to user
5. Continue modifying spec or template based on feedback

Capability Boundaries

Can do:

• Generate single-file artifact HTML
• Support cards, tables, records, timelines, code blocks, charts
• Suitable as visual supplement to responses

Cannot do currently:

• Chat host native message-level component injection
• Real-time database-driven complex frontend apps
• Long-running interactive server side

Trigger Suggestions

If user says:

• "Give me a card version"
• "Also generate table/timeline/code block"
• "Organize into artifact page"

Do not just reply with text -- run this skill directly to generate an additional HTML artifact.