# Build Declarative React Interfaces from JSON

Structured agent responses often need a consistent interactive interface. This skill maps widget data into React layouts, controls, forms, and action events.

## Install

```bash
npx skillstore add inferen-sh/widgets-ui
```

## Metadata

- Status: approved
- Slug: inferen-sh-widgets-ui
- Skillstore revision: r2
- Version status: missing
- Tree hash: f7a1a31ba37dc66c9192637f43191698989b8dafda6cfae64b9a77850f1d46c1
- Author: inferen-sh
- GitHub username: inferen-sh
- License: MIT
- Repository: https://github.com/inferen-sh/skills/tree/main/ui/widgets-ui/
- Ref: 4121de961d1b6f2ffca856260e239505c302452c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 69
- Public page: https://skillstore.pages.dev/skills/inferen-sh-widgets-ui
- Manifest: https://skillstore.pages.dev/api/skills/inferen-sh-widgets-ui/manifest

## Capabilities

- Defines row, column, and box layouts with spacing, alignment, backgrounds, padding, and radius options.
- Represents titles, text, captions, labels, badges, icons, images, and dividers as widget data.
- Builds forms with inputs, text areas, selects, checkboxes, and submit buttons.
- Connects click and submit actions to a React action handler.
- Provides React and Next.js examples for cards, forms, and structured agent responses.

## Use Cases

- Generate Agent Response Interfaces: Convert structured model output into predictable cards, controls, and layouts inside a React application.
- Create Dynamic Intake Forms: Describe input fields and submit actions as widget data for changing operational workflows.
- Prototype Reusable Data Cards: Assemble travel, status, or summary cards from supported layout and display widgets.

## Prompt Templates

### Create a Simple Information Card

```
Create a widget for [topic] with a title, two text fields, and one action button. Use only documented widget types.
```

### Build a Contact Form

```
Design a contact widget with name, email, message, consent, and submit controls. Include clear field names and a submit action.
```

### Compose a Responsive Result Card

```
Design a [result type] card using nested rows and columns. Include status, primary details, metadata, and relevant action events.
```

### Specify an Interactive Workflow

```
Define a multi-section widget for [workflow]. Include validation requirements, action meanings, loading states, error states, and integration notes for the handler.
```

## Limitations

- The skill documents widget construction but does not include the renderer source.
- Installation downloads components from an external registry and requires package tooling.
- Available widget properties are limited to the documented schema and renderer implementation.
- Applications must provide validation, persistence, authentication, and action-side business logic.

## Best Practices

- Validate generated widget data against the renderer schema before rendering.
- Use stable action types and handle every action explicitly in application code.
- Provide accessible labels, alternative image text, and clear control names.

## Anti Patterns

- Do not treat generated widget data as trusted business logic or authorization.
- Do not accept undocumented widget properties without validation and fallback behavior.
- Do not execute actions directly from labels or other uncontrolled text values.

## Security Audit

- Audited at: 2026-08-06T11:29:19.762\+00:00
- Summary: Most static command findings are false positives caused by Markdown fences, inline code, or non-executing TypeScript and JSON examples. Three findings contain real installation commands, while the remote registry and external image create limited network exposure. The unrelated belt CLI recommendation adds a contextual supply-chain concern.

## Stats

- Views: 129
- Downloads: 8
- Favorites: 0
- Popularity score: 0