Agent-Skills.md

Agent Skills: Generative UI

>-

UncategorizedID: b-open-io/prompts/generative-ui

Repository

b-open-io/prompts
b-open-io
114

Install this agent skill to your local

pnpm dlx add-skill https://github.com/b-open-io/prompts/tree/HEAD/modules/web-dev/skills/generative-ui

Skill Files

Browse the full folder contents for generative-ui.

Download Skill

Loading file tree…

modules/web-dev/skills/generative-ui/SKILL.md

Skill Metadata

Name
generative-ui
Description
>-

Generative UI

Produce JSON specs constrained to a catalog of predefined components. Never write arbitrary JSX — generate structured JSON that a renderer turns into platform-specific UI.

For conceptual background, decision criteria, and common patterns, see README.md.

Current Baseline

Verify package versions before implementation with bun pm view <package> version. The tested stable baseline is json-render 0.19.0 with React 19, Zod 4, and Tailwind 4. Pin a coherent release line; do not mix stable packages with unreleased main behavior.

Use the flat React spec shape published by @json-render/react: root is an element key and elements is a map whose children arrays contain keys. Validate every generated spec before rendering and retry or fall back to text on failure.

Renderer Selection

| Need | Package | Skill | |------|---------|-------| | Web app UI | @json-render/react | json-render-react | | shadcn/ui components | @json-render/shadcn | json-render-shadcn | | MCP Apps adapter | @json-render/mcp | json-render-mcp | | Formatting and math | @json-render/directives | json-render-directives | | Development inspector | @json-render/devtools* | json-render-devtools | | Mobile native | @json-render/react-native | json-render-react-native | | Video compositions | @json-render/remotion | json-render-remotion | | HTML email | @json-render/react-email | json-render-react-email | | OG/social images | @json-render/image | json-render-image | | Vue web apps | @json-render/vue | (no skill yet) | | PDF documents | @json-render/react-pdf | (no skill yet) |

Always invoke the renderer-specific skill for implementation details. This skill covers when and why; the renderer skills cover how.

For React work, invoke json-render-core and json-render-react together. Add json-render-directives for deterministic display calculations and json-render-devtools during development.

Catalog Design Principles

  1. Pick, don't spread — Explicitly select components from shadcnComponentDefinitions. Never spread all 36 into your catalog.
  2. Minimal catalog — Start with 5-8 components. Add more only when the AI needs them.
  3. Custom components — Define with Zod schemas. Use slots for children, actions for interactivity.
  4. Two entry points — @json-render/shadcn/catalog (server-safe schemas) and @json-render/shadcn (React implementations).
  5. Stable semantics outside the spec — Keep authoritative IDs, permissions, and domain rules in application state or server code. Let the generated spec choose presentation, not truth.
  6. Text escape hatch — Every generated workflow needs an accessible plain-text fallback.

Refinement and Directives

Use patch, merge, or diff edit modes to refine an existing surface instead of regenerating it wholesale. Start pilots with complete validated specs; add streaming only when progressive rendering materially improves the experience.

Use standard directives for locale-aware formatting, arithmetic, concatenation, counts, truncation, pluralization, joins, and translation. Keep policy decisions and privileged calculations server-side; directives are deterministic presentation helpers.

GemSkills Integration

Generate visual assets within generative UI workflows:

| Asset Type | Skill | Use Case | |---|---|---| | Hero images, backgrounds | generate-image | Dashboard headers, card backgrounds | | Logos, vector graphics | generate-svg | Brand elements within generated UI | | App icons | generate-icon | Platform-specific icon sets | | Post-processing | edit-image | Crop, resize, style-transfer on generated images | | Video backgrounds | generate-video | Remotion compositions with AI video | | Style exploration | browsing-styles | Browse 169 visual styles before generating |

Pipeline: browsing-styles (pick style) -> generate-image (create) -> edit-image (refine) -> optimize-images (compress)

MCP Apps Delivery

Generative UI specs can be delivered inside hosts that negotiate the MCP Apps extension. Serve a static ui:// resource and pass dynamic data through tool results. Always return useful text content alongside UI data so unsupported hosts still work.

Delivery path:

  1. AI generates a json-render spec (JSON)
  2. MCP tool returns a text summary plus validated UI data, preferably in structuredContent
  3. The MCP App View (sandboxed iframe) receives it via ontoolresult
  4. View's embedded <Renderer> component renders the spec as interactive UI
  5. User interacts — View calls server tools for fresh data, re-renders

This combines generative UI's guardrailed output with MCP Apps' context preservation and bidirectional data flow where supported.

AI generates spec → MCP tool returns structuredContent
                  → Host renders ui:// resource in iframe
                  → View renders spec with json-render <Renderer>
                  → User interacts → View calls tools → fresh spec

For building MCP Apps that deliver generative UI, use Skill(core:mcp-apps).

Delivery Channels

| Renderer | Package | Delivery Channel | |----------|---------|-----------------| | Web | @json-render/react | Web app or MCP App (ui:// resource) | | shadcn/ui | @json-render/shadcn | Web app or MCP App (ui:// resource) | | Mobile | @json-render/react-native | React Native app | | Video | @json-render/remotion | Video file | | Email | @json-render/react-email | Email (HTML) | | Images | @json-render/image | Image file (PNG/SVG) |

MCP Apps delivery is available for browser renderers. A single-file bundle is the most portable default, but it is not a protocol requirement when every referenced asset and origin is declared through exact resource CSP metadata.

@json-render/mcp@0.19.0 is useful scaffolding, not a complete production boundary: its helper serializes specs through text and uses broad CSP defaults. Wrap or replace that boundary when strict structuredContent, exact CSP, or app-only submission tools are required. Use the official MCP client matrix rather than assuming every host behaves the same.

Dithered primitives

dither-kit (Boring-Software-Inc) is a shadcn-style registry of Bayer-matrix dithered chart and identity primitives, vendored per-component:

bunx --bun shadcn@latest add Boring-Software-Inc/dither-kit/<component>

Charts (area, bar, pie, radar, sparkline):

<DitherBarChart data={rows} color="blue" />

Avatar — deterministic placeholder identity, same name -> same glyph:

<DitherAvatar name={seed} />

Standalone (button, gradient):

<DitherButton color="green">Ship</DitherButton>

Palette constraint: charts/buttons take a color prop locked to a 7-value enum (green/blue/purple/pink/orange/red/grey) — fork the vendored palette.ts for exact brand RGB triples. DitherAvatar and gradient take a continuous hue (0-360) instead, with no enum limit. Skip the dither treatment on dense tables or text-heavy surfaces, where the ordered-dither texture fights readability.

Reference Files

  • references/renderer-guide.md — Deep dive on each renderer's API and patterns
  • references/component-libraries.md — Available components and custom component patterns