by bOpen
[ PORTABLE SKILL ]
generative-ui
Decide between static components and AI-generated interfaces, and build the latter. Use for "generative UI", "dynamic UI", "json-render", "render JSON as UI", "AI UI generation", "MCP App UI", "deliver UI in chat", or "interactive chat interface". Covers the json-render framework, renderer and catalog selection, and MCP Apps delivery through ui:// resources.
PART OF
bOpen Web →Install the complete plugin to include its agents, hooks, commands, and runtime context.
Runtime support:Claude pluginCodex pluginGrok BuildOpenCode + portable skills
- PUBLISHER
- b-open-io
- RELATIONSHIP
- authored
- VERSION
- 0.2.4
- BENCHMARK
- unknown
[ RECOMMENDED INSTALL ]
Install bOpen Web
The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.
Codex
VERIFIEDGrok Build
VERIFIED- This is the grok CLI, not Grok Bot.
- grok plugin details web-dev
Grok Bot
GUIDED SETUP- Paste this request into your Bot’s conversation. It will report what it can add.
OpenCode
VERIFIED- Paste into OpenCode. Restart after installation.
- Includes native agents, commands, skills and supported hooks/MCP. HammerTime uses bounded follow-up turns in persistent sessions.
[ ADVANCED · INDIVIDUAL SKILL ]
Install only this skill
Use this narrower path only when you intentionally want the portable SKILL.md without the plugin’s surrounding capabilities.
Skills CLI
VERIFIED- Installs only the portable skill; it omits plugin hooks, agents, commands, apps/MCP configuration, and unlisted companion skills.
Grok Bot
GUIDED SETUP- Paste into your Bot’s conversation. Once saved, use / to select the skill.
[ PROVENANCE ]
Trace it to the source.
- DISTRIBUTED SOURCE
- modules/web-dev/skills/generative-ui/SKILL.md ↗
- UPSTREAM SOURCE
- No separate upstream declared
- DISTRIBUTED DIGEST
- sha256:f33367b4557d5f8c0833453c110e0a384d717d8f103ef726aff20d5187e52fb1
- LOCK HASH
- Not applicable
Companion skills
No required companion skills are declared.
Agents using this skill
Satchmo
Agent architecture specialist. Use this agent when the user asks to "design an agent", "wire up tool-calling", "add memory to my agent", "set up agent routing", "implement delegated signup", "support auth.md", or "integrate ID-JAG". Covers evals, resilient chat UIs, and delegated agent auth. Not for deploying a built agent to hosting or wiring its cron and sandbox (use devops), authoring individual skills or commands (use prompt-engineer), or auditing skill accuracy (use trainer).
Ridd
UI and interface design agent. Use this agent when the user asks to "design a component", "create UI", "style a page", "set up shadcn", "implement dark mode", "review UI accessibility", "create a mockup", "design a game HUD", "build a TV app interface", or "add controller navigation". Covers design systems, ten-foot UI, and Pencil mockups. Not for performance work (use optimizer) or 3D scenes (use creative-developer).
Kira
Mobile development specialist. Expo and React Native are the house default, with Swift, Kotlin, and Flutter expertise. Use this agent when the user asks to "build an Expo app", "build a React Native screen", "add biometric login to my iOS app", "set up Flutter navigation", or "fix this Android performance issue". Not for web frontend (use nextjs) or visual UI design (use designer).
Theo
Next.js and React specialist following Vercel best practices with Bun and Biome. Use this agent when the user asks to "build a Next.js page", "fix this React 19 issue", "set up Turbopack", "migrate to async APIs", or "upgrade to Next.js 16". Not for React Native (use mobile) or visual component design (use designer).
Maxim
Third-party service integration specialist. Use this agent when the user asks to "wire up this webhook", "integrate with this API", "sync data from X on a schedule", or "send transactional emails" — with signature verification, rate limiting, and error handling. Not for money-movement integrations (use payments) or MCP server setup (use mcp).
[ SOCIAL SHARE ]
Share this skill.
Pass the canonical page to a teammate or keep it close for later.