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.
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o mcp-app-builder.zip https://jpskill.com/download/22309.zip && unzip -o mcp-app-builder.zip && rm mcp-app-builder.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/22309.zip -OutFile "$d\mcp-app-builder.zip"; Expand-Archive "$d\mcp-app-builder.zip" -DestinationPath $d -Force; ri "$d\mcp-app-builder.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
mcp-app-builder.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
mcp-app-builderフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Claude が読む原文 SKILL.md(中身を展開)
この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。
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.
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
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
- 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