create-interface_skill

This skill renders interactive HTML interfaces in chat using the render_ui tool to display forms, charts, dashboards, and widgets.

HTML

4

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill cdeistopened/opened-vault --skill create-interface

SKILL.md6.2 KB

Overview

This skill renders interactive HTML interfaces directly inside chat using the render_ui tool. It lets you display widgets, forms, charts, tables, and small dashboards that inherit the app theme and support CSS variables. Use it to present interactive content without leaving the chat context.

How this skill works

Provide the HTML body to the mcp__noetect-ui__render_ui tool along with an optional title and height. The UI loads in a sandboxed iframe that auto-resizes by default or can use a fixed height. The iframe applies theme-aware CSS variables and pre-styled elements so interfaces look consistent across light and dark modes.

When to use it

Show a form, survey, or contact widget inside chat
Render charts, tables, or a stats dashboard for quick data inspection
Build small interactive widgets like counters, toggles, or previews
Display theme-consistent UI elements without manual CSS setup
Embed sample layouts or component demos during design reviews

Best practices

Send only the HTML body (no <html> wrapper) and keep markup focused and lightweight
Prefer CSS variables and built-in utility classes for consistent styling across themes
Use the default auto-resize unless you need a fixed viewport, then set height in pixels
Keep scripts self-contained; iframe scripts cannot access parent window or storage
Limit large assets and external network calls to avoid slow iframe loading

Example use cases

A contact form card with inputs and a submit button rendered in-chat
A three-panel stats dashboard showing users, events, and uptime
A data table with edit buttons for quick record inspection
An interactive counter or small JS widget for live demos
A themed code snippet or configuration preview using pre-styled code and pre elements

FAQ

No. The UI runs inside a sandboxed iframe and cannot access parent window, cookies, or localStorage.

How do I keep the iframe from resizing?

Provide a fixed height parameter (pixels) when calling the render tool to disable auto-resize.