mcp-app-builder
Guide developers through creating and updating MCP Apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user wants to create or update a MCP App, MCP server or use the Skybridge framework.
- Installs
- 201
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/alpic-ai/skybridge --skill mcp-app-builder- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads mcp-app-builder automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Creating MCP Apps
Those are conversational experiences that extend AI assistants through tools and custom UI views. They're built as MCP servers invoked during conversations.
⚠️ The app is consumed by two users at once: the human and the AI Assistant LLM. They collaborate through the view—the human interacts with it, the LLM sees its state. Internalize this before writing code: the view is your shared surface.
SPEC.md keeps track of the app's requirements and design decisions. Keep it up to date as you work on the app.
No SPEC.md? → Read discover.md first. Nothing else until SPEC.md exists.
SPEC.md exists? → Read SPEC.md, then follow architecture.md to design the change. Update SPEC.md, then read the relevant Implementation references below before writing code.
Migrating from Skybridge < 0.36.x? → Read migrate-to-v1.md first. Users may reference skybridge >= 0.36.x as v1.
Migrating from Skybridge 1.x to 2.x? → Fetch the v2.0.0 release notes first and follow them.
Building an ecommerce app? → Read ecommerce.md first.
Setup
- Copy template → copy-template.md: when starting a new project with ready SPEC.md
- Run locally → run-locally.md: when ready to test, need dev server or ChatGPT/Claude connection
- Evals → evals.md: when checking that a real model reaches the right tools from natural prompts, in a test
Architecture
Design or evolve UX flows and API shape → architecture.md
Implementation
- Fetch and render data → fetch-and-render-data.md: when implementing server handlers and view data fetching
- State and context → state-and-context.md: when persisting view UI state and updating LLM context
- Prompt LLM → prompt-llm.md: when view needs to trigger LLM response
- UI guidelines → ui-guidelines.md: display modes, layout constraints, theme, device, and locale
- External links → open-external-links.md: when redirecting to external URLs or setting "open in app" target
- Download file → download-file.md: when saving content to the user's filesystem
- OAuth → oauth.md: when tools need user authentication to access user-specific data
- CSP → csp.md: when declaring allowed domains for fetch, assets, redirects, or iframes
Deploy
- Ship to production → deploy.md: when ready to deploy via Alpic
- Publish to ChatGPT/Claude Directories → publish.md: when ready to submit for review
Full API docs: https://docs.skybridge.tech/api-reference.md
Release notes & changelog: https://skybridge.tech/changelog.md
FAQ
What does the mcp-app-builder skill do?
Guide developers through creating and updating MCP Apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user wants to create or update a MCP App, MCP server or use the Skybridge framework.
How do I install mcp-app-builder?
Run npx skills add https://github.com/alpic-ai/skybridge --skill mcp-app-builder in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mcp-app-builder/ (personal) or .claude/skills/mcp-app-builder/ (project).
Which AI agents can use mcp-app-builder?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is mcp-app-builder safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains mcp-app-builder?
It is published by alpic-ai in alpic-ai/skybridge. It has 201 recorded installs.
More from alpic-ai/skybridge
chatgpt-app-builder
alpic-ai/skybridge
Guide developers through creating and updating ChatGPT plugins. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, debugging, running dev servers, deploying and connecting plugins to ChatGPT. Use when a user wants to create or update a ChatGPT plugin (formerly called a ChatGPT app) / MCP server for ChatGPT, or use the Skybridge framework.
skybridge
alpic-ai/skybridge
Guide developers through creating and updating ChatGPT plugins and MCP Apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, debugging, running dev servers, deploying and connecting them to ChatGPT. Use when a user wants to create or update a ChatGPT plugin, MCP App, MCP server or use the Skybridge framework.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available