Agent Skills
› NeverSight/learn-skills.dev
› widgets-ui
widgets-ui
GitHub基于JSON声明式渲染React/Next.js UI组件的Widget Renderer。支持表单、按钮、卡片等丰富交互元素，用于生成动态界面、结构化输出及交互式数据展示。
Trigger Scenarios
widgets
declarative ui
json ui
widget renderer
agent widgets
dynamic ui
form widgets
card widgets
shadcn widgets
structured output ui
Install
npx skills add NeverSight/learn-skills.dev --skill widgets-ui -g -y
SKILL.md
Frontmatter
{
"name": "widgets-ui",
"description": "Declarative UI widgets from JSON for React\/Next.js from ui.inference.sh.\nRender rich interactive UIs from structured agent responses.\nCapabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes.\nUse for: agent-generated UIs, dynamic forms, data display, interactive cards.\nTriggers: widgets, declarative ui, json ui, widget renderer, agent widgets,\ndynamic ui, form widgets, card widgets, shadcn widgets, structured output ui"
}
Widget Renderer
Declarative UI from JSON via ui.inference.sh.
Quick Start
npx shadcn@latest add https://ui.inference.sh/r/widgets.json
Basic Usage
import { WidgetRenderer } from "@/registry/blocks/widgets/widget-renderer"
import type { Widget, WidgetAction } from "@/registry/blocks/widgets/types"
const widget: Widget = {
type: 'ui',
title: 'My Widget',
children: [
{ type: 'text', value: 'Hello World' },
{ type: 'button', label: 'Click me', onClickAction: { type: 'click' } },
],
}
<WidgetRenderer
widget={widget}
onAction={(action, formData) => console.log(action, formData)}
/>
Widget Types
Layout
{ "type": "row", "gap": 2, "children": [...] }
{ "type": "col", "gap": 2, "children": [...] }
{ "type": "box", "background": "gradient-ocean", "padding": 4, "radius": "lg", "children": [...] }
Typography
{ "type": "title", "value": "Heading", "size": "2xl", "weight": "bold" }
{ "type": "text", "value": "Body text", "variant": "bold" }
{ "type": "caption", "value": "Small text" }
{ "type": "label", "value": "Field label", "fieldName": "email" }
Interactive
{ "type": "button", "label": "Submit", "variant": "default", "onClickAction": { "type": "submit" } }
{ "type": "input", "name": "email", "placeholder": "Enter email" }
{ "type": "textarea", "name": "message", "placeholder": "Your message" }
{ "type": "select", "name": "plan", "options": [{ "value": "pro", "label": "Pro" }] }
{ "type": "checkbox", "name": "agree", "label": "I agree", "defaultChecked": false }
Display
{ "type": "badge", "label": "New", "variant": "secondary" }
{ "type": "icon", "iconName": "check", "size": "lg" }
{ "type": "image", "src": "https://...", "alt": "Image", "width": 100, "height": 100 }
{ "type": "divider" }
Example: Flight Card
const flightWidget: Widget = {
type: 'ui',
children: [
{
type: 'box', background: 'gradient-ocean', padding: 4, radius: 'lg', children: [
{
type: 'row', justify: 'between', children: [
{
type: 'col', gap: 1, children: [
{ type: 'caption', value: 'departure' },
{ type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },
]
},
{ type: 'icon', iconName: 'plane', size: 'lg' },
{
type: 'col', gap: 1, align: 'end', children: [
{ type: 'caption', value: 'arrival' },
{ type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },
]
},
]
},
]
},
],
}
Example: Form
const formWidget: Widget = {
type: 'ui',
title: 'Contact Form',
asForm: true,
children: [
{
type: 'col', gap: 3, children: [
{ type: 'input', name: 'name', placeholder: 'Your name' },
{ type: 'input', name: 'email', placeholder: 'Email address' },
{ type: 'textarea', name: 'message', placeholder: 'Message' },
{ type: 'button', label: 'Send', variant: 'default', onClickAction: { type: 'submit' } },
]
},
],
}
Gradients
| Name | Description |
|---|---|
gradient-ocean |
Blue teal gradient |
gradient-sunset |
Orange pink gradient |
gradient-purple |
Purple gradient |
gradient-cool |
Cool blue gradient |
gradient-midnight |
Dark blue gradient |
Handling Actions
const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
switch (action.type) {
case 'submit':
console.log('Form data:', formData)
break
case 'click':
console.log('Button clicked')
break
}
}
Related Skills
# Full agent component
npx skills add inferencesh/skills@agent-ui
# Chat UI blocks
npx skills add inferencesh/skills@chat-ui
# Tool UI
npx skills add inferencesh/skills@tools-ui
Documentation
- Widgets Overview - Understanding widgets
- Widget Schema - Widget JSON structure
- Agents That Generate UI - Building generative UIs
Component docs: ui.inference.sh/blocks/widgets
Version History
- e0220ca Current 2026-07-05 20:49
Dependencies
-
suggested
inferencesh/skills@agent-ui -
suggested
inferencesh/skills@chat-ui -
suggested
inferencesh/skills@tools-ui
