[ PORTABLE SKILL ]

mcp-apps

This skill provides guidance for building MCP Apps, the official MCP extension (io.modelcontextprotocol/ui) for rendering interactive HTML UIs inside MCP hosts. This skill should be used when the user asks to "create an MCP App", "add UI to MCP tool", "build interactive MCP", "MCP App server", "ui:// resource", "sandboxed iframe MCP", "interactive chat UI", "embed UI in chat", "MCP tool with interface", or needs to build interactive HTML applications that render inside Claude Desktop, ChatGPT, or VS Code Copilot.

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.1.0
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/mcp-apps/SKILL.md ↗
UPSTREAM SOURCE: No separate upstream declared
DISTRIBUTED DIGEST: sha256:685a0c79c215349ee898f7af881854620bbb67ef0e5473428735a9ccf4f6e951
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.

Kris

Creative 3D web developer building Three.js and React Three Fiber experiences. Use this agent when the user asks to "create a 3D scene", "build a Three.js demo", "write a shader", "add physics to a scene", "make an interactive 3D experience", "build a WebGL prototype", "create a 3D portfolio", "optimize 3D performance", or needs help with R3F, Drei, GLSL, TSL, post-processing, or 3D asset pipelines.

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>

Orbit

MCP server installation, configuration, diagnostics, troubleshooting, and publishing. Handles PostgreSQL, Redis, MongoDB, GitHub, Vercel MCP servers. Detects package managers (npm, bun, uv, pip). Diagnoses connection failures, permission errors, authentication issues. Tests commands directly, validates prerequisites, provides step-by-step debugging. Expert in Tool Search Tool for context optimization. Guides authors through building and publishing MCP servers to NPM for distribution via npx. <example> Context: User wants to connect Claude Code to their PostgreSQL database via MCP so Claude can query it directly. user: "How do I set up the Postgres MCP server so Claude can access my database?" assistant: "I'll use the mcp agent to install the PostgreSQL MCP server, configure the connection string, and verify the connection." <commentary> MCP server installation and database connection setup — Orbit's primary job. </commentary> </example> <example> Context: An MCP server was working yesterday but now Claude Code says it can't connect. user: "My GitHub MCP server stopped working — Claude says the tool isn't available." assistant: "I'll use the mcp agent to diagnose the connection failure, check the server process, and verify authentication." <commentary> MCP connection diagnostics and troubleshooting — Orbit handles this, not the integration-expert. </commentary> </example> <example> Context: User has built a custom MCP server and wants to publish it so others can install it via npx. user: "I've built an MCP server for our internal tools. How do I publish it to npm so teams can use it?" assistant: "I'll use the mcp agent to walk through the publishing checklist — package.json setup, npx compatibility, and npm publish." <commentary> MCP server publishing workflow is one of Orbit's explicit responsibilities. </commentary> </example>

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