generative-ui-contracts

generative-ui-contracts is a skill for Claude Code, Codex from YankielDBC2/codex-skills-library. It costs 36 tokens per session (382 once invoked), scanned A, original, MIT.

A set of rules for interfaces generated by AI or driven by structured data. It requires model output to use approved, validated components instead of arbitrary HTML or executable code.

In plain words
What is it for?
Use it when defining component schemas, validating model-produced layouts and actions, handling invalid output, and testing the UI boundary.
Why use it?
It reduces unsafe or broken interface output and makes generated screens easier to test, debug, and maintain.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/yankieldbc2/codex-skills-library/generative-ui-contracts
Any agent
npx skills add YankielDBC2/codex-skills-library --skill generative-ui-contracts
Clone the repo
git clone --depth 1 https://github.com/YankielDBC2/codex-skills-library

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for generative-ui-contracts

README.md
[![agentmods](https://agentmods.dev/badge/skills/yankieldbc2/codex-skills-library/generative-ui-contracts.svg)](https://agentmods.dev/skills/yankieldbc2/codex-skills-library/generative-ui-contracts)
Your own site
<a href="https://agentmods.dev/skills/yankieldbc2/codex-skills-library/generative-ui-contracts"><img src="https://agentmods.dev/badge/skills/yankieldbc2/codex-skills-library/generative-ui-contracts.svg" alt="Measured on agentmods" height="20"></a>
Per session 36 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 382 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00036 $0.00382
Opus 5 $0.00018 $0.00191
Sonnet 5 $0.00007 $0.00076
Haiku 4.5 $0.00004 $0.00038

Measured 5d ago against content hash 822099ea5f60, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

generative-ui-contracts scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/generative-ui-contracts/SKILL.md · 51 lines

What it actually says

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.
Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 51 lines · 36 tokens per session scan A 822099ea5f60

Subscribe to this mod's changes

generative-ui-contracts is a skill published in the GitHub repository YankielDBC2/codex-skills-library (10 stars, last pushed 1mo ago), licensed MIT. It adds 36 tokens to every session and 382 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

openbot-data-access

Governs how the OpenBot browser app reads and writes server data — every request goes through client in app/src/lib/client.ts, every read is a queryOptions factory in app/src/lib/ /queries.ts, every write is a mutationOptions factory in app/src/lib/ /mutations.ts, and components consume them through…

CopilotKit/OpenBot · 189 tokens

openbot-screen-layout

The default layout for every OpenBot configuration screen — PageShell and its prose/wide widths, PageSection and PageRows, Item row composition, the settings-row pattern where a summary and a chevron open a dialog, and the size and variant vocabulary. This is what a new screen looks like unless an instruction says…

CopilotKit/OpenBot · 183 tokens

frontend-slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

zarazhangrui/frontend-slides · 63 tokens

a2ui-generation

Design and generate A2UI updateComponents and updateDataModel payloads for three modes (DTO component, non-DTO component, non-DTO page). Use when asked to create or refine A2UI cards, components, or pages from DTO/JSON/business data, generate Python transformer code for DTO-driven components, iterate on existing A2UI…

AGenUI/AGenUI · 147 tokens

vera-language

Write programs in the Vera programming language. Use when asked to write, edit, debug, or review Vera code (.vera files). Vera is a statically typed, purely functional language with algebraic effects, mandatory contracts, and typed slot references (@T.n) instead of variable names.

aallan/vera · 61 tokens

writer-documents

Use when creating, opening, or editing LibreOffice Writer ODT documents, or DOCX documents only when Microsoft Word compatibility is explicitly required.

agent0ai/agent-zero · 32 tokens