# Generative UI Contracts

> Use this when building AI-generated UI, chat-driven interfaces, schema-driven components, safe UI renderers, typed component contracts, or model-produced layouts.

- Skill: `yankieldbc2/generative-ui-contracts` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yankieldbc2/generative-ui-contracts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yankieldbc2/generative-ui-contracts/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: YankielDBC2 (https://skillmd.com/u/yankieldbc2)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/yankieldbc2/generative-ui-contracts

---


# Generative UI Contracts

## Goal

Keep AI-generated UI safe, typed, renderable, and maintainable by constraining output through schemas and approved components.

## When to use

Use when an AI agent creates UI, selects components, generates layout JSON, manipulates product pages, or returns actions/components that the frontend renders.

## Workflow

1. Do not let the model output arbitrary HTML, code, or unsafe component trees for direct execution.
2. Define allowed components, props, variants, actions, and data schemas before rendering model output.
3. Validate model output server-side or at the boundary before passing it to UI renderers.
4. Separate assistant reasoning, user-facing messages, typed actions, and UI payloads.
5. Add fallback states for invalid, incomplete, or unsupported model output.
6. Keep generated UI deterministic enough to debug, test, and audit.
7. Log safe metadata and avoid storing secrets, payment data, or sensitive content in UI payloads.

## Quality bar

- Add or update schema/unit tests when practical.
- Run typecheck and relevant frontend/backend validation.
- Test invalid payload behavior or document why it was not tested.

## Validation

- Generated UI is constrained by explicit contracts.
- Frontend only renders known components with validated props.
- Failures are recoverable and visible to developers without exposing internals to users.

## Final response

- Summarize contracts added, validation boundary, and unsupported cases.