| name | generative-ui |
| description | Create interactive HTML widgets, dashboards, diagrams, and visual explainers for requests that are better shown than described. |
| license | Apache-2.0 |
| compatibility | >=1.0 |
| allowed-tools | generate_file |
Generative UI
Use this skill when the user wants an interactive visual response instead of plain text.
When to use
- Interactive explainers
- Small simulations and calculators
- Dashboards and scorecards
- Architecture diagrams and flow visualizations
- Visual summaries of structured data
Required approach
- Decide whether the request is genuinely more useful as a visual artifact than as prose.
- If yes, use the
generate_file tool to create a single self-contained HTML file.
- Prefer inline CSS and inline JavaScript so the widget works as a portable artifact.
- Prefer semantic HTML and accessible controls with clear labels.
- Prefer SVG for diagrams and simple visualizations; use Canvas only when animation is necessary.
- Keep the layout responsive and dark-mode friendly.
- In your final response, describe what you created without mentioning file paths or sandbox details.
Implementation rules
- Save the result as
.html
- Keep everything in one file unless the user explicitly asks for multiple assets
- Do not depend on local files outside the generated artifact
- Avoid external CDNs unless the user explicitly asks for them
- Include concise instructional copy in the UI when it helps the user understand how to interact with it
- Prefer simple, robust controls such as sliders, buttons, tabs, toggles, and tables
Suggested patterns
Interactive explainer
- Short title and one-sentence summary
- One or two controls
- Live-updating numbers or chart
- Brief interpretation below the visualization
Dashboard
- Summary cards at the top
- One primary chart
- One compact table or detail panel
- Clear units and legends
Diagram
- Use SVG with labels and arrows
- Keep spacing generous
- Keep text readable at common laptop widths
Tool usage
Use:
generate_file(code="...", filename="widget.html")
Generate complete Python that writes the full HTML document to disk.
