skills.rest
labs21-dev
labs21-devOFFICIAL
Explore all skills by this author →
GitHub

generative-ui

The provided code snippet does not contain enough information to determine authorship.

28|2|Updated Feb 5, 2026
Search Tags:#sandbox#generative-ui#ui-rendering#typed-schema#streamed-ui#host-boundaries#design-contracts
One-click install
npx skills add https://github.com/labs21-dev/agents-stack --skill generative-ui-labs21-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative-ui
Source: https://github.com/labs21-dev/agents-stack/tree/main/skills-optional/using-design/generative-ui
Command: npx skills add https://github.com/labs21-dev/agents-stack --skill generative-ui-labs21-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Generative UI skill enforces strict host-owned boundaries for model-generated browser surfaces, ensuring that interface structures, components, and state updates come from a designed contract rather than ad hoc output. It reduces the risk of unsafe markup, uncontrolled actions, and brittle hand-authored UI that can't adapt to model-driven prompts.

Core Features & Use Cases

  • Classify and route UI work to the appropriate rendering contracts (standalone HTML, typed component schema, or streamed UI).
  • Enforce a shared design contract by reading tokens and design sources before rendering.
  • Guard unsafe payloads, map actions to host handlers, and provide clear fallbacks during streaming or failures.
  • Use cases include ephemeral demos, production-grade in-app surfaces, and progressive UI experiences for long-running agent turns.

Quick Start

Lock the design contract using tokens or a brand spec and choose a render contract (standalone HTML, typed component schema, or streamed UI) to implement.

Frequently Asked Questions about generative-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate browser UI from a model while enforcing strict design contracts?▼

Model-driven browser UI generation enforces strict host-controlled boundaries by reading design tokens or brand specs before rendering, ensuring structures and state updates follow a designed contract rather than ad hoc output.

What are the supported rendering contracts for model-driven UI generation?▼

Model-driven UI generation supports three rendering contracts: standalone HTML for sandboxed experiences, typed component schema for structured rendering, and streamed UI for progressive agent-driven interface updates.

How do I set up schema-driven rendering to prevent unsafe model-generated markup?▼

Schema-driven rendering prevents unsafe markup by defining a renderer boundary where the model emits only allowed payloads and the host controls side effects, with built-in guardrails and clear fallbacks during failures.

Does generative-ui work for streaming UI surfaces during long-running agent turns?▼

Generative-ui works for streaming UI surfaces by supporting progressive UI experiences for long-running agent turns, providing typed component schema output and clear fallbacks during streaming or failure states.

What's the best way to map agent actions to host handlers in a sandboxed HTML experience?▼

Mapping agent actions to host handlers in sandboxed HTML requires defining a renderer boundary where guardrails intercept unsafe payloads and route allowed actions directly to controlled host-side execution.

Related Skills

Explore More Design & Creative Skills→
RebelliousSmileRebelliousSmile
1

diffuse

Create reusable UI components from design tokens and components JSON.

Community
Advanced
mrkhachaturovmrkhachaturov

convert-web-app

Convert standalone web apps into sandboxed-iframe MCP App resources.

Community
Advanced
gkswls5006-webgkswls5006-web

moai-domain-brand-design

Generate brand-consistent design tokens and accessibility-compliant guidelines for web projects.

Community
Advanced
npc-chrisnpc-chris
1

review

Reviews pull requests for SQL safety, LLM trust boundary violations, conditional side effects, and structural issues.

Community
Advanced