[ PORTABLE SKILL ]

generative-ui

This skill should be used when the user asks about "generative UI", "dynamic UI", "AI-generated interfaces", "json-render", "render JSON as UI", "generate a dashboard", "create dynamic components", "AI UI generation", "MCP App UI", "deliver UI in chat", "interactive chat interface", or needs to decide whether to use static components vs AI-generated UI. Covers the json-render framework, renderer selection, catalog design, MCP Apps delivery (ui:// resources for in-chat interactive UIs), and integration with gemskills for visual asset generation.

PART OF

bopen-tools →

Complete plugin installation is recommended so this skill keeps its agents, hooks, commands, and runtime context.

Claude pluginCodex pluginPortable skills

PUBLISHER: b-open-io
RELATIONSHIP: authored
VERSION: 0.2.1
BENCHMARK: unknown

[ RECOMMENDED INSTALL ]

Install bopen-tools

The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.

Claude Code

VERIFIED

Codex

VERIFIED

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

[ PROVENANCE ]

Trace it to the source.

DISTRIBUTED SOURCE: skills/generative-ui/SKILL.md ↗
UPSTREAM SOURCE: No separate upstream declared
DISTRIBUTED DIGEST: sha256:16c500cd6d7b0fd8de777e6d5c74c7ad788e9925be4b975bd36d0d4eefa80baa
LOCK HASH: Not applicable

Companion skills

No required companion skills are declared.

Agents using this skill

Satchmo

Designs, integrates, and productionizes AI agents using OpenAI/Vercel SDKs and related stacks. Specializes in tool-calling, routing, memory, evals, resilient chat UIs, visual workflow planning, and live agent deployment via ClawNet. Can brainstorm agent architectures collaboratively and produce interactive workflow diagrams.

Ridd

Creates beautiful, accessible UI components using modern design systems and frameworks. This agent should be used when the user asks to "design a component", "create UI", "style a page", "set up shadcn", "set up shadcn preset", "implement dark mode", "review UI accessibility", "design in pencil", "open a .pen file", "create a mockup", or needs help with Tailwind CSS, component libraries, Pencil.dev visual design, or visual design.

Maxim

Implements API integrations, webhooks, and third-party service connections with proper error handling. <example> Context: User wants to send transactional emails when users complete certain actions in the app. user: "We need to send a welcome email when someone signs up and a receipt after purchase." assistant: "I'll use the integration-expert agent to wire up Resend, create email templates, and add the send calls at the right trigger points." <commentary> Third-party email service integration is Maxim's core domain. </commentary> </example> <example> Context: User needs to receive and process Stripe webhook events to update their database when payments complete. user: "Stripe is sending us webhook events but we're not handling them. Can you set that up?" assistant: "I'll use the integration-expert agent to create the webhook endpoint, verify signatures, and handle the relevant event types." <commentary> Webhook implementation with signature verification — Maxim handles this, not the backend developer. </commentary> </example> <example> Context: User wants to sync data from a third-party CRM into their app on a schedule. user: "We need to pull new contacts from HubSpot every hour and upsert them into our database." assistant: "I'll use the integration-expert agent to build the HubSpot API client, handle pagination and rate limits, and set up the sync job." <commentary> API client wrapper, rate limiting, and scheduled sync — Maxim's integration expertise. </commentary> </example>

Kira

Expert in mobile app development for React Native, Swift, Kotlin, and Flutter. <example> Context: User has a React Native app with sluggish list scrolling on Android. user: "Our FlatList with 1000 items is janky on Android — it drops frames constantly." assistant: "I'll use the mobile agent to profile the list, apply windowing optimizations, and tune the getItemLayout and keyExtractor props." <commentary> React Native performance on a specific platform — Kira's domain, not the optimizer or designer. </commentary> </example> <example> Context: User wants to add biometric authentication to their iOS app. user: "Can you add Face ID / Touch ID login to our Swift app?" assistant: "I'll use the mobile agent to integrate LocalAuthentication framework with a proper fallback flow for unsupported devices." <commentary> Native iOS feature integration using Swift frameworks — Kira handles this. </commentary> </example> <example> Context: User is building a new Flutter app and needs to set up navigation and state management. user: "Starting a Flutter app — what's the right way to set up routing and state with Riverpod?" assistant: "I'll use the mobile agent to scaffold the project with go_router and Riverpod, following current Flutter best practices." <commentary> Flutter architecture setup with modern tooling — Kira's cross-platform expertise. </commentary> </example>

Theo

Expert in Next.js and React development with Vercel best practices, Turbopack, async APIs, React 19, and modern tooling (Bun, Biome)

Related skills

ALL BOPEN-TOOLS SKILLS →

bopen-tools

advisor

Active when a Claude Code or Codex main session needs an independent, read-only second opinion at a commitment boundary. Use before substantive work on a hard task, when stuck or changing approach, at a final review gate, or when the user says "consult the advisor", "get a second opinion", "ask codex", "ask Fable", "ask a bigger model", or wants an advisor set up. Supports Claude-native advisor behavior, Codex-as-advisor, and a Codex-main to Claude Fable CLI channel. The advisor returns guidance; the main session retains execution and decision ownership.

authored0.0.2

bopen-tools

agent-auditor

Comprehensive audit skill for agents and skills across the plugin ecosystem. This skill should be used when the user asks to "audit agents", "review skill quality", "check skill health", "validate plugin skills", "audit our agents", "run a skill audit", or when performing periodic maintenance on agents and skills. Also use after creating or modifying multiple skills to verify ecosystem consistency.

authored0.1.2

bopen-tools

agent-decommissioning

This skill should be used when the user asks to "retire an agent", "decommission an agent", "remove an agent from the team", "shut down a bot", "remove a bot", "sunset an agent", or "take an agent offline permanently". This is a joint workflow between Satchmo (agent-builder) and Johnny (clawnet-bot:clawnet-mechanic). Satchmo handles plugin/code removal; Johnny handles infrastructure teardown (ClawNet bot, sandbox, BAP identity).

authored1.0.0

bopen-tools

agent-onboarding

Complete end-to-end checklist for adding a new agent to the bOpen team. Use when creating a new agent, onboarding a new team member, or need to remember the full agent deployment pipeline — design, write, avatar, plugin, Paperclip registration, roster, and optional ClawNet bot deployment.

authored1.1.1

bopen-tools

benchmark-skills

Use this skill when creating evals or assertions for a skill, running the skill benchmark harness, measuring skill effectiveness vs baseline, or writing evals.json files alongside skills. Invoke whenever someone asks to test, benchmark, or evaluate a skill's quality.

authored2.0.1

bopen-tools

charting

Full-stack data visualization and charting intelligence. This skill should be used when the user asks to "create a chart", "visualize this data", "build a dashboard", "plot this", "graph these metrics", "show me a chart of", "make a bar chart", "create a line graph", "build a heatmap", or needs help choosing the right chart type, selecting a charting library, or engineering the data pipeline from raw database state to rendered visualization. Covers chart selection, data transformation, library choice by scale, performance optimization, and accessibility.

authored1.0.0