Borrowing it
Nothing to install: this file belongs to webhook-co/webhook. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/webhook-co/webhook/main/.cursor/skills/build-mcp-app/SKILL.mdgit clone --depth 1 https://github.com/webhook-co/webhookWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/webhook-co/webhook/build-mcp-app)<a href="https://agentmods.dev/skills/webhook-co/webhook/build-mcp-app"><img src="https://agentmods.dev/badge/skills/webhook-co/webhook/build-mcp-app/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/webhook-co/webhook/build-mcp-app"><img src="https://agentmods.dev/badge/skills/webhook-co/webhook/build-mcp-app.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00056 | $0.00640 |
| Opus 5.5 | $0.00022 | $0.00256 |
| Sonnet 5.5 | $0.00011 | $0.00128 |
| Haiku 4.5 | $0.00006 | $0.00064 |
Grade A, and why
build-mcp-app scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 53 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Build MCP app
An MCP app is an interactive widget — a form, picker, confirmation dialog, chart, or live status view — that an MCP host renders in a sandboxed iframe. Use it only when a widget genuinely beats a text exchange (e.g. confirming a destructive replay, picking an endpoint, watching delivery status live). Most tools should stay text-first; reach for a UI when interaction or at-a-glance state is the point.
Human-UI-testing hard stop (read first)
Anything an MCP app renders is user-facing UI. The repo's non-negotiable applies in full: when a change needs human visual/UX verification you can't do yourself — layout, rendering, interaction behavior, or any user-facing copy — STOP and explicitly flag it for human testing. Do not mark the widget done, approve it, or merge it until a human has eyeballed it. Say plainly what to check (states, edge cases, copy).
When a widget is worth it
- Confirmation dialog for irreversible or cross-tenant-sensitive actions (replay, delete) — make the consequence explicit before the user commits.
- Picker / form when free-text would be error-prone (choosing an endpoint, a time window, an event).
- Chart / live status when trends or real-time delivery state are easier to read visually than as text.
If a plain text response answers the question, don't build a widget.
Build guidance
- Treat the iframe as untrusted and sandboxed: no ambient credentials inside the widget; pass only the minimum data needed, and keep all privileged work behind the MCP server (validate → delegate → respond), never in the widget.
- Never render raw webhook payloads or PII/PHI in a widget; reference events by id and show redacted summaries.
- Reuse
shared/types for anything the widget exchanges with the server — don't invent UI-only shapes. - Follow the design-ux conventions (accessibility, design tokens) and the
writing-voicerule for all labels and copy: sentence case, lowercasewebhook.co/wbhk.my, precise and quietly opinionated.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 53 lines · 56 tokens per session scan A a8a5ccc59f2a
build-mcp-app is a skill published in the GitHub repository webhook-co/webhook (0 stars, last pushed 18d ago), licensed Apache-2.0. It adds 56 tokens to every session and 640 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
mcptoon
Compress MCP tool discovery with the mcptoon CLI. Trigger when a session has a large MCP tool catalog (many servers/tools), when the user mentions token cost, tool discovery, mcptoon, or asks to list/call MCP tools efficiently. Also route here when the user says the MCP tool list is too large, the agent context window…
pipefy-ai-agents
Use this skill when the user wants to create, read, update, delete, or troubleshoot AI agents (conversational agents with behaviors). Includes pre-flight validation and pipe-scoped knowledge bases (list, plain text/document/data lookup CRUD, access probe) attached via dataSourceIds. For traditional automations and AI…
pipefy-api-fallback
Use this skill when a toolkit operation fails AND the introspection skill could not resolve the problem. This is the last-resort fallback (Tier 3): call the Pipefy GraphQL API directly using curl or httpx, authenticating with the Service Account (OAuth2) or a Personal Access Token (PAT) available as env var. Follow…
pipefy-html-interfaces
Use when the user wants to create, read, or rewrite a Pipefy HTML interface: a standalone page whose content is one HTML document, optionally showing live data from pipes and tables. Covers choosing data sources, creating the page, and rewriting it. Needs HTML interfaces enabled on the organization. For the main…
stockbit-auth
Log in to Stockbit and capture the session for this server — opens the browser login flow and verifies the token was stored. Use when the user asks to log in or re-authenticate to Stockbit, or after a status check reports the session expired, HTTP 401, or logged out.
memoire-design-tooling
Use when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi capability selected.